前端面試之Js篇

前端面試之Js篇
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

1 . 請解釋事件代理 (event delegation)


2 . 談談瀏覽器的事件冒泡機制

推薦

(function(){}());

在javascript裡,括號內部不能包含語句,當解析器對程式碼進行解釋的時候,先碰到了(),然後碰到function關鍵字就會自動將()裡面的程式碼識別為函式表示式而不是函式宣告。

知識拓展:

function(){ /* code */ }();  解釋下該程式碼能正確執行嗎?

不行,在javascript程式碼解釋時,當遇到function關鍵字時,會預設把它當做是一個函式宣告,而不是函式表示式,如果沒有把它顯視地表達成函式表示式,就報錯了,因為函式宣告需要一個函式名,而上面的程式碼中函式沒有函式名。(以上程式碼,也正是在執行到第一個左括號(時報錯,因為(前理論上是應該有個函式名的。)

function foo(){ /* code */ }();  解釋下該程式碼能正確執行嗎?

在一個表示式後面加上括號,表示該表示式立即執行;而如果是在一個語句後面加上括號,該括號完全和之前的語句無法匹配,而只是一個分組操作符,用來控制運算中的優先順序(小括號裡的先運算)相當於先宣告瞭一個叫foo的函式,之後進行()內的表示式運算,但是()(分組操作符)內的表示式不能為空,所以報錯。(以上程式碼,也就是執行到右括號時,發現表示式為空,所以報錯)。


6 . .call 和 .apply 的區別是什麼?

call, apply方法區別是,從第二個引數起, call方法引數將依次傳遞給借用的方法作引數, 而apply直接將這些引數放到一個陣列中再傳遞, 最後借用方法的引數列表是一樣的.


7 . 請解釋 Function.prototype.bind?

用法:

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) 的原理。

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_03…

http://blog.vjeux.com/2011/ja…


9 . 請儘可能詳盡的解釋 AJAX 的工作原理

Ajax 的原理簡單來說通過 XmlHttpRequest 物件來向伺服器發非同步請求,從伺服器獲得資料,然後用 JavaScript來操作 DOM 而更新頁面。 這其中最關鍵的一步就是從伺服器獲得請求資料。

不使用ajax工作原理

使用ajax工作原理


10 . javascript中"attribute" 和 "property" 的區別是什麼?

property 和 attribute非常容易混淆,兩個單詞的中文翻譯也都非常相近(property:屬性,attribute:特性),但實際上,二者是不同的東西,屬於不同的範疇。每一個DOM物件都會有它預設的基本屬性,而在建立的時候,它只會建立這些基本屬性,我們在TAG標籤中自定義的屬性是不會直接放到DOM中的。

property是DOM中的屬性,是JavaScript裡的物件;

attribute是HTML標籤上的特性,它的值只能夠是字串;

DOM有其預設的基本屬性,而這些屬性就是所謂的“property”,無論如何,它們都會在初始化的時候再DOM物件上建立。

如果在TAG對這些屬性進行賦值,那麼這些值就會作為初始值賦給DOM的同名property。


相關文章

前端開發 最新文章