一道考察JS new 以及 instanceof 的面試題
摘要:一道面試題,考察 是否理解 new FunctionName 原理 以及 instanceof 的原理
聲明:這道題目靈感來源淘寶UED部門玉伯的blog。
(1) 關(guān)于 new
大家對(duì)構(gòu)造函數(shù),估計(jì)都知道。 但是JavaScript 中的構(gòu)造函數(shù)是否跟你理解中的一模一樣呢?
讓我們從一道面試題中,看原理:
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();
請(qǐng)問運(yùn)行結(jié)果是什么?
結(jié)果如果沒有出乎你的意料,建議不用在此浪費(fèi)時(shí)間。
如果覺得答案有點(diǎn)難理解請(qǐng)繼續(xù)……
在執(zhí)行new 的時(shí)候,都做了什么:
// var dog1 = new Dog() 的等價(jià)偽代碼:
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 的過程用偽代碼表示出來。發(fā)現(xiàn)在new 的過程也就是執(zhí)行構(gòu)造函數(shù)的時(shí)候做的事情是產(chǎn)生一個(gè)對(duì)象 并且是將原Dog 的prototype 繼承了過來。
注意line 4 ,這個(gè)時(shí)候Dog的prototype 發(fā)生了改變。
這導(dǎo)致了一個(gè)本質(zhì)的轉(zhuǎn)變: dog1 instanceof Dog 這將變?yōu)閒alse
引出這道題目的第二個(gè)知識(shí)點(diǎn)考察。
(2) 關(guān)于 instanceof
結(jié)論:看隱藏的 dog1.__proto__ 屬性是否等于 Dog.prototype !
看了這么多有趣的解釋是否試試手呢?
好吧,讓我們看看下面的題目:(注意由于瀏覽器不同,javascript腳本引擎也不同,建議至少在firefox 或者 chrome 里面來看看,當(dāng)然也順便用IE 不同版本看看)
function Bird() {}
var bird = {};
bird.__proto__ = Bird.prototype;
alert(bird instanceof Bird); // true or false?