2017前端面試題之Js篇(1)
1 . 請解釋事件代理 (event delegation)
當需要對很多元素添加事件的時,可以通過將事件添加到它們的父節點通過委托來觸發處理函數。其中利用到了瀏覽器的事件冒泡機制。
var delegate = function(client, clientMethod) { return function() { return clientMethod.apply(client, arguments); } } var agentMethod = delegate (client, clientMethod); agentMethod(); // 獲取父節點,並為它添加一個click事件 document.getElementById("parent-list").addEventListener("click",function(e) { // 檢查事件源e.targe是否為Li if(e.target && e.target.nodeName.toUpperCase == "LI") { // 真正的處理過程在這裏 console.log("List item ",e.target.id.replace("post-")," was clicked!"); } });
2 . 談談瀏覽器的事件冒泡機制
對於事件的捕獲和處理,不同的瀏覽器廠商有不同的處理機制,我們以W3C對DOM2.0定義的標準事件為例
DOM2.0模型將事件處理流程分為三個階段:一、事件捕獲階段,二、事件目標階段,三、事件起泡階段。
-
事件捕獲:當某個元素觸發某個事件(如onclick),頂層對象document就會發出一個事件流,隨著DOM樹的節點向目標元素節點流去,直到到達事件真正發生的目標元素。在這個過程中,事件相應的監聽函數是不會被觸發的。
-
事件目標:當到達目標元素之後,執行目標元素該事件相應的處理函數。如果沒有綁定監聽函數,那就不執行。
-
事件起泡:從目標元素開始,往頂層元素傳播。途中如果有節點綁定了相應的事件處理函數,這些函數都會被一次觸發。如果想阻止事件起泡,可以使用e.stopPropagation()(Firefox)或者e.cancelBubble=true(IE)來組織事件的冒泡傳播。
3 . JavaScript 中 this 是如何工作的。
- 作為函數調用,this 綁定全局對象,瀏覽器環境全局對象為 window 。
- 內部函數的 this 也綁定全局對象,應該綁定到其外層函數對應的對象上,這是 JavaScript的缺陷,用that替換。
- 作為構造函數使用,this 綁定到新創建的對象。
- 作為對象方法使用,this 綁定到該對象。
- 使用apply或call調用 this 將會被顯式設置為函數調用的第一個參數。
4 . 談談CommonJs 、AMD 和CMD
CommonJS規範,一個單獨的文件就是一個模塊。每一個模塊都是一個單獨的作用域 CommonJS的使用代表:NodeJS
AMD 即Asynchronous Module Definition 異步模塊定義 它是一個在瀏覽器端模塊化開發的規範 AMD 是 RequireJS 在推廣過程中對模塊定義的規範化的產出
CMD 即Common Module Definition 通用模塊定義 其代表為SeaJS
requireJS主要解決兩個問題
- 多個js文件可能有依賴關系,被依賴的文件需要早於依賴它的文件加載到瀏覽器
- js加載的時候瀏覽器會停止頁面渲染,加載文件越多,頁面失去響應時間越長
CMD和AMD的區別
- AMD推崇依賴前置,在定義模塊的時候就要聲明其依賴的模塊
- CMD推崇就近依賴,只有在用到某個模塊的時候再去require
5 . 談談對IIFE的理解
IIFE即Immediately-Invoked Function Expression 立即執行函數表達式
不推薦
(function(){})();
推薦
(function(){}());
在javascript裏,括號內部不能包含語句,當解析器對代碼進行解釋的時候,先碰到了(),然後碰到function關鍵字就會自動將()裏面的代碼識別為函數表達式而不是函數聲明。
知識拓展:
function(){ /* code */ }(); 解釋下該代碼能正確執行嗎?
不行,在javascript代碼解釋時,當遇到function關鍵字時,會默認把它當做是一個函數聲明,而不是函數表達式,如果沒有把它顯視地表達成函數表達式,就報錯了,因為函數聲明需要一個函數名,而上面的代碼中函數沒有函數名。(以上代碼,也正是在執行到第一個左括號(時報錯,因為(前理論上是應該有個函數名的。)
function foo(){ /* code */ }(); 解釋下該代碼能正確執行嗎?
在一個表達式後面加上括號,表示該表達式立即執行;而如果是在一個語句後面加上括號,該括號完全和之前的語句無法匹配,而只是一個分組操作符,用來控制運算中的優先級(小括號裏的先運算)相當於先聲明了一個叫foo的函數,之後進行()內的表達式運算,但是()(分組操作符)內的表達式不能為空,所以報錯。(以上代碼,也就是執行到右括號時,發現表達式為空,所以報錯)。
6 . .call 和 .apply 的區別是什麽?
foo.call(this, arg1,arg2,arg3) == foo.apply(this, arguments)==this.foo(arg1, arg2, arg3)
call, apply方法區別是,從第二個參數起, call方法參數將依次傳遞給借用的方法作參數, 而apply直接將這些參數放到一個數組中再傳遞, 最後借用方法的參數列表是一樣的.
7 . 請解釋 Function.prototype.bind?
bind() 方法的主要作用就是將函數綁定至某個對象,bind() 方法會創建一個函數,函數體內this對象的值會被綁定到傳入bind() 函數的值。
原理
Function.prototype.bind = function(context) {
var self = this; // 保存原函數
return function() { // 返回一個新函數
return self.apply(context, arguments); // 執行新函數時,將傳入的上下文context作為新函數的this
}
}
用法:
var paint = {
color: "red",
count: 0,
updateCount: function() {
this.count++;
console.log(this.count);
}
};
// 事件處理函數綁定的錯誤方法:
document.querySelector(‘button‘)
.addEventListener(‘click‘, paint.updateCount); // paint.updateCount函數的this指向變成了該DOM對象
// 事件處理函數綁定的正確方法:
document.querySelector(‘button‘)
.addEventListener(‘click‘, paint.updateCount.bind(paint)); // paint.updateCount函數的this指向變成了paint
8 . 請解釋原型繼承 (prototypal inheritance) 的原理。
當查找一個對象的屬性時,JavaScript 會向上遍歷原型鏈,直到找到給定名稱的屬性為止。——出自JavaScript秘密花園
JavaScript中的每個對象,都有一個內置的 proto 屬性。這個屬性是編程不可見的(雖然ES6標準中開放了這個屬性,然而瀏覽器對這個屬性的可見性的支持不同),它實際上是對另一個對象或者 null 的引用。
當一個對象需要引用一個屬性時,JavaScript引擎首先會從這個對象自身的屬性表中尋找這個屬性標識,如果找到則進行相應讀寫操作,若沒有在自身的屬性表中找到,則在 proto 屬性引用的對象的屬性表中查找,如此往復,直到找到這個屬性或者 proto 屬性指向 null 為止。
以下代碼展示了JS引擎如何查找屬性:
//__proto__ 是一個不應在你代碼中出現的非正規的用法,這裏僅僅用它來解釋JavaScript原型繼承的工作原理。
function getProperty(obj, prop) {
if (obj.hasOwnProperty(prop))
return obj[prop]
else if (obj.__proto__ !== null)
return getProperty(obj.__proto__, prop)
else
return undefined
}
JS的ECMA規範只允許我們采用 new 運算符來進行原型繼承
原型繼承
function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype = {
print: function () { console.log(this.x, this.y); }
};
var p = new Point(10, 20);
p.print(); // 10 20
順便闡述下new 運算符是如何工作的?
- 創建類的實例。這步是把一個空的對象的 proto 屬性設置為 F.prototype 。
- 初始化實例。函數 F 被傳入參數並調用,關鍵字 this 被設定為該實例。
- 返回實例。
function New (f) {
var n = { ‘__proto__‘: f.prototype }; /*第一步*/
return function () {
f.apply(n, arguments); /*第二步*/
return n; /*第三步*/
};
}
JavaScript中真正的原型繼承
Object.create = function (parent) {
function F() {}
F.prototype = parent;
return new F();
};
使用真正的原型繼承(如 Object.create 以及 proto)還是存在以下缺點:
- 標準性差:proto 不是一個標準用法,甚至是一個不贊成使用的用法。同時原生態的 Object.create 和道爺寫的原版也不盡相同。
- 優化性差: 不論是原生的還是自定義的 Object.create ,其性能都遠沒有 new 的優化程度高,前者要比後者慢高達10倍。
ES6 內部實現類和類的繼承
class Parent {
constructor(name) { //構造函數
this.name = name;
}
say() {
console.log("Hello, " + this.name + "!");
}
}
class Children extends Parent {
constructor(name) { //構造函數
super(name); //調用父類構造函數
// ...
}
say() {
console.log("Hello, " + this.name + "! hoo~~");
}
}
參考:
- http://blog.csdn.net/xujie_0311/article/details/44466573
- http://blog.vjeux.com/2011/javascript/how-prototypal-inheritance-really-works.html
9 . 請盡可能詳盡的解釋 AJAX 的工作原理
Ajax 的原理簡單來說通過 XmlHttpRequest 對象來向服務器發異步請求,從服務器獲得數據,然後用 JavaScript來操作 DOM 而更新頁面。 這其中最關鍵的一步就是從服務器獲得請求數據。
不使用ajax工作原理
不使用ajax瀏覽網頁的原理
使用ajax工作原理
使用ajax網頁的原理
10 . javascript中"attribute" 和 "property" 的區別是什麽?
property 和 attribute非常容易混淆,兩個單詞的中文翻譯也都非常相近(property:屬性,attribute:特性),但實際上,二者是不同的東西,屬於不同的範疇。每一個DOM對象都會有它默認的基本屬性,而在創建的時候,它只會創建這些基本屬性,我們在TAG標簽中自定義的屬性是不會直接放到DOM中的。
- property是DOM中的屬性,是JavaScript裏的對象;
- attribute是HTML標簽上的特性,它的值只能夠是字符串;
- DOM有其默認的基本屬性,而這些屬性就是所謂的“property”,無論如何,它們都會在初始化的時候再DOM對象上創建。
- 如果在TAG對這些屬性進行賦值,那麽這些值就會作為初始值賦給DOM的同名property。
作者:歲寒3友
鏈接:http://www.jianshu.com/p/8e505fe77762
來源:簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請註明出處。
2017前端面試題之Js篇(1)