一張圖說明 函式, 例項(物件), 原型之間的關係

再見孫悟空2009發表於2017-11-20
函式物件原型

前言

很多初學者都對函式,例項(物件), 原型之間的關係理不清楚。
網上五花八門的文章很多，要麼不知所云，要麼是晦澀難懂。
本文意在用最簡潔的語言跟示例讓初學者理清楚這三者之間的關係，無需理會其內部原理

一張圖說明函式 例項(物件) 原型之間的聯絡

GitHub set up
GitHub set up

圖片來源:www.cnblogs.com/wilber2013/…

由上圖得出結論：

  1. 每個函式都有一個prototype屬性指向另一個物件，這個物件就叫函式的原型物件

  2. 由建構函式產生的例項物件，其[[prototype]]屬性(不可見，瀏覽器通常實現為__proto__)指向建構函式的原型物件

  3. 每個函式，都可以認為是通過new Function()例項化的物件

  4. 不是通過建構函式(new XXX())例項化的物件(非函式)，都可以認為是new Object()例項化的物件

  5. 基於結論2,3，每個函式的[[prototype]](__proto__)屬性都指向它的原型物件Function.prototype

  6. 基於結論2,3,4，每個函式(基於結論8，除了Object())的原型物件的[[prototype]](__proto__)屬性都指向Object.prototype

  7. 原型物件的constructor屬性指向建構函式(與1剛好相反)

  8. Object.prototype.__proto__指向null

示例程式碼：

function Person(){}

Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
 console.log(this.name);
};

var person = new Person();
person.sayName(); //"Nicholas"

var person1 = new Person();
person1.sayName(); //"Nicholas"

console.log(person.sayName == person1.sayName); //true複製程式碼

基於上述定義的示例函式,驗證以上結論

  1. Person為建構函式,其中prototype屬性指向它的原型物件 Person.prototype,

         console.log(Person.prototype)複製程式碼

  2. person為new Person()產生的例項物件,其__proto__屬性指向它的原型 Person.prototype

         person.__proto__ === Person.prototype   //true
     Person.prototype.isPrototypeOf(person) //true
     Object.getPrototypeOf(person) === Person.prototype //true複製程式碼

  3. 結合結論1，定義任意函式，其__proto__屬性與Function.prototype比較

     function fn () {}
 fn.__proto__ === Function.prototype  //true複製程式碼

  4. 結合結論2,定義任意物件（非 new XXX()例項化物件,非函式),其__proto__與 Object.prototype比較

         var obj = {}
     obj.__proto__ === Object.prototype  //true複製程式碼

  5. 函式Person的__proto__屬性指向Function.prototype

         Person.__proto__ === Function.prototype //true
     Object.__proto__ === Function.prototype //true複製程式碼

  6. 原型物件Person.prototype的__proto__屬性指向Object.prototype

         Person.prototype.__proto__ === Object.prototype //true
     Function.prototype.__proto__ === Object.prototype //true複製程式碼

  7. Person.prototype的constructor屬性與Person比較

         Person.prototype.constructor === Person     //true
     Function.prototype.constructor === Function  //true
     Object.prototype.constructor === Object     //true複製程式碼

  8. 輸出Object.prototype.__proto__的值

     console.log(Object.prototype.__proto__)  //null複製程式碼

簡而言之：

對於函式：函式XXX的prototype屬性，指向XXX.prototype(函式原型物件)

對於物件：XXX例項化的物件的[[prototype]](也就是__proto__)屬性,指向XXX.prototype

對於原型：XXX.prototype的constructor屬性都指向建構函式XXX

更多請參考: JavaScript高階程式設計（第3版）6.2.3 原型模式

相關文章