96個前端JS部分基礎面試題（含答案）

【相關推薦：前端面試題】

1.幾個基本數據類型?複雜資料型別?值型別與引用資料型別?堆疊資料結構?

基本資料型別：Undefined、Null、Boolean、Number、String
值型別：數值、布林值、null、undefined。
引用類型：物件、陣​​列、函數。
堆疊資料結構：是一種支援後進先出(LIFO)的集合,即後被插入的資料,先被取出!
js數組中提供了以下幾個方法可以讓我們很方便實現堆疊：
shift:從陣列中把第一個元素刪除，並傳回這個元素的值。
unshift: 在數組的開頭添加一個或更多元素，並返回新的長度
push:在數組的中末尾添加元素，並返回新的長度
pop:從數組中把最後一個元素刪除，並傳回這個元素的值。

2.宣告函數作用提升?宣告變數與宣告函數的提升有什麼差別?

(1) 變數宣告提升：變數申明在進入執行上下文就完成了。
只要變數在程式碼中進行了聲明，無論它在哪個位置上進行聲明， js引擎都會將它的聲明放在範圍作用域的頂部；

(2) 函數聲明提升：執行程式碼之前會先讀取函數聲明，意味著可以把函數申明放在呼叫它的語句後面。
只要函數在程式碼中進行了聲明，無論它在哪個位置上進行聲明， js引擎都會將它的聲明放在範圍作用域的頂部；

(3) 變數or函數宣告：函數聲明會覆寫變數聲明，但不會覆寫變數賦值。
同一個名稱標識a，即有變數宣告var a，又有函數宣告function a() {}，不管二者宣告的順序，函數宣告會覆寫變數聲明，也就是說，此時a的值是宣告的函數function a() {}。注意：如果在變數宣告的同時初始化a，或是之後對a進行賦值，此時a的值變數的值。 eg: var a; var c = 1; a = 1; function a() { return true; } console.log(a);

3.判斷資料型別?

typeof傳回的型別都是字串形式，可以判斷function的型別；在判斷除Object型別的物件時比較方便。
判斷已知物件類型的方法： instanceof，後面一定要是物件類型，且大小寫不能錯，該方法適合一些條件選擇或分支。

4.非同步程式設計？

方法1：回呼函數，優點是簡單、容易理解和部署，缺點是不利於程式碼的閱讀和維護，各個部分之間高度耦合（Coupling），流程會很混亂，而且每個任務只能指定一個回呼函數。

方法2：時間監聽，可以綁定多個事件，每個事件可以指定多個回呼函數，而且可以「去耦合」（Decoupling），有利於實現模組化。缺點是整個程式都要變成事件驅動型，運作流程會變得很不清晰。

方法3：發布/訂閱，性質與「事件監聽」類似，但明顯優於後者。

方法4：Promises對象，是CommonJS工作小組提出的一種規範，目的是為非同步程式設計提供統一介面。
簡單說，它的想法是，每一個非同步任務返回一個Promise對象，該物件有一個then方法，允許指定回調函數。

5.事件流?事件擷取？事件冒泡？

事件流：從頁面中接收事件的順序。也就是說當一個事件產生時，這個事件的傳播過程，就是事件流。

IE中的事件流叫事件冒泡；事件冒泡：事件開始時由最具體的元素接收，然後逐級向上傳播到較為不具體的節點（文檔）。對html來說，就是當一個元素產生了一個事件，它會把這個事件傳遞給它的父元素，父元素接收到了之後，還要繼續傳遞給它的上一級元素，就這樣一直傳播到document對象（親測現在的瀏覽器到window對象，只有IE8及下不這樣

事件捕獲是不太具體的元素應該更早接受到事件，而最具體的節點應該最後接收到事件。他們的用意是在事件到達目標之前就捕獲它；也就是跟冒泡的過程正好相反，以html的click事件為例，document對象（DOM級規範要求從document開始傳播，但是現在的瀏覽器是從window物件開始的）最先接收到click事件的然後事件沿著DOM樹依次向下傳播，一直傳播到事件的實際目標；

6.如何清除一個定時器?

window.clearInterval();
window.clearTimeout();

#7.如何新增一個dom物件到body中?innerHTML和innerText區別?

body.appendChild(dom元素);
innerHTML:從物件的起始位置到終止位置的全部內容,包括Html標籤。
innerText:從起始位置到終止位置的內容, 但它去除Html標籤
分別簡述五個window物件、屬性

成員物件   
window.event    window.document     window .history    
window.screen    window.navigator    window.external
Window物件的屬性如下：
window //  複製window.name //為窗戶命名   
window.defaultStatus //設定窗戶狀態列資訊     
window.location //URL位址,配備佈置這個屬性可以開啟新的頁面

#8.資料持久化技術(ajax)?簡述ajax流程

1)客戶端產生js的事件

2)建立XMLHttpRequest物件

3)對XMLHttpRequest進行設定
4)透過AJAX引擎發送非同步請求
5)伺服器端接收請求並且處理請求，返回html或xml內容
6)XML呼叫一個callback()處理回應回來的內容
7)頁面局部刷新

9.回呼函數?

#回呼函數就是一個透過函數指標呼叫的函數。如果你把函數的指標（位址）當作參數傳遞給另一個函數，當這個指標被用來呼叫所指向的函數時，我們就說這是回呼函數。回調函數不是由該函數的實現方直接調用，而是在特定的事件或條件發生時由另外的一方調用的，用於對該事件或條件進行響應。

10.什麼是閉包?*  堆疊溢位有什麼差別？內存洩漏? 那些操作會造成內存洩漏？怎麼樣防止記憶體洩漏？

閉包：就是能夠讀取其他函數內部變數的函數。

堆疊溢位：就是不顧堆疊中分配的局部資料塊大小，向該資料區塊寫入了過多的數據，導致資料越界，結果覆蓋了別的資料。經常會在遞歸中發生。

記憶體外洩是指：以動態儲存分配函數記憶體空間，在使用完畢後未釋放，導致一直佔據該記憶體單元。直到程式結束。指任何物件在您不再擁有或需要它之後仍然存在。

造成記憶體洩漏：
setTimeout 的第一個參數使用字串而非函數的話，會引發記憶體洩漏。
閉包、控制台日誌、循環（在兩個物件彼此引用且彼此保留時，就會產生一個循環）
防止記憶體洩漏：
1、不要動態綁定事件；
2、不要在動態添加，或會被動態移除的dom上綁事件，用事件冒泡在父容器監聽事件；
3、如果要違反上面的原則，必須提供destroy方法，保證移除dom後事件也被移除，這點可以參考Backbone的原始碼，做的比較好；
4、單例化，少創建dom，少綁事件。

11.平常工作中怎麼樣進行資料互動?如果後台沒有提供資料怎麼樣進行開發?mock資料與後台傳回的格式不同意怎麼辦?

由後台編寫介面文件、提供資料介面實、前台透過ajax存取實現資料互動；

在沒有資料的情況下尋找後台提供靜態資料或自行定義mock資料；

傳回資料不統一時編寫映射檔對資料進行映射。

12 簡述ajax執行流程

基本步骤：var xhr =null;//创建对象 
if(window.XMLHttpRequest){
       xhr = new XMLHttpRequest();}else{
       xhr = new ActiveXObject("Microsoft.XMLHTTP");}xhr.open(“方式”,”地址”,”标志位”);//初始化请求 
   xhr.setRequestHeader(“”,””);//设置http头信息 
xhr.onreadystatechange =function(){}//指定回调函数 
xhr.send();//发送请求

13.自執行函數?用於什麼場景？好處?

自執行函數:1、宣告一個匿名函數2、馬上呼叫這個匿名函數。

作用：建立一個獨立的作用域。

好處：防止變數彌散到全局，以免各種js函式庫衝突。隔離作用域避免污染，或截斷作用域鏈，避免閉包造成引用變數無法釋放。利用立即執行特性，傳回所需的業務函數或對象，避免每次透過條件判斷來處理

場景：一般用於框架、外掛程式等場景

14.html和xhtml有什麼差別?

HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的標記語言。

1.XHTML 元素必須被正確地巢狀。

2.XHTML 元素必須關閉。
3.標籤名必須用小寫字母。
4.空標籤也必須關閉。
5.XHTML 文件必須擁有根元素。

15. 什麼是建構子？與普通函數有什麼差別?

#

构造函数：是一种特殊的方法、主要用来创建对象时初始化对象，总与new运算符一起使用，创建对象的语句中构造函数的函数名必须与类名完全相同。
与普通函数相比只能由new关键字调用，构造函数是类的标示

16. 通过new创建一个对象的时候，函数内部有哪些改变

function Person(){}Person.prototype.friend = [];Person.prototype.name = '';// var a = new Person();// a.friend[0] = '王琦';// a.name = '程娇';// var b = new Person();// b.friend？// b.name?

1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中。
3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。

17.事件委托？有什么好处?

（1）利用冒泡的原理，把事件加到父级上，触发执行效果
（2）好处：新添加的元素还会有之前的事件；提高性能。

18.window.onload ==? DOMContentLoaded ?

一般情况下，DOMContentLoaded事件要在window.onload之前执行，当DOM树构建完成的时候就会执行DOMContentLoaded事件，而window.onload是在页面载入完成的时候，才执行，这其中包括图片等元素。大多数时候我们只是想在DOM树构建完成后，绑定事件到元素，我们并不需要图片元素，加上有时候加载外域图片的速度非常缓慢。

19.节点类型?判断当前节点类型?

1. 元素节点                        
2. 属性节点                        
3. 文本节点                        
8. 注释节点                        
9. 文档节点                        
通过nodeObject.nodeType判断节点类型：其中，nodeObject 为DOM节点（节点对象）。该属性返回以数字表示的节点类型，例如，元素节点返回 1，属性节点返回 2 。

20.如何合并两个数组？数组删除一个元素?

//三种方法。 （1）var arr1=[1,2,3];
               var arr2=[4,5,6];
               arr1 = arr1.concat(arr2);
               console.log(arr1); 
 （2）var arr1=[1,2,3];
               var arr2=[4,5,6];
               Array.prototype.push.apply(arr1,arr2);
               console.log(arr1);
 （3）var arr1=[1,2,3];
               var arr2=[4,5,6];
               for (var i=0; i <p><strong>21.强制转换 显式转换 隐式转换?</strong></p><pre class="brush:php;toolbar:false">//强制类型转换：
Boolean(0)                // => false - 零
           Boolean(new object())   // => true - 对象
               Number(undefined)       // =>   NaN
               Number(null)              // => 0
               String(null)              // => "null"
parseInt( )
parseFloat( )
JSON.parse( )
JSON.stringify ( )

隐式类型转换：
在使用算术运算符时，运算符两边的数据类型可以是任意的，比如，一个字符串可以和数字相加。之所以不同的数据类型之间可以做运算，是因为JavaScript引擎在运算之前会悄悄的把他们进行了隐式类型转换的
（例如：x+""         //等价于String(x)
              +x                 //等价于Number(x)
              x-0         //同上
              !!x         //等价于Boolean(x),是双叹号）

显式转换：
如果程序要求一定要将某一类型的数据转换为另一种类型，则可以利用强制类型转换运算符进行转换，这种强制转换过程称为显示转换。
显示转换是你定义让这个值类型转换成你要用的值类型，是底到高的转换。例 int 到float就可以直接转，int i=5,想把他转换成char类型，就用显式转换（char）i

22. Jq中如何实现多库并存?

Noconfict 多库共存就是“$ ”符号的冲突。

方法一： 利用jQuery的实用函数$.noConflict();这个函数归还$的名称控制权给另一个库，因此可以在页面上使用其他库。这时，我们可以用"jQuery "这个名称调用jQuery的功能。 $.noConflict();  
jQuery('#id').hide();    
.....
//或者给jQuery一个别名  
var $j=jQuery  
$j('#id').hide();    
.....

方法二： (function($){})(jQuery)

方法三： jQuery(function($){})
通过传递一个函数作为jQuery的参数，因此把这个函数声明为就绪函数。 我们声明$为就绪函数的参数，因为jQuery总是吧jQuery对象的引用作为第一个参数传递，所以就保证了函数的执行。

23.Jq中get和eq有什么区别？

get() :取得其中一个匹配的元素。num表示取得第几个匹配的元素，get多针对集合元素，返回的是DOM对象组成的数组 eq():获取第N个元素，下标都是从0开始，返回的是一个JQuery对象

24.如何通过原生js 判断一个元素当前是显示还是隐藏状态?

if( document.getElementById("div").css("display")==='none')
if( document.getElementById("div").css("display")==='block')
$("#div").is(":hidden"); // 判断是否隐藏
$("#div").is(":visible")

25.Jq如何判断元素显示隐藏？

//第一种：使用CSS属性 
var display =$('#id').css('display'); 
if(display == 'none'){    alert("我是隐藏的！"); }
//第二种：使用jquery内置选择器 
<div> <p>仅仅是测试所用</p> </div>
if($("#test").is(":hidden")){        
	$("#test").show();    
	//如果元素为隐藏,则将它显现 
}else{       
	$("#test").hide();     
	//如果元素为显现,则将其隐藏 
}
//第三种：jQuery判断元素是否显示 是否隐藏
var node=$('#id');
if(node.is(':hidden')){　　//如果node是隐藏的则显示node元素，否则隐藏
　　node.show();　
}else{
　　node.hide();
}

26.移动端上什么是点击穿透?

点击穿透现象有3种：
点击穿透问题：点击蒙层（mask）上的关闭按钮，蒙层消失后发现触发了按钮下面元素的click事件跨页面点击穿透问题：如果按钮下面恰好是一个有href属性的a标签，那么页面就会发生跳转另一种跨页面点击穿透问题：这次没有mask了，直接点击页内按钮跳转至新页，然后发现新页面中对应位置元素的click事件被触发了

解决方案：
1、只用touch
最简单的解决方案，完美解决点击穿透问题
把页面内所有click全部换成touch事件（ touchstart 、’touchend’、’tap’）

2、只用click
下下策，因为会带来300ms延迟，页面内任何一个自定义交互都将增加300毫秒延迟

3、tap后延迟350ms再隐藏mask
改动最小，缺点是隐藏mask变慢了，350ms还是能感觉到慢的

4、pointer-events
比较麻烦且有缺陷， 不建议使用mask隐藏后，给按钮下面元素添上 pointer-events: none; 样式，让click穿过去，350ms后去掉这个样式，恢复响应缺陷是mask消失后的的350ms内，用户可以看到按钮下面的元素点着没反应，如果用户手速很快的话一定会发现

27.Jq绑定事件的几种方式？on bind ?

jQuery中提供了四种事件监听方式，分别是bind、live、delegate、on，对应的解除监听的函数分别是unbind、die、undelegate、off

Bind( )是使用频率较高的一种，作用就是在选择到的元素上绑定特定事件类型的监听函数;

Live( )可以对后生成的元素也可以绑定相应的事件,处理机制就是把事件绑定在DOM树的根节点上，而不是直接绑定在某个元素上;

Delegate( )采用了事件委托的概念，不是直接为子元素绑定事件，而是为其父元素（或祖先元素也可）绑定事件，当在p内任意元素上点击时，事件会一层层从event target向上冒泡，直至到达你为其绑定事件的元素；

on( )方法可以绑定动态添加到页面元素的事件，on()方法绑定事件可以提升效率；

28.Jq中如何将一个jq对象转化为dom对象？

方法一：
jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。
如：var $v =$("#v") ; //jQuery对象
var v=$v[0]; //DOM对象
alert(v.checked) //检测这个checkbox是否被选中

方法二：
jQuery本身提供，通过.get(index)方法，得到相应的DOM对象
如：var $v=$("#v"); //jQuery对象
var v=$v.get(0); //DOM对象
alert(v.checked) //检测这个checkbox是否被选中

29.Jq中有几种选择器?分别是什么?

层叠选择器、基本过滤选择器、内容过滤选择器、可视化过滤选择器、属性过滤选择器、子元素过滤选择器、表单元素选择器、表单元素过滤选择器

30.Jq中怎么样编写插件?

//第一种是类级别的插件开发：//1.1 添加一个新的全局函数 添加一个全局函数，我们只需如下定义： 
jQuery.foo = function() {
     alert('This is a test. This is only a test.');  };   //1.2 增加多个全局函数 添加多个全局函数，可采用如下定义： 
jQuery.foo = function() {
       alert('This is a test. This is only a test.');  };  jQuery.bar = function(param) {
      alert('This function takes a parameter, which is "' + param + '".');  };   调用时和一个函数的一样的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar');//1.3 使用jQuery.extend(object);　 
jQuery.extend({
      foo: function() {
          alert('This is a test. This is only a test.');
        },
      bar: function(param) {
          alert('This function takes a parameter, which is "' + param +'".');
        }
     }); //1.4 使用命名空间// 虽然在jQuery命名空间中，我们禁止使用了大量的javaScript函数名和变量名。// 但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突，因此我们习惯将一些方法// 封装到另一个自定义的命名空间。jQuery.myPlugin = {         foo:function() {         
  alert('This is a test. This is only a test.');         
 },         
 bar:function(param) {         
  alert('This function takes a parameter, which is "' + param + '".');   
 }        }; //采用命名空间的函数仍然是全局函数，调用时采用的方法： 
$.myPlugin.foo();        $.myPlugin.bar('baz');//通过这个技巧（使用独立的插件名），我们可以避免命名空间内函数的冲突。//第二种是对象级别的插件开发//形式1： 
(function($){    
  $.fn.extend({    
   pluginName:function(opt,callback){    
             // Our plugin implementation code goes here.      
   }    
  })    })(jQuery);  //形式2：(function($) {      
   $.fn.pluginName = function() {    
        // Our plugin implementation code goes here.    
   };     })(jQuery);//形参是$，函数定义完成之后,把jQuery这个实参传递进去.立即调用执行。//这样的好处是,我们在写jQuery插件时,也可以使用$这个别名,而不会与prototype引起冲突

31.$('p+.ab')和$('.ab+p') 哪个效率高？

$('p+.ab')效率高

32.$.map和$.each有什么区别

map()方法主要用来遍历操作数组和对象，会返回一个新的数组。$.map()方法适用于将数组或对象每个项目新阵列映射到一个新数组的函数；
each()主要用于遍历jquery对象，返回的是原来的数组，并不会新创建一个数组。

33.编写一个 getElementsByClassName 封装函数?

   <input>   <script> window.onload = function(){ //方法一         
    var Opt = document.getElementById(&#39;sub&#39;);
    var getClass = function(className,tagName){
        if(document.getElementsByTagName){
            var Inp = document.getElementsByTagName(tagName);
            for(var i=0; i<Inp.length; i++){
                if((new RegExp(&#39;(\\s|^)&#39; +className +&#39;(\\s|$)&#39;)).test(Inp[i].className)){
                      return Inp[i];
                    }
                }
            }else if(document.getElementsByClassName){
                return document.getElementsByClassName(className);
        }
    }                 //方法二    var aa = getClass("confirm", "input");
        function getClass(className, targetName){
            var ele = [];
            var all = document.getElementsByTagName(targetName || "*");
            for(var i=0; i<all.length; i++){
                if(all[i].className.match(new RegExp(&#39;(\\s|^)&#39;+confirm+&#39;(\\s|$)&#39;))){    
                    ele[ele.length] = all[i];
                }
            }
            return ele;
        }//方法三    function getObjsByClass(tagName, className){
           if(document.getElementsByClassName){
               alert("document.getElementsByClassName");
               return document.getElementsByClassName(className);
           }else{
               var el = [];
               var _el = document.getElementsByTagName(tagName);
               for(var i=0; i<_el.length; i++){
                   if(_el[i].className.indexOf(className) > -1){
                       alert(_el[i]);
                       el[_el.length] = _el[i];
                   }
               }
               alert(el);
               return el;
           }
       }
   }
 </script>

34.简述下工作流程

我在之前的公司工作流程大概是這樣的：公司定稿會結束以後，會進行簡單的技術研討，然後我們前端會進行先期的技術準備。前端切圖人員會進行psd設計稿切圖，並將css檔案整合。我們主要編寫JS部分，其中包括搭建前端框架（大專案），編寫js業務和資料持久化操作，我們也會編寫js插件並且進行封裝方便使用，還有就是編寫JS前端組建和JS測試單元，最後將完成的JS部分與切圖人員提供的HTML頁面整合。最後對完成的頁面進行功能測試、頁面相容、產品還原。然後對產品進行封存，並提交測試。如果出現BUG會回傳給我們開發人員進行修改，再提交測試，最後測試成功，進行版本封存。等到程式全部上線的時候再進行線上測試。

35.一般使用什麼版本控制工具?svn如何對檔案加鎖

svn加鎖目的：為了避免多個人在同一時間對同一個檔案改動的相互覆蓋，版本控制系統就必須有一套衝突處理機制。

svn加鎖兩種策略：樂觀加鎖：所有簽出的檔案都是可讀寫的，對檔案的修改不必取得檔案的鎖，當你修改完檔案簽入時，會先要求你更新本機文件，版本控制系統不會覆蓋你的本地修改，而是會讓你自己合併衝突後簽入。

嚴格加鎖：所有簽出的檔案都是唯讀的，任何對檔案的修改必須要取得檔案的鎖，如果其他人沒有擁有該檔案的鎖，那麼版本控制系統就會授權給你文件的鎖，並將文件設定為可編輯的。

svn兩種加鎖步驟：樂觀加鎖：選擇你想要取得鎖定的文件，然後右鍵選單點擊TortoiseSVN 選取以取得鎖定。

嚴格加鎖：在想要採取嚴格加鎖的檔案或目錄上點選右鍵，使用TortoiseSVN 屬性選單，點選新屬性，選擇需要鎖定。

36. git 和svn的區別?

SVN是集中式版本控制系統，版本庫是集中放在中央伺服器的，而乾活的時候，用的都是自己的電腦，所以首先要從中央伺服器哪裡得到最新的版本，然後再乾活，幹完後，需要把自己做完的活推送到中央伺服器。集中式版本控制系統是必須連網才能運作，如果在區域網路還可以，頻寬夠大，速度夠快，如果在網路下，如果網路速慢的話，就納悶了。

Git是分散式版本控制系統，那麼它就沒有中央伺服器的，每個人的電腦就是一個完整的版本庫，這樣，工作的時候就不需要連網了，因為版本都是在自己的電腦上。既然每個人的電腦都有完整的版本庫，那多個人該如何協作呢？比如說自己在電腦上改了檔案A，其他人也在電腦上改了檔案A，這時，你們兩之間只要把各自的修改推送給對方，就可以互相看到對方的修改了。

37. jquery和zepto有什麼區別?

#1.針對行動裝置程序，Zepto有一些基本的觸控事件可以用來做觸控螢幕互動（tap事件、swipe事件），Zepto是不支援IE瀏覽器的，這不是Zepto的開發者Thomas Fucks在跨瀏覽器問題上犯了迷糊，而是經過了認真考慮後為了降低文件尺寸而做出的決定，就像jQuery的團隊在2.0版中不再支援舊版的IE（6 7 8）一樣。因為Zepto使用jQuery句法，所以它在文件中建議把jQuery當作IE上的後備函式庫。那樣程式仍能在IE中，而其他瀏覽器則能享受到Zepto在檔案大小上的優勢，然而它們兩個的API不是完全相容的，所以使用這種方法時一定要小心，並要做充分的測試。

2.Dom操作的差異：新增id時jQuery不會生效而Zepto會生效。

3.zepto主要用在行動裝置上，只支援較新的瀏覽器，好處是程式碼量比較小，效能也較好。
jquery主要是相容性好，可以跑在各種pc，移動上，好處是相容各種瀏覽器，缺點是程式碼量大，同時考慮相容，效能也不夠好。

38. $(function(){})和window.onload 和 $(document).ready(function(){})

window.onload:用於當頁面的所有元素，包括外部引用文件，圖片等都加載完畢時運行函數內的函數。 load方法只能執行一次，如果在js檔案裡寫了多個，只能執行最後一個。

$(document).ready(function(){})和$(function(){})都是用來當頁面的標準DOM元素被解析成DOM樹後就執行內部函數。這個函數是可以在js檔案裡多次寫的，對於多人共同寫的js就有很大的優勢，因為所有行為函數都會執行到。而且$(document).ready()函數在HMTL結構載入完後就可以執行，不需要等大型檔案載入或不存在的連線等耗時工作完成才執行，效率高。

39. Jq中 attr 和 prop 有什麼區別

對於HTML元素本身就帶有的固有屬性，在處理時，使用prop方法。
對於HTML元素我們自己自訂的DOM屬性，在處理時，使用attr方法。

40. 簡述下 this 和定義屬性和方法的時候有什麼差別?Prototype？

this表示當前對象，如果在全域作用範圍內使用this，則指稱目前頁面物件window； 如果在函數中使用this，則this指涉什麼是根據執行時間此函數在什麼對像上被呼叫。我們也可以使用apply和call兩個全域方法來改變函數中this的具體指向。

prototype本質上還是一個JavaScript物件。並且每個函數都有一個預設的prototype屬性。

在prototype上定義的屬性方法為所有實例共享，所有實例皆引用到同一個對象，單一實例對原型上的屬性進行修改，也會影響到所有其他實例。

41. 什麼是預編譯語音|預編譯處理器?

#Sass是一種CSS預處理器語言，透過程式產生CSS程式碼。因為可編程，所以操控彈性自由度高，方便實作一些直接寫CSS程式碼較困難的程式碼。

同時，因為Sass是產生CSS的語言，所以寫出來的Sass檔是不能直接用的，必須經過編譯器編譯成CSS檔才能使用。

CSS 預處理器是一種語言用來為CSS 增加一些程式設計的特性，無需考慮瀏覽器的兼容性問題，例如你可以在CSS 中使用變數、簡單的程式邏輯、函數等等在程式語言中的一些基本技巧，可以讓你的CSS 更見簡潔，適應性更強，程式碼更直覺等諸多好處。最常用的css預處理器有sass、less css、 stylus。

42.ajax 和 jsonp ？

ajax和jsonp的區別：
相同點：都是請求一個url
不同點：ajax的核心是透過xmlHttpRequest取得內容
jsonp的核心則是動態添加<script>標籤來呼叫伺服器提供的js腳本。 </script>

43.ajax執行流程？

1. 建立XMLHttpRequest物件,也就是建立一個非同步呼叫物件
2. 建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證訊息
3 . 設定回應HTTP請求狀態變化的函數
4. 傳送HTTP請求
5. 取得非同步呼叫傳回的資料
6. 使用JavaScript和DOM實作局部刷新

#44 .xhr物件status ? readystate?

status是XMLHttpRequest物件的一個屬性，表示回應的HTTP狀態碼。
readyState是XMLHttpRequest物件的一個屬性，用來識別目前XMLHttpRequest物件處於什麼狀態。

45.readystate 0~4

0：未初始化狀態：此時，已經建立了一個XMLHttpRequest物件
1： 準備傳送狀態：此時，已經呼叫了XMLHttpRequest物件的open方法，並且XMLHttpRequest物件已經準備好將一個請求發送到伺服器端
2：已經發送狀態：此時，已經透過send方法把一個請求發送到伺服器端，但是還沒有收到一個回應
3：正在接收狀態：此時，已經接收到HTTP回應頭部訊息，但是訊息體部分還沒有完全接收到
4：完成回應狀態：此時，已經完成了HTTP回應的接收

46.說出幾個http協定狀態碼?

#200, 201, 302, 304, 400, 404, 500

200：請求成功
201：請求成功並且伺服器建立了新的資源
302：伺服器目前從不同位置的網頁回應請求，但請求者應繼續使用原有位置來回應以後的請求。
304：自從上次請求後，請求的網頁未修改過。伺服器傳回此回應時，不會傳回網頁內容。
400：伺服器不理解請求的語法。
404：請求的資源（網頁等）不存在
500： 內部伺服器錯誤

47.上一個項目是什麼？主要負責哪些？購物車流程?付款功能?

主要負責哪些就講主要做哪些功能模組：

1）商品模組:
1、商品清單：商品排序商品篩選商品過濾商品查詢商品推薦
2、商品詳情:類型推薦商品簡介商品詳情商品評價售後維護

2)購物車模組：商品編號、數量、價格、總額、運費、運送選項、運費總計、從購物車刪除選項、更新數量、結帳、繼續購物、商品描述、庫存資訊

48.sessionStorage和localstroage與cookie之間有什麼關聯, cookie最大存放多少位元組

三者共同點：都是保存在瀏覽器端，且同源的。

區別:
1、cookie在瀏覽器和伺服器間來回傳遞。而sessionStorage和localStorage不會自動把資料發給伺服器，僅在本地保存

2、儲存大小限制也不同，cookie資料不能超過4k，sessionStorage和localStorage 但比cookie大得多，可以達到5M

3、資料有效期限不同，sessionStorage：僅在當前瀏覽器視窗關閉前有效，自然也不可能持久保持；localStorage：始終有效，視窗或瀏覽器關閉也一直保存，因此用作持久資料；cookie只在設定的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉

4、作用域不同，sessionStorage不在不同的瀏覽器視窗中共享，即使是同一個頁面(即數據不共享)；localStorage 在所有同源視窗中都是共享的；cookie也是在所有同源視窗中都是共享的( 即資料共享)。

49.ajax中 get 和 post 有什麼區別?

get和post都是資料提交的方式。
get的資料是透過網址問號後邊拼接的字串進行傳遞的。 post是透過一個HTTP包體傳遞資料的。
get的傳輸量是有限制的，post是沒有限制的。
get的安全性可能沒有post高，所以我們一般都用get來取得數據，post一般用來修改數據。

50.Gc機制是什麼？為什麼閉包不會被回收變數和函數？

1、Gc垃圾回收機制;
 2、外部變數沒釋放，所以指向的大函數內的小函數也釋放不了

51.簡述下你理解的物件導向？

萬物皆對象，把一個物件抽象成類別,具體上就是把一個物件的靜態特徵和動態特徵抽象成屬性和方法,也就是把一類事物的演算法和資料結構封裝在一個類別之中,程式就是多個物件和相互之間的通訊組成的.

物件導向具有封裝性,繼承性,多態性。
封裝:隱藏了物件內部不需要暴露的細節,使得內部細節的變動跟外界脫離,只依靠介面進行通訊.封裝性降低了程式設計的複雜性. 透過繼承,使得新建一個類別變得容易,一個類別從派生類別那裡獲得其非私有的方法和公用屬性的繁瑣工作交給了編譯器. 而繼承和實現介面和運行時的類型綁定機制所產生的多態,使得不同的類別所產生的物件能夠對相同的訊息作出不同的反應,大大提高了程式碼的通用性.

總之,物件導向的特性提高了大型程式的重用性和可維護性.

52.this是什麼在不同場景中分別代表什麼

（1）function a(){ this ?}       //This:指向windows

（2） function b(){ return function(){ this ?}}b()();       //This:指向windows

（3）function c(){ return {s:function(){this} }}c().s();       //This:指向object

#由於其運行期綁定的特性，JavaScript 中的this 含義要豐富得多，它可以是全域物件、當前物件或者任意對象，這完全取決於函數的呼叫方式。

53.你對資料校驗是怎麼樣處理的？ jquery.validate？

通俗的說，就是為保證資料的完整性，用一種指定的演算法對原始資料計算出的一個校驗值。接收方用同樣的演算法計算一次校驗值，如果跟隨資料提供的校驗值一樣，就表示資料是完整的。
用正規表示式來處理;
jquery.validate：為表單驗證外掛程式

54.如何對登入的帳號密碼進行加密?

# Md5

55.在jq中 mouseover mouseenter mouseout mouseleave 和hover有什麼關聯?

#

mouseenter与mouseover：
不论鼠标指针穿过被选中元素或其子元素，都会触发mouseover事件。
只有在鼠标指针穿过被选元素时，才会触发mouseentr事件。

mouseout与mouseleave：
不论鼠标离开被选元素还是任何子元素，都会触发mouseout事件。
只有在鼠标指针离开被选元素时，才会触发mouseleave事件。

hover:
hover是一个符合方法，相当于mouseenter+mouseleave。

56.jsonp原理？ 缺点?

工作原理：使用script标签实现跨域访问，可在url中指定回调函数，获取JSON数据并在指定的回调函数中执行jquery实现jsop。

缺点：只支持GET方式的jsonp实现，是一种脚本注入行为存在一定的安全隐患。如果返回的数据格式有问题或者返回失败了，并不会报错。

57.除了jsonp 还有什么跨域方式

javascript跨域有两种情况：
1、基于同一父域的子域之间，如：http://a.c.com和http://b.c.com
2、基于不同的父域之间，如：http://www.a.com和http://www.b.com
3、端口的不同，如：http://www.a.com:8080和http://www.a.com:8088
4、协议不同，如：http://www.a.com和https://www.a.com

对于情况3和4，需要通过后台proxy来解决，具体方式如下：
a、在发起方的域下创建proxy程序
b、发起方的js调用本域下的proxy程序
c、proxy将请求发送给接收方并获取相应数据
d、proxy将获得的数据返回给发起方的js

代码和ajax调用一致，其实这种方式就是通过ajax进行调用的
而情况1和2除了通过后台proxy这种方式外，还可以有多种办法来解决：
1、document.domain+iframe（只能解决情况1）：
a、在发起方页面和接收方页面设置document.domain，并将值设为父域的主域名(window.location.hostname)
b、在发起方页面创建一个隐藏的iframe，iframe的源是接收方页面
c、根据浏览器的不同，通过iframe.contentDocument || iframe.contentWindow.document来获得接收方页面的内容
d、通过获得的接收方页面的内容来与接收方进行交互
这种方法有个缺点，就是当一个域被攻击时，另一个域会有安全漏洞出现。

58.如何使用storage 对js文件进行缓存

由于sessionStorage - 针对一个 session 的数据存储，所以我们一般利用localStorage储存js文件，只有在第一次访问该页面的时候加载js文件，以后在访问的时候加载本地localStorage执行

59.如何确保ajax或连接不走缓存路径

在Ajax中使用Get请求数据不会有页面缓存的问题，而使用POST请求可是有时候页面会缓存我们提交的信息，导致我们发送的异步请求不能正确的返回我们想要的数据

$.post(url,data ,ranNum:Math.random()} ,function(data){}）

ranNum : 这个是防止缓存的核心，每次发起请求都会用Math.random()方法生成一个随机的数字，这样子就会刷新url缓存

60.split() join()?

前者是切割成数组的形式，
后者是将数组转换成字符串

61.slice()  splice()?

slice() 方法可从已有的数组中返回选定的元素。
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

62.typeof？typeof [ ]返回数据类型是？

//判断基本数据类型；var a=[];typeof a输出object；//本来判断一个对象类型用typeof是最好的，不过对于Array类型是不适用的，//可以使用 instanceof操作符：       var arrayStr=new Array("1","2","3","4","5");    
       alert(arrayStr instanceof Array); //当然以上在一个简单的页面布局里面是没有问题的，如果是复杂页面情况，//入获取的是frame内部的Array对象，可以用这个函数判断：       function isArray(obj) {      
          return Object.prototype.toString.call(obj) === '[object Array]';       
       }

63.disabled readyonly?

readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，当表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去。

64.同步异步?

1、进程同步：就是在发出一个功能调用时，在没有得到结果之前，该调用就不返回。也就是必须一件一件事做,等前一件做完了才能做下一件事

2、异步的概念和同步相对。当一个异步过程调用发出后，调用者不能立刻得到结果。实际处理这个调用的部件在完成后，通过状态、通知和回调来通知调用者。

65.promise

Promise的构造函数接收一个参数，是函数，并且传入两个参数：resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。

66.函数fn1 函数fn2 函数fn3，如果想在三个函数都执行完成后执行某一个事件应该如何实现?

//1、设置事件监听。//2、回调函数：function fn1(){
       console.log("执行fn1");
       fn2();}function fn2(){
       console.log("执行fn2");
       fn3();}function fn3(){
       console.log("执行fn3");
       mou();}function mou(){
       console.log("执行某个函数");}fn1();

67.JavaScript提供了哪几种“异步模式”？

1、回调函数（callbacks）
2、事件监听
3、Promise对象

68.什么是移动端的300ms延迟？什么是点击穿透？解决方案?

移动端300ms延迟：假定这么一个场景。用户在 浏览器里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还是想要进行双击操作。因此，浏览器 就等待 300 毫秒，以判断用户是否再次点击了屏幕。也就是说，当我们点击页面的时候移动端浏览器并不是立即作出反应，而是会等上一小会儿才会出现点击的效果。

点击穿透：假如页面上有两个元素A和B。B元素在A元素之上。我们在B元素的touchstart事件上注册了一个回调函数，该回调函数的作用是隐藏B元素。我们发现，当我们点击B元素，B元素被隐藏了，随后，A元素触发了click事件。这是因为在移动端浏览器，事件执行的顺序是touchstart > touchend > click。而click事件有300ms的延迟，当touchstart事件把B元素隐藏之后，隔了300ms，浏览器触发了click事件，但是此时B元素不见了，所以该事件被派发到了A元素身上。如果A元素是一个链接，那此时页面就会意外地跳转。

300ms延迟解决方案：
(1) 禁用缩放，在html文档头部加meta标签如下：


(2) 更改默认的视口宽度 （响应式布局，消除了站点上可能存在的双击绽放的请求）


(3) Css touch-action
touch-action:none;在该元素上的操作不会触发用户代理的任何行为，无需进行3000ms延迟判断。

(4) FastClick为解决移动端浏览器300毫秒延迟开发的一个轻量级的库
点击穿透解决方案：
（1）只用touch
（2）只用click
（3）tap后延迟350ms再隐藏mask
（4）pointer-events

69.变量作用域?

//变量作用域：一个变量的作用域是程序源代码中定义这个变量的区域。全局变量拥有全局作用域，//在js代码中任何地方都是有定义的。在函数内声明的变量只在函数体内有定义，它们是局部变量，//作用域是局部性的。函数参数也是局部变量，它们只在函数体内有定义。var a = "";window.b=''”;function(e) {
       var c= "";
       d="";
       e="";}function go() {
       console.info(this);//window       return function() {
               console.info(this); // window               return {
                b:function(){
                       console.info(this); //b的父对象                   }
            }
       }}go()().b();

70.call & apply 两者之间的区别  

call和apply都是改变this指向的方法，区别在于call可以写多个参数，而apply只能写两个参数，第二个参数是一个数组，用于存放要传的参数。

71.call和apply 有什么好处？

用call和apply:实现更好的继承和扩展，更安全。

72.谁是c的构造函数?

function ab() {
         this.say = ""; } ab.constructor = {} ab.name = ''; var c = new ab(); //构造函数默认指向函数本身,ab是一个类,它的构造函数是它本身，//然后ab.constructor={};ab的构造函数就指向{}了，c是ab的实例化对象，c的构造函数就是{}//通过使用new的时候,创建对象发生了那些改变? 当使用new操作时，会马上开辟一个块内存，//创建一个空对象，并将this指向这个对象。接着，执行构造函数ab()，对这个空对象进行构造//（构造函数里有什么属性和方法都一一给这个空白对象装配上去，这就是为何它叫构造函数了）。

73.sass和less有什么区别?

1.編譯環境不一樣Sass的安裝需要Ruby環境，是在服務端處理的，而Less是需要引入less.js來處理Less程式碼輸出css到瀏覽器，也可以在開發環節使用Less，然後編譯成css文件，直接放到專案中。

2.變數符不一相，less是@，而scss是$,而且它們的作用域也不一樣，less是區塊級作用域   

#3.輸出設置，Less沒有輸出設置，sass提供4種輸出選項，nested,compact,compressed和expanded     nested：嵌套縮進的css代碼(默認)    expanded：展開的多行css代碼   compact：簡潔格式的csspressed   compressed   compressed：壓縮後的代碼css程式碼   

4.sass支援條件語句，可以使用if{}else{},for{}循環等等，而less不行   

5.引用外部css文件，sass引用外部文件必須以_開頭，文件名稱如果以下劃線_形狀，sass會認為該文件是一個引用文件，不會將其編譯為css文件。 less引用外部檔案和css中的@import沒什麼差異。   

6.sass和less的工具庫不同。 sass有工具庫Compass, 簡單說，sass和Compass的關係有點像Javascript和jQuery的關係,Compass是sass的工具庫。在它的基礎上，封裝了一系列有用的模組和模板，補充強化了sass的功能。 less有UI元件庫Bootstrap,Bootstrap是web前端開發中比較有名的前端UI元件庫，Bootstrap的樣式檔部分原始碼就是採用less語法寫。

總結：不管是sass，還是less，都可以視為一種基於CSS之上的高級語言，其目的是使得CSS開發更靈活和更強大，sass的功能比less強大,基本可以說是一種真正的程式語言了，less則相對清晰明了,易於上手,對編譯環境要求比較寬鬆。考慮到編譯sass要安裝Ruby,而Ruby官網在國內訪問不了,個人在實際開發中更傾向於選擇less。

74.bootstrap好處？

自適應和響應式佈局，12柵格系統，統一的介面樣式和css樣式有利於團隊開發。編寫靈活、穩定、高品質的 HTML 和 CSS 程式碼的規格。

75.開發時如何對專案進行管理?gulp?

#本人開發時，利用gulp等前端工作流程管理工具管理專案。 gulp是新一代的前端專案建置工具，你可以使用gulp及其外掛程式對你的專案程式碼（less,sass）進行編譯，還可以壓縮你的js和css程式碼，甚至壓縮你的圖片，能夠合併文件，壓縮文件，語法檢查，監聽文件變化，測試，轉換二進制，轉換圖片等一系列功能。 gulp只有少量的API，所以非常容易學習。實現良好的專案管理。

76.壓縮合併目的？ http請求的最佳化方式？

1）Web效能最佳化最佳實務中最重要的一條是減少HTTP請求。而減少HTTP請求的最主要的方式就是，合併並壓縮JavaScript和CSS檔案。

CSS Sprites（CSS精靈）：把全站的圖示都放在一個圖片檔案中，然後用CSS的background-image和background-position屬性定位來顯示其中的一小部分。

合併腳本和樣式表;    圖片地圖：利用image map標籤定義一個客戶端圖像映射，（圖像映射指帶有可點擊區域的圖像）具體看：http:// club.topsage.com/thread-2527479-1-1.html  

圖片js/css等靜態資源放在靜態伺服器或CDN服時，盡量採用不用的域名，這樣能防止cookie不會互相污染，減少每次請求的往返資料。

css替代圖片, 快取一些資料

少用location.reload()：使用location.reload() 會重新整理頁面，重新整理頁面時頁面所有資源(css，js，img等) 會重新請求伺服器。建議使用location.href="當前頁url" 取代location.reload() ，使用location.href 瀏覽器會讀取本機快取資源。

77.ajax請求方式有幾種（8種）？

1）$.get(url,[data],[callback])
2)$.getJSON(url,[data],[callback])
3)$ .post(url,[data],[callback],[type])
4）$.ajax(opiton)
5）$.getScript( url, [callback] )
6)jquery對象.load( url, [data], [callback] )
7）serialize() 與serializeArray()

78.如何copy一個dom元素？

原生Js方法：var p = document.getElementsByTagName('p')[0];
var clone = p.cloneNode();
Jquery方法：$('p').clone() ;
在預設情況下，.clone()方法不會複製匹配的元素或其後代元素中綁定的事件。不過，可以為這個方法傳遞一個布林值參數，將這個參數設為true, 就可以連同事件一起複製，即.clone(true)。

79.陣列的排序方法（sort）？排序？漢字排序？

陣列的排序方法：reverse()和sort()。 reverse()方法會對反轉數組項的順序。
Eg:var values = [0, 1, 5, 10, 15];     values.sort();//0,1,10,15,5
var values = [1, 2, 3, 4, 5];     values.reverse();//5,4,3,2,1

js中的排序（詳情參考：http://www.tuicool.com/articles/IjInMbU）
利用sort排序, 冒泡排序, 快速排序, 插入排序, 希爾排序, 選擇排序
歸併排序

localeCompare() 方法用於字串編碼的排序
localeCompare 方法：傳回一個值，指出在目前的區域設定中兩個字串是否相同。

80.簡述一下你理解的物件導向？

物件導向是基於萬物皆物件這個哲學觀點. 把一個物件抽象成類別,具體上就是把一個物件的靜態特徵和動態特徵抽象成屬性和方法,也就是把一類事物的演算法和資料結構封裝在一個類別之中,程式就是多個物件和互相之間的通訊組成的.

物件導向具有封裝性,繼承性,多態性。

封裝:隱藏了物件內部不需要暴露的細節,使得內部細節的變動跟外界脫離,只依靠介面進行通訊.封裝性降低了程式設計的複雜性. 透過繼承,使得新建一個類別變得容易,一個類別從派生類別那裡獲得其非私有的方法和公用屬性的繁瑣工作交給了編譯器. 而繼承和實現接口和運行時的類型綁定機制所產生的多態,使得不同的類所產生的物件能夠對相同的訊息作出不同的反應,大大提高了程式碼的通用性.

總之,物件導向的特性提高了大型程式的重用性和可維護性.

81.如何建立一個物件？

1. 工廠模式
2. 建構子模式
3.原型模式
4. 混合建構子與原型模式
5. 動態原型模式
6. 寄生建構子模式
7. 穩健建構子模式

程式的設計模式?工廠模式?發佈訂閱?
1）設計模式並不是某種語言的某塊程式碼，設計模式是一種思想，提供給在編碼時候遇到的各種問題是可以採取的解決方案，更傾向於一種邏輯思維，而不是萬能代碼區塊。
設計模式主要分為三種：創建型、結構型、行為型。
創建型模式：單例模式，抽象工廠模式，建造者模式，工廠模式與原型模式。
結構型模式：適配器模式，橋接模式，裝飾者模式，組合模式，外觀模式，享元模式以及代理模式。
行為型模式：範本方法模式，指令模式，迭代器模式，觀察者模式，中介者模式，備忘錄模式，解釋器模式，狀態模式，策略模式，職責鏈模式和訪客模式。

2）與創建型模式類似，工廠模式創建物件（視為工廠裡的產品）是無需指定創建物件的特定類別。
工廠模式定義一個用來建立物件的接口，這個接口由子類別決定實例化哪一個類別。此模式使一個類別的實例化延遲到了子類別。而子類別可以重寫介面方法以便在創建的時候指定自己的物件類型。

3）觀察者模式又叫做發布訂閱模式，它定義了一種一對多的關係，讓多個觀察者對象同時監聽某一個主題對象，這個主題對象的狀態改變時就會通知所有觀察著對象。它是由兩類物件組成，主題和觀察者，主題負責發布事件，同時觀察者透過訂閱這些事件來觀察該主體，發布者和訂閱者是完全解耦的，彼此不知道對方的存在，兩者僅僅共享一個自訂事件的名稱。
( 設計模式實在太高深了，小夥伴門結合網路實例自行學習，我實在是無能為力啊)

82.commonjs?requirejs?AMD|CMD|UMD?

1.CommonJS就是為JS的表現制定規範，NodeJS是這種規範的實現，webpack 也是以CommonJS的形式來書寫。因為js沒有模組的功能，所以CommonJS應運而生。但它不能在瀏覽器中運行。 CommonJS定義的模組分為:{模組引用(require)} {模組定義(exports)} {模組識別(module)}

2.RequireJS 是JavaScript模組載入器。        RequireJS有兩個主要方法(method): define()和require()。這兩個方法基本上擁有相同的定義(declaration) 並且它們都知道如何載入的依賴關係，然後執行一個回呼函數(callback function)。與require()不同的是， define()用來儲存程式碼作為一個已命名的模組。因此define()的回呼函數需要有一個回傳值作為這個模組定義。這些類似被定義的模組叫做AMD (Asynchronous Module Definition，非同步模組定義)。

3.AMD 是 RequireJS 在推廣過程中對模組定義的規範化產出 AMD非同步載入模組。它的模組支援物件 函數 建構器 字串 JSON等各種類型的模組。適用AMD規範適用define方法定義模組。

4.CMD是SeaJS 在推廣過程中對模組定義的規範化產出
AMD與CDM的區別：
（1）對於依賴的模組，AMD 是提前執行(好像現在也可以延遲執行了)，CMD 是延遲執行。
（2）AMD 推崇依賴前置，CMD 推崇依賴就近。
（3）AMD 推崇複用接口，CMD 推崇單用接口。
（4）書寫規範的差異。

5.umd是AMD和CommonJS的糅合。
AMD 瀏覽器第一的原則發展 非同步載入模組。
CommonJS模組以伺服器第一原則發展，選擇同步加載，它的模組無需包裝(unwrapped modules)。這迫使人們又想出另一個更通用的模式UMD ( Universal Module Definition ), 希望解決跨平台的解決方案。 UMD先判斷是否支援Node.js的模組( exports )是否存在，存在則使用Node.js模組模式。

83. js的幾個繼承方式？      

1.使用物件冒充實作繼承   
2.採用call、Apply方法改變函數情境實作繼承 
3.原型鏈方式繼承

#84 . JavaScript原型，原型鏈? 有什麼特色？    

在JavaScript中,一共有兩種類型的值,原始值和物件值.每個物件都有一個內部屬性[[prototype]],我們通常稱之為原型.原型的值可以是一個對象,也可以是null.如果它的值是一個對象,則這個對像也一定有自己的原型.這樣就形成了一條線性的鏈,我們稱之為原型鏈.      

#存取一個物件的原型可以使用ES5中的Object.getPrototypeOf方法,或者ES6中的__proto__屬性.  原型鏈的作用是用來實現繼承,比如我們新建一個數組,數組的方法就是從數組的原型上繼承而來的。

85. eval是做什麼的？

它的功能是把對應的字串解析成JS程式碼並運行；應該避免使用eval，不安全，非常耗性能（2次，一次解析成js語句，一次執行）。

86. null，undefined 的差別？

undefined表示變數宣告但未初始化的值，null表示準備用來保存對象，還沒有真正保存對象的值。從邏輯角度看，null表示一個空物件指標。

87. JSON 的了解？

JSON(JavaScript Object Notation) 是一種輕量級的資料交換格式。它是基於JavaScript的子集。資料格式簡單, 易於讀寫, 佔用頻寬小。

88. js延遲載入的方式有哪些？

defer與async、動態建立DOM方式（使用最多）、隨選非同步載入js

89. ajax 是什麼?            

##非同步javascript和XML，是指一種創建互動式網頁應用的網頁開發技術。透過後台與伺服器進行少量資料交換，AJAX可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某個部分進行更新。

90. 同步與非同步的區別?    

javascript同步表示sync，指：程式碼依序執行    javascript異步表示async，指：程式碼執行不按順序，'跳過'執行，待其他某些程式碼執行完後再來執行，成為非同步。

91. 如何解決跨網域問題?

Jsonp、iframe、window.name、window.postMessage、伺服器上設定代理頁面

#92. 非同步載入的方式有哪些？

(1) defer，只支援IE
(2) async：true
(3) 建立script，插入到DOM中，載入完畢後callBack

93. jQuery與jQuery UI 有啥差別？

jQuery是js函式庫，主要提供的功能是選擇器，屬性修改和事件綁定等等。
jQuery UI則是在jQuery的基礎上，利用jQuery的擴展性，設計的插件。提供了一些常用的介面元素，諸如對話框、拖曳行為、改變大小行為等等。

94. 你有哪些效能最佳化的方法？

(1) 減少http請求次數：CSS Sprites, JS、CSS原始碼壓縮、圖片大小控制合適；網頁Gzip，   CDN託管，data快取 ，圖片伺服器。

(2) 前端模板JS 數據，減少由於HTML標籤導致的頻寬浪費，前端用變量保存AJAX請求結果，每次操作本地變量，不用請求，減少請求次數 

#( 3) 用innerHTML取代DOM操作，減少DOM操作次數，優化javascript效能。

(4) 當需要設定的樣式很多時設定className而不是直接操作style。

(5) 少用全域變數、快取DOM節點查找的結果。減少IO讀取操作。

(6) 避免使用CSS Expression（css表達式)又稱為Dynamic properties(動態屬性)。

(7) 圖片預先加載，將樣式表放在頂部，將腳本放在底部  加上時間戳記。

(8) 避免在頁面的主體佈局中使用table，table要等其中的內容完全下載之後才會顯示出來，顯示比p css佈局慢。

95. 一個頁面從輸入 URL 到頁面載入顯示完成，這個過程中都發生了什麼事？ （流程說的越詳細越好）

查找瀏覽器快取
DNS解析、尋找該網域對應的IP位址、重定向（301）、發出第二個GET請求
進行HTTP協定會話
客戶端傳送標頭(請求標頭)
伺服器回饋標頭(回應標頭)
html文件開始下載
文件樹建立，根據標記請求所需指定MIME類型的文件
檔案顯示

瀏覽器這邊做的工作大致分為以下幾步：
載入：根據請求的URL進行網域解析，向伺服器發起請求，接收檔案（HTML、JS、 CSS、圖像等）。
解析：將載入到的資源（HTML、JS、CSS等）進行語法解析，建議對應的內部資料結構（例如HTML的DOM樹，JS的（物件）屬性表，CSS的樣式規則等等）

96. ajax的缺點

1、ajax不支援瀏覽器back按鈕。
2、安全性問題 AJAX揭露了與伺服器互動的細節。
3、對搜尋引擎的支援比較弱。
4、破壞了程式的異常機制。
5、不容易調試

推薦教學：《JS教學》

以上是96個前端JS部分基礎面試題（含答案）的詳細內容。更多資訊請關注PHP中文網其他相關文章！