首先看下面一行代碼:

function Person(name){this.name = name; } var person1 = new Person; console.log(person1.__proto__ === Person.prototype); console.log(person1.constructor === Person);

控制臺打印如下:

可以看見,當(dāng)使用構(gòu)造函數(shù)(Person)構(gòu)造一個實例(person1)時,
在后臺其實生成了2種關(guān)系,

第一種是:person1的 __proto__ 屬性指向構(gòu)造函數(shù)的原型(Person.prototype) 第二種是:實例(person1)的constructor屬性指向該函數(shù)(Person).其原理如下: ---> 第一種關(guān)系: person1.__proto__ === Person.prototype 一個構(gòu)造函數(shù)通過new生成一個實例person1時,實際上有一個內(nèi)部屬性 [[Prototype ]],它指向?qū)ο蟮脑?即:Person.prototype). [[Prototype]](內(nèi)部)屬性的讀取(2種): 1.可以通過Object.getPrototypeOf()方法讀取,這種方法比較長... 2.第二種方法是基于,JavaScript引擎在所有對象上都支持一個名為_proto_的屬性.通過它,可以直接讀寫[[Prototype]]屬性.(寫法比較方便)---> 第二種關(guān)系: person1.constructor === Person 1.當(dāng)一個函數(shù)(這里指構(gòu)造函數(shù)Person)被創(chuàng)建時,它的prototype屬性也被創(chuàng)建,且該原型對象的constructor屬性(Person.prototype.constructor)指向該函數(shù) Person,即Person.prototype.constructor === Person, 2.當(dāng)在實例person1種尋找constructor屬性時,未找到,于是根據(jù)[[Prototype]]的指針(即:__proto__)屬性,尋找其原型對象(Person.prototype)中的constructor屬性,進(jìn)而找到Person,最終有person1.construcoter === Person// 注意:雖然person1.constructer === Person , Person.prototype.constructor === Person, 但person1 !== Person.prototype, // 因為person1中是通過[[Prototype]] "指針"指向Person.prototype的!!!

在知道了上面2種關(guān)系后,下面在看一個例子:

function P(name) {this.name = name; } P.prototype = {sayName: function () {console.log(this.name);} };var p1 = new P(); console.log(p1 instanceof Person); console.log(p1.constructor === Person); console.log(p1.constructor === Object);

---> 對于第一行的true 1.a instanceof A是指,a是A的實例 2.因為var p1 = New P() , 明顯是對的---> 對于第二行的false, 第3三行true 1.使用P.prototype進(jìn)行字面量賦值時,實際上是對P的原型進(jìn)行了重寫,而上面例子未對(P.prototype)重寫后的construcoter屬性 進(jìn)行說明 2.JavaScript默認(rèn)其為一個泛用對象Object,因此其constructor屬性指向了Object.

倘若我們在對P.prototype進(jìn)行字面量賦值的同時,加上constructor屬性,使其指向P,見下例:

function P(name){this.name = name; } P.prototype = {constructor: P,sayName: function() {console.log(this.name);} } var p1 =new P("marron");console.log(p1 instanceof P) ; console.log(p1.constructor === P);

可以看見,p1.constructor指向了函數(shù)P.即可以通過實例的constructor函數(shù)找到函數(shù)P…

參考《JavaScript面向?qū)ο缶返?章

總結(jié)

以上是生活随笔為你收集整理的javascript --- js中prototype、__proto__、[[Propto]]、constructor的关系的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。