1. 程式人生 > >假裝寫部落格 prototype、__proto__、constructor 的作用與區別

假裝寫部落格 prototype、__proto__、constructor 的作用與區別

*以下全文用[[Prototype]]代表物件真正的原型鏈

prototype與__proto__的區別
__proto__是真正的原型鏈,也就是[[Prototype]],使用原型鏈時,查詢物件的屬性是通過__proto__來查詢,而不是prototype

varFoo=function(){};
Foo.__proto__.a ='b';
Foo.prototype.a ='a';
alert(Foo.a);//b

prototype只是用於構建用new關鍵字建立的物件,將構造器函式的prototype的引用指向於構建的物件的__proto__

varFoo=function(){};
var test =newFoo();
alert(test.__proto__ ===Foo.prototype);//true

構造器函式的prototype與__proto__是不相同的,其protoype會被構建的物件的[[Prototype]]引用,其[[Prototype]]是Function物件的[[Prototype]],Function物件的prototype與__proto__是相同的

varFoo=function(){};
alert(Foo.prototype ===Foo.__proto__);//false
alert(Function.__proto__ ===Foo.__proto__);//true
alert(Function.__proto__ ===Function.prototype);//true

constructor是什麼
constructor也就是構造器函式的引用,一個構造器函式的prototype的constructor也就等於這個構造器函式本身,一個構造器函式的__proto__的constructor,也就是Function的consturctor就等於Function本身

varFoo=function(){};
var test =newFoo();
alert(Foo.constructor ===Function);//true
alert(Foo.prototype.constructor === test.constructor);//true
alert(Foo=== test.constructor);//true
alert(Foo.constructor ===Foo.prototype.constructor);// false
Foo
 |_ protoype
      |_ consturctor  === Foo
      |_ __proto__ === Object.prototype
          |_ constuctor === Object
          |_ __proto__ === null
 |_ __proto__
     |_ __proto__ === Function.protoype
          |_ constuctor === Function
               |_ __proto__ === Object.protoype
                   |_ consturctor === Object
                   |_ __proto__ === null
test
    |_ __proto__ === Foo.protoype
        |_ constructor === Foo
        |_ __proto__ === Object.protoype
            |_ constuctor === Object
            |_ __proto__ === null

只有函式物件才有protoype屬性,Object.proto === Function.proto,Object.proto.contructor === Object

在這裡插入圖片描述

在這裡插入圖片描述