首先看下面一行代碼:

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

控制臺打印如下:

可以看見,當使用構造函數(Person)構造一個實例(person1)時,
在后臺其實生成了2種關系,

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

在知道了上面2種關系后,下面在看一個例子:

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進行字面量賦值時,實際上是對P的原型進行了重寫,而上面例子未對(P.prototype)重寫后的construcoter屬性 進行說明 2.JavaScript默認其為一個泛用對象Object,因此其constructor屬性指向了Object.

倘若我們在對P.prototype進行字面量賦值的同時,加上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指向了函數P.即可以通過實例的constructor函數找到函數P…

參考《JavaScript面向對象精要》第4章

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。