四、JavaScript · 前端面試題目搜集

**4.1、請解釋一下什么是閉包** 閉包是一種特殊的對象。它由兩部分構成：函數，以及創建該函數的環境。可以把閉包簡單理解成 "定義在一個函數內部的函數"，閉包就是將函數內部和函數外部連接起來的一座橋梁。閉包有如下特性： a. JavaScript允許你使用在當前函數以外定義的變量 b. 即使外部函數已經返回，當前函數仍然可以引用在外部函數所定義的變量 c. 閉包可以更新外部變量的值 d. 用閉包模擬私有方法由于閉包會使得函數中的變量都被保存在內存中，內存消耗很大，所以不能濫用閉包，否則會造成網頁的性能問題 **4.2、call 和 apply 的區別是什么？** call 和 apply 就是為了改變函數體內部 this 的指向。區別是從第二個參數起，call 需要把參數按順序傳遞進去，而 apply 則是把參數放在數組里。當參數明確時用call與apply都行, 當參數不明確時可用apply給合arguments **4.3、如何使用原生 Javascript 代碼深度克隆一個對象（注意區分對象類型）** 在網上找了個函數，用遞歸的方式做復制。傳入的參數必須得是Array或Object。并且用到了[JSON.stringify](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify)和[JSON.parse](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse)。[查看在線代碼](http://codepen.io/strick/pen/rORKWp)。參考《[JavaScript中的對象克隆](http://myweb.jowai.info/javascript-clone-and-copy-and-whatever/)》 **4.4、?jQuery中 $(′.class′)和$('div.class') 哪個效率更高？** jQuery內部使用Sizzle引擎，處理各種選擇器。Sizzle引擎的選擇順序是從右到左，所以這條語句是先選.class，第二個會直接過濾出div標簽，而第一個就不會過濾了，將所有相關標簽都列出。參考《[jQuery最佳實踐](http://www.ruanyifeng.com/blog/2011/08/jquery_best_practices.html)》 **4.5、實現輸出document對象中所有成員的名稱和類型** 用一個for?in方式循環document，然后在將內容console出來，就是看到篇文章還會判斷document.hasOwnProperty，然后再做打印，我測試了下這樣的話打印不出來。 [查看在線代碼](http://codepen.io/strick/pen/WQWExL)。參考《[JavaScript要點歸檔：DOM](http://myweb.jowai.info/javascript-main-points-archive-dom/)》 **4.6、獲得一個DOM元素的絕對位置** [offsetTop](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetTop)：返回當前元素相對于其 [offsetParent](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetParent) 元素的頂部的距離 [offsetLeft](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetLeft)：返回當前元素相對于其 [offsetParent](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetParent) 元素的左邊的距離 [getBoundingClientRect()](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect)：返回值是一個[DOMRect](https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMClientRect)對象，它包含了一組用于描述邊框的只讀屬性——left、top、right和bottom，屬性單位為像素參考《[JavaScript中尺寸、坐標](http://www.cnblogs.com/strick/p/4826273.html)》，[查看在線代碼](http://codepen.io/strick/pen/XmQaaX)。 **4.7、如何利用JS生成一個table？** 首先是用[createElement](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createElement)創建一個table，再用[setAttribute](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/setAttribute)設置table的屬性，然后用for循環設置tr和td的內容，用[appendChild](https://developer.mozilla.org/zh-CN/docs/Web/API/Node/appendChild)拼接內容，設置td的時候還用到[innerHTML](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/innerHTML)和[style](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference).padding。 [查看在線代碼](http://codepen.io/strick/pen/wKZqpR)。參考《[JavaScript要點歸檔：DOM表格](http://myweb.jowai.info/javascript-main-points-archive-dom-table/)》《[JavaScript要點歸檔：DOM](http://myweb.jowai.info/javascript-main-points-archive-dom/)》 **4.8、實現預加載一張圖片，加載完成后顯示在網頁中并設定其高度為50px，寬度為50px** 先new?[Image](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLImageElement/Image)()獲取一個圖片對象，然后在圖片對象的onload中設置寬度和高度。[查看在線代碼](http://codepen.io/strick/pen/vNMJVr)。 **4.9、假設有一個4行tr的table，將table里面tr順序顛倒** 先是通過table.tBodies[0].rows獲取到當前tbody中的行，接下來是兩種方法處理。獲取到的行沒有[reverse](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse)這個方法。第一種是將這些行push到另外一個數組中第二種是用Array.prototype.[slice](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/slice).call()將那些行變成數組，接著用reverse倒敘，table再appendChild。[查看在線代碼](http://codepen.io/strick/pen/VvNzqX)。這里我有個疑問，就是在appendChild的時候，并不是在最后把列加上，而是做了替換操作？ **4.10、模擬一個HashTable類，一個類上注冊四個方法：包含有add、remove、contains、length方法** 先是在構造函數中定義一個數組，然后用push模擬add，splice模擬remove。四個方法都放在了[prototype](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype)上面。[查看在線代碼](http://codepen.io/strick/pen/VvNBom)。 **4.11、Ajax讀取一個XML文檔并進行解析的實例** a. 初始化一個HTTP請求，IE以ActiveX對象引入。后來標準瀏覽器提供了XMLHttpRequest類，它支持ActiveX對象所提供的方法和屬性 b. 發送請求，可以調用HTTP請求類的open()和send()方法 c. 處理服務器的響應，通過http_request.onreadystatechange = nameOfTheFunction。來指定函數參考《[AJAX](https://developer.mozilla.org/zh-CN/docs/AJAX)》《[開始AJAX](https://developer.mozilla.org/zh-CN/docs/AJAX/Getting_Started)》，[查看在線代碼](http://codepen.io/strick/pen/yYrxLw)。 **4.12、JS如何實現面向對象和繼承機制？** **創建對象方法：** a. 利用json創建對象 b. 使用JavaScript中的Object類型 c. 通過創建函數來生成對象 **繼承機制：** a. 構造函數綁定，使用call或apply方法，將父對象的構造函數綁定在子對象上 b. prototype模式，繼承new函數的模式 c. 直接繼承函數的prototype屬性，對b的一種改進 d. 利用空對象作為中介 e. 在ECMAScript5中定義了一個新方法[Object.create()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create)，用于創建一個新方法 f. 拷貝繼承，把父對象的所有屬性和方法，拷貝進子對象，實現繼承。參考《[JavaScript中的對象克隆](http://myweb.jowai.info/javascript-clone-and-copy-and-whatever/)》參考《[Javascript繼承機制的設計思想](http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html)》《[構造函數的繼承](http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html)》，[查看在線代碼](http://codepen.io/strick/pen/xweaZZ)。 **4.13、JS模塊的封裝方法，比如怎樣實現私有變量，不能直接賦值，只能通過公有方法** a. 通過json生成對象的原始模式，多寫幾個就會非常麻煩，也不能反映出它們是同一個原型對象的實例 b. 原始模式的改進，可以寫一個函數，解決代碼重復的問題。同樣不能反映出它們是同一個原型對象的實例 c. 構造函數模式，就是一個普通函數，不過內部使用了[this](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this)變量，但是存在一個浪費內存的問題。 d. Prototype模式，每一個構造函數都有一個prototype屬性，指向另一個對象。這個對象的所有屬性和方法，都會被構造函數的實例繼承，可以把那些不變的屬性和方法，直接定義在prototype對象上。Prototype模式的驗證方法：[isPrototypeOf()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf)、[hasOwnProperty()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty)和[in](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/in)運算符。參考《[封裝](http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html)》，[查看在線代碼](http://codepen.io/strick/pen/dYLqOW)。 **4.14、對this指針的理解，可以列舉幾種使用情況？** [this](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this)指的是：調用函數的那個對象。 a. 純粹的函數調用，屬于全局性調用，因此this就代表全局對象Global。 b. 作為對象方法的調用，這時this就指這個上級對象。 c. 作為構造函數調用，就是通過這個函數new一個新對象（object）。這時，this就指這個新對象。 d. [apply](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply)與[call](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call)的調用，它們的作用是改變函數的調用對象，它的第一個參數就表示改變后的調用這個函數的對象。參考《[Javascript的this用法](http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html)》，[查看在線代碼](http://codepen.io/strick/pen/qOwwwP)。 **4.15、在JavaScript中，常用的綁定事件的方法有哪些？** a. 在DOM元素中直接綁定，DOM元素，可以理解為HTML標簽，`onXXX="JavaScript Code"`，[查看事件列表](http://www.w3school.com.cn/jsref/jsref_events.asp)。 b. 在JavaScript代碼中綁定，`elementObject.onXXX=function(){}`，通稱為DOM0事件系統。 c. 綁定事件監聽函數，標準瀏覽器使用 [addEventListener()](https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener) ，IE11以下版本[attachEvent()](https://msdn.microsoft.com/en-us/library/ms536343$VS.85$.aspx) 來綁定事件監聽函數，通稱為DOM2事件系統。參考《[JavaScript綁定事件的方法](http://www.itxueyuan.org/view/6338.html)》 **4.16、解釋下javascript的冒泡和捕獲** ~~~ <div id="click1"> <div id="click2"> <div id="click3">事件</div> </div> </div> ~~~ a. Netscape主張元素1的事件首先發生，這種事件發生順序被稱為捕獲型 b. 微軟則保持元素3具有優先權，這種事件順序被稱為冒泡型 c. W3C選擇了一個擇中的方案。任何發生在w3c事件模型中的事件，首是進入捕獲階段，直到達到目標元素，再進入冒泡階段事件監聽函數[addEventListener()](https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener)的第三個參數就是控制方法是捕獲還是冒泡參考《[事件](http://myweb.jowai.info/javascript-main-points-archive-events/)》、《[javascript的冒泡和捕獲](http://www.cnblogs.com/hh54188/archive/2012/02/08/2343357.html)》，[查看在線代碼](http://codepen.io/strick/pen/QjPRdj)。 **4.17、jQuery的特點** a. 一款輕量級的js庫 b. 豐富快速的DOM選擇器 c. 鏈式表達式 d. 事件、樣式、動畫等特效支持 e. Ajax操作封裝，支持跨域 f. 跨瀏覽器兼容 g. 插件擴展開發參考《[JQuery特點、優缺點及其常用操作](http://www.cnblogs.com/sanmaospace/archive/2013/06/15/3137905.html)》 **4.18、Ajax有哪些好處和弊端？** **優點：** a. 無刷新更新數據 b. 異步與服務器通信 c. 前端和后端負載平衡 d. 基于標準被廣泛支持 e. 界面與應用分離 **缺點：** a. AJAX干掉了Back和History功能，即對瀏覽器機制的破壞 b. AJAX的安全問題 c. 對搜索引擎支持較弱 d. 違背URL和資源定位的初衷參考《[AJAX工作原理及其優缺點](http://www.cnblogs.com/sanmaospace/archive/2013/06/15/3137180.html)》 **4.19、null和undefined的區別？** **null：** a. null是一個表示"無"的對象，轉為數值時為0 b. null表示"沒有對象"，即該處不應該有值。 **undefined：** a. undefined是一個表示"無"的原始值，轉為數值時為NaN。 b. undefined表示"缺少值"，就是此處應該有一個值，但是還沒有定義。參考《[undefined與null的區別](http://www.ruanyifeng.com/blog/2014/03/undefined-vs-null.html)》 **4.20、new操作符具體干了什么呢?** a. 一個新對象被創建。它繼承自函數原型 b. 構造函數被執行。執行的時候，相應的傳參會被傳入 c. 上下文(this)會被指定為這個新實例 d. 如果構造函數返回了一個“對象”，那么這個對象會取代整個new出來的結果參考《[new運算符](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/new)》 **4.21、js延遲加載的方式有哪些？** a. 將script節點放置在最后之前 b. 使用script標簽的defer和async屬性，defer屬性為延遲加載，是在頁面渲染完成之后再進行加載的，而async屬性則是和文檔并行加載 c. 通過監聽onload事件，動態添加script節點 d. 通過ajax下載js腳本，動態添加script節點參考《[javascript延遲加載方式](http://blog.csdn.net/newborn2012/article/details/17057759)》 **4.22、如何解決跨域問題?** a. [JSONP](http://segmentfault.com/a/1190000000718840)（JSON with Padding），填充式JSON b. [iframe](http://www.cnblogs.com/strick/p/3814872.html)跨域 c. HTML5的window.[postMessage](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage)方法跨域 d. 通過設置[img](http://www.zhangsichu.com/blogview.asp?Content_Id=102)的src屬性，進行跨域請求 e. 跨域資源共享（[CORS](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS)），服務器設置Access-Control-Allow-OriginHTTP響應頭之后，瀏覽器將會允許跨域請求 **4.23、documen.write和 innerHTML的區別** **write：** a. 改變 HTML 輸出流 b. 當在文檔加載之后使用 `document.write()`，這會覆蓋該文檔。例如onload事件中 c. 輸入css的style標簽能改變樣式，例如`document.write("*b{color:red;font-weight:bold;}*");` **innerHTML：** a. 改變 HTML 內容 b. 輸入css的style標簽不能改變樣式參考《[JavaScript HTML DOM - 改變 HTML](http://www.w3school.com.cn/js/js_htmldom_html.asp)》 **4.24、哪些操作會造成內存泄漏？** a. 當頁面中元素被移除或替換時，若元素綁定的事件仍沒被移除，在IE中不會作出恰當處理，此時要先手工移除事件，不然會存在內存泄露。 b. 在IE中，如果循環引用中的任何對象是 DOM 節點或者 ActiveX 對象，垃圾收集系統則不會處理。 c. 閉包可以維持函數內局部變量，使其得不到釋放。 d. 在銷毀對象的時候，要遍歷屬性中屬性，依次刪除，否則會泄漏。參考《[js內存泄漏的幾種情況](http://www.cnblogs.com/sprying/archive/2013/05/31/3109517.html)》、《[JavaScript內存分析](https://github.com/CN-Chrome-DevTools/CN-Chrome-DevTools/blob/master/md/Performance-Profiling/javascript-memory-profiling.md)》 **4.25、JavaScript中的變量聲明提升？** 函數聲明和變量聲明總是被JavaScript解釋器隱式地提升到包含他們的作用域的最頂端。函數表達式中只會提升名稱，函數體只有在執行到賦值語句時才會被賦值。 ~~~ function foo() { bar(); var x = 1; } function foo() {//等同于 var x; bar(); x = 1; } function test() { foo(); // TypeError "foo is not a function" bar(); // "this will run!" var foo = function () { }// 函數表達式被賦值給變量'foo' function bar() { }// 名為'bar'的函數聲明 } ~~~ **4.26、如何判斷當前腳本運行在瀏覽器還是node環境中？** 通過判斷[Global](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects)對象是否為window，如果是window，當前腳本運行在瀏覽器中 **4.27、什么是 "use strict"** ECMAscript 5添加了第二種運行模式："嚴格模式"（strict mode）設立"嚴格模式"的目的，主要有以下幾個： a. 消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為; b. 消除代碼運行的一些不安全之處，保證代碼運行的安全； c. 提高編譯器效率，增加運行速度； d. 為未來新版本的Javascript做好鋪墊。注：經過測試IE6,7,8,9均不支持嚴格模式參考《[Javascript 嚴格模式詳解](http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode.html)》 **4.28、eval是做什么的？** [eval()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/eval)函數可計算某個字符串，并執行其中的的 JavaScript 代碼。 eval()是一個頂級函數并且跟任何對象無關。如果字符串表示了一個表達式，eval()會對表達式求值。如果參數表示了一個或多個JavaScript聲明，那么eval()會執行聲明。 **4.29、JavaScript原型，原型鏈 ?** **原型：** a. 原型是一個對象，其他對象可以通過它實現屬性繼承。 b. 一個對象的真正原型是被對象內部的[[Prototype]]屬性(property)所持有。瀏覽器支持非標準的訪問器__proto__。 c. 在javascript中，一個對象就是任何無序鍵值對的集合，如果它不是一個主數據類型(undefined，null，boolean，number，string)，那它就是一個對象。 **原型鏈：** a. 因為每個對象和原型都有一個原型(注:原型也是一個對象)，對象的原型指向對象的父，而父的原型又指向父的父，我們把這種通過原型層層連接起來的關系撐為原型鏈。 b. 這條鏈的末端一般總是默認的對象原型。 ~~~ a.__proto__ = b; b.__proto__ = c; c.__proto__ = {}; //default object {}.__proto__.__proto__; //null ~~~ 參考《[理解JavaScript原型](http://blog.jobbole.com/9648/)》 **4.30、畫出此對象的內存圖** [查看在線代碼](http://codepen.io/strick/pen/MaMbew)。 **4.31、JQuery與jQuery UI 有啥區別？** jQuery是一個js庫，主要提供的功能是選擇器，屬性修改和事件綁定等等。 jQuery UI則是在jQuery的基礎上，利用jQuery的擴展性，設計的插件。提供了一些常用的界面元素，諸如對話框、拖動行為、改變大小行為等等 **4.32、jQuery的源碼看過嗎？能不能簡單說一下它的實現原理？** jQuery給我們帶來了一個簡潔方便的編碼模型(1>創建jQuery對象;2>直接使用jQuery對象的屬性/方法/事件), 一個強悍的dom元素查找器($)，插件式編程接口(jQuery.fn)，以及插件初始化的”配置”對象思想參考《[jQuery工作原理解析以及源代碼示例](http://ccvita.com/121.html)》 **4.33、jQuery 中如何將數組轉化為json字符串** 在jQuery1.8.3中有個方法“parseJSON”，在這個方法中會做從string轉換為json。如果當前瀏覽器支持window.[JSON](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON)，那就直接調用這個對象中的方法。如果沒有就使用( new Function( "return " + data ) )();執行代碼返回。 [eval和new Function是有區別的](http://www.cnblogs.com/shine-li/articles/2772737.html)。 **4.34、請寫出console.log中的內容** ~~~ var msg = 'hello';//頂級作用域window下有個變量msg function great(name, attr) { var name = 'david'; var greating = msg + name + '!'; var msg = '你好'; for (var i = 0; i < 10; i++) { var next = msg + '你的id是' + i * 2 + i; } console.log(arguments[0]); console.log(arguments[1]); console.log(greating); console.log(next); } great('Tom') ~~~ [查看在線代碼](http://codepen.io/strick/pen/zvVZZg)。 a. arguments[0]被覆蓋了 b. msg出現了聲明提升，可以查看4.25的例子 c. next中出現了隱式的類型轉換 **4.35、請說明下下面代碼的執行過程** ~~~ var t=true; window.setTimeout(function(){ t=false; },1000); while(t){ console.log(1); } alert('end'); ~~~ [查看在線代碼](http://codepen.io/strick/pen/meZWBw)。 a. JavaScript引擎是單線程運行的，瀏覽器無論在什么時候都只且只有一個線程在運行JavaScript程序 b. setTimeout是異步線程，需要等待js引擎處理完同步代碼（while語句）之后才會執行，while語句直接是個死循環，js引擎沒有空閑，不會執行下面的alert，也不會插入setTimeout。我在chrome中執行在線代碼，最后瀏覽器是終止死循環執行alert。 c. JavaScript的工作機制是：當線程中沒有執行任何同步代碼的前提下才會執行異步代碼，setTimeout是異步代碼，所以setTimeout只能等js空閑才會執行，但死循環是永遠不會空閑的，所以setTimeout也永遠不會執行。 **4.36、輸出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，則輸出2014-09-26** 參考《[JavaScript Date 對象](http://www.w3school.com.cn/jsref/jsref_obj_date.asp)》 **4.37、Javascript中callee和caller的作用？** arguments.[callee](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments/callee)屬性包含當前正在執行的函數。 Function.[caller](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/caller)返回一個對函數的引用，該函數調用了當前函數。