深刻理解原型

1、一道面試題引起的深思

function A(){

}
var B = {};
console.log(A.constructor); 
console.log(B.constructor);
var a = new A();  
A.prototype = {};  
var b = new A();  
console.log(A.constructor);  
console.log(b.constructor);  
b.constructor = A.constructor;
console.log(a.constructor);  //[Function: A]
console.log(b.constructor);  //[Function: Function]
console.log(b.constructor === a.constructor);   //false
console.log(a instanceof A);  //false
console.log(b instanceof A);  //true複製代碼

step1

function A(){

}
var B = {};
console.log(A.constructor);
console.log(B.constructor);複製代碼

解釋：

引擎建立了 Object.prototype ，而後建立了 Function.prototype 。

Object 是全部對象的爸爸，全部對象均可以經過 __proto__.constructor 找到它。

Function 是全部函數的爸爸，全部函數均可以經過 __proto__.constructor 找到它。

step2

var a = new A();   //這裏a的constructor指向A
console.log(A.prototype.constructor);   //[Function: A]
A.prototype = {};  //重寫原型
console.log(A.prototype.constructor);   //[Function: Object]
var b = new A();   //這裏b的construcor指向Object
console.log(A.constructor);    //[Function: Function]    A的constructor先後沒有發生變化
console.log(b.constructor);    //[Function: Object]複製代碼

重寫原型以前A.prototype.constructor如圖所示：

var a = new A();後a.__proto__constructor指向A；

A.prototype = {};重寫原型後，A.prototype.constructor指向Object。

var b = new A();時b的__proto__指向A的原型，可是A的原型裏面的constructor指向Object。

因此b.constructor爲[Function: Object]

step3

b.constructor = A.constructor;
console.log(b.constructor === a.constructor);   //false複製代碼

解釋

a.constructor在重寫A的原型以前，指向構造函數A；

把b.constructor = A.constructor;後，b.constructor指向Function；

因此b.constructor === a.constructor爲false；

step4

console.log(a instanceof A);  //false
console.log(b instanceof A);  //true複製代碼

剖析instanceof原理，其內部機制是經過判斷對象的原型鏈中是否能找到類型的prototype。

instanceof的代碼實現：

function instacne_of(L,R){
    var O = R.prototype;
    L = L.__proto__;
    if(L === null){
        return false;
    }
    if(O === L){
        return true;
    }
    L = L.__proto__;
}複製代碼

因此a.__proto__爲function A；b.__proto__爲Object；A.prototype爲Object；