一道考察JS new 以及 instanceof 的面試題

摘要：一道面試題，考察 是否理解  new FunctionName 原理 以及 instanceof 的原理

聲明：這道題目靈感來源淘寶UED部門玉伯的blog。

(1) 關于 new

大家對構造函數，估計都知道。 但是JavaScript 中的構造函數是否跟你理解中的一模一樣呢？

讓我們從一道面試題中，看原理：

function Dog(name) {
    this.name = name;
    Dog.prototype = {
        shout: function() { alert("I am " + this.name); }
    };
}
var dog1 = new Dog("Dog 1");
var dog2 = new Dog("Dog 2");
dog2.shout();
dog1.shout();

請問運行結果是什么？

結果如果沒有出乎你的意料，建議不用在此浪費時間。

如果覺得答案有點難理解請繼續……

在執行new 的時候，都做了什么:

// var dog1 = new Dog() 的等價偽代碼：
var dog1 = (function(name) {
    var o = {};
    o.__proto__ = Dog.prototype; // line 2
    Dog.call(o);
 dog1.name = name;
    Dog.prototype = {/* some code */}; // line 4
    return o; // line 5
})();

我沒做什么鋪墊，直接將new 的過程用偽代碼表示出來。發現在new 的過程也就是執行構造函數的時候做的事情是產生一個對象 并且是將原Dog 的prototype 繼承了過來。

注意line 4 ，這個時候Dog的prototype 發生了改變。

這導致了一個本質的轉變： dog1 instanceof Dog 這將變為false

引出這道題目的第二個知識點考察。

(2) 關于 instanceof
 
 
 結論：看隱藏的 dog1.__proto__ 屬性是否等于 Dog.prototype !
 
看了這么多有趣的解釋是否試試手呢？

好吧，讓我們看看下面的題目：（注意由于瀏覽器不同，javascript腳本引擎也不同，建議至少在firefox 或者 chrome 里面來看看，當然也順便用IE 不同版本看看）

function Bird() {}
var bird = {};
bird.__proto__ = Bird.prototype;
alert(bird instanceof Bird); // true or false?