JS概念問題總結答疑

這次帶給大家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(&#39;input&#39;);
    button.type = &#39;button&#39;;
    button.value = &#39;Button &#39; + (i + 1);
    button.onclick = function() {
      alert(&#39;Button &#39; + (i + 1) + &#39; clicked&#39;);
    };    document.body.appendChild(button);    document.body.appendChild(document.createElement(&#39;br&#39;));
  }
}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(&#39;input&#39;);
    button.type = &#39;button&#39;;
    button.value = &#39;Button &#39; + (i + 1);    // HERE&#39;S THE FIX:
    // Employ the Immediately-Invoked Function Expression (IIFE)
    // pattern to achieve the desired behavior:
    button.onclick = function(buttonIndex) {      return function() {
        alert(&#39;Button &#39; + (buttonIndex + 1) + &#39; clicked&#39;);
      };
    }(i);    document.body.appendChild(button);    document.body.appendChild(document.createElement(&#39;br&#39;));
  }
}window.onload = function() { addButtons(5); };

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

怎麼使用li進行水平排列

#怎麼操作頁面、視覺區、螢幕等寬高屬性

以上是JS概念問題總結答疑的詳細內容。更多資訊請關注PHP中文網其他相關文章！