這次帶給大家JS概念問題總結答疑，使用JS概念問題的注意事項有哪些，下面就是實戰案例，一起來看一下。
Q：描述 JavaScript 中的繼承和原型鏈，並舉例。
JavaScript 是基於原型的物件導向語言，並沒有傳統的基於類別的繼承系統。
在 JS 中，每個物件都會在內部引用一個叫做prototype的對象，而這個原型物件本身也會引用自己的原型對象，並以此類推。這樣就形成了一條原型引用鏈，這個鏈的末端是一個以 null 為原型的物件。 JS 就是透過原型鏈的方式來實現繼承的，當一個物件引用了不屬於自己的屬性時，將遍歷原型鏈，直到找到引用的屬性為止（或直接找到鏈的末尾，這種情況說明該屬性未定義）。
一個簡單的範例：
function Animal() { this.eatsVeggies = true; this.eatsMeat = false; }function Herbivore() {}
Herbivore.prototype = new Animal();function Carnivore() { this.eatsMeat = true; }
Carnivore.prototype = new Animal();var rabbit = new Herbivore();var bear = new Carnivore();console.log(rabbit.eatsMeat); // logs "false"console.log(bear.eatsMeat); // logs "true"登入後複製
Q：在下面的程式碼片段中，alert 會顯示什麼？請解釋你的答案。
var foo = new Object();var bar = new Object();var map = new Object();
map[foo] = "foo";
map[bar] = "bar";
alert(map[foo]); // what will this display??
登入後複製
這裡 alert 將會彈出 bar ，JS 物件本質上是鍵值對哈希表，其中 key 總是字串。事實上，當字串以為外的物件被用作 key 時，並不會發生錯誤，JS 會隱式的將其轉換為字串，並將該值用作 key。
所以，上面的程式碼中 map 物件在使用 foo 物件作為 key 時，會自動呼叫 foo 物件的toString()方法，那麼這裡就會呼叫其預設實作。則會得到字串"[object Object]"。然後再看上面的程式碼，解釋如下：
var foo = new Object();
var bar = new Object();
var map = new Object();
map[foo] = "foo"; // --> map["[Object object]"] = "foo";
map[bar] = "bar"; // --> map["[Object object]"] = "bar"; // NOTE: second mapping REPLACES first mapping!
alert(map[foo]); // --> alert(map["[Object object]"]); // and since map["[Object object]"] = "bar", // this will alert "bar", not "foo"!! // SURPRISE! ;-)
登入後複製
Q：請解釋 JavaScript 中的閉包。什麼是閉包？它們有什麼獨特的特性？你如何以及為什麼要使用它們？請舉個例子。
閉包是一個函數，包含在建立閉包時處於作用域內的所有變數或其他函數。在 JavaScript 中，閉包透過「內部函數」的形式來實現，也就是在另一函數的主體內定義的函數。這是一個簡單的例子：
(function outerFunc(outerArg) { var outerVar = 3;
(function middleFunc(middleArg) { var middleVar = 4;
(function innerFunc(innerArg) { var innerVar = 5; // EXAMPLE OF SCOPE IN CLOSURE:
// Variables from innerFunc, middleFunc, and outerFunc,
// as well as the global namespace, are ALL in scope here.
console.log("outerArg="+outerArg+ " middleArg="+middleArg+ " innerArg="+innerArg+"\n"+ " outerVar="+outerVar+ " middleVar="+middleVar+ " innerVar="+innerVar); // --------------- THIS WILL LOG: ---------------
// outerArg=123 middleArg=456 innerArg=789
// outerVar=3 middleVar=4 innerVar=5
})(789);
})(456);
})(123);登入後複製
閉包的一個重要特性是，即使在外部函數傳回後，內部函數仍然可以存取外部函數的變數。這是因為，在 JavaScript 中，當函數被執行時，它們仍然使用建立函數時有效的作用域。
然而，如果內部函數在被呼叫時（而不是在創建時）存取外部函數變數的值，就會導致混淆。為了測試候選人對此細微差別的理解，請使用以下程式碼片段，它將動態建立五個按鈕，並問候選人當使用者點擊第三個按鈕時將顯示什麼內容：
function addButtons(numButtons) { for (var i = 0; i < numButtons; i++) { var button = document.createElement('input');
button.type = 'button';
button.value = 'Button ' + (i + 1);
button.onclick = function() {
alert('Button ' + (i + 1) + ' clicked');
}; document.body.appendChild(button); document.body.appendChild(document.createElement('br'));
}
}window.onload = function() { addButtons(5); };登入後複製
很多人會錯誤地回答，當使用者點擊第三個按鈕時，會顯示「Button 3 clicked」。實際上，上面的程式碼包含了一個錯誤（基於對 closure 的誤解），當使用者點擊五個按鈕中的任何一個，都會顯示「Button 6 clicked」。這是因為，在呼叫 onclick 方法時（對於任一按鈕），for 迴圈已經完成且變數 i 的值已經是 5。
接下來可以問候選人如何解決上述程式碼中的錯誤，以便產生預期的行為（即點擊按鈕 n 將顯示「Button n clicked」）。如果候選人能給出正確答案，說明他們懂得如何正確使用閉包，如下所示：
function addButtons(numButtons) { for (var i = 0; i < numButtons; i++) { var button = document.createElement('input');
button.type = 'button';
button.value = 'Button ' + (i + 1); // HERE'S THE FIX:
// Employ the Immediately-Invoked Function Expression (IIFE)
// pattern to achieve the desired behavior:
button.onclick = function(buttonIndex) { return function() {
alert('Button ' + (buttonIndex + 1) + ' clicked');
};
}(i); document.body.appendChild(button); document.body.appendChild(document.createElement('br'));
}
}window.onload = function() { addButtons(5); };登入後複製
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
怎麼使用li進行水平排列
#怎麼操作頁面、視覺區、螢幕等寬高屬性
以上是JS概念問題總結答疑的詳細內容。更多資訊請關注PHP中文網其他相關文章！
