前言

在瞭解原型和原型鏈之前，我們先了解一部分概念，constructor，prototype，__proto__。

constructor

在之前判斷數據類型的文章: javaScript常見數據類型檢查校驗

有提到過關於構造函數的屬性constructor

constructor 的是返回創建實例對象的 構造函數的引用，這個屬性的值是對函數本身的引用，而不是一個包含函數名稱的字符串
具體用法：構造函數.prototype.constructor()

function constructorFn() {
  this.name = "11";
}

console.log(constructorFn.constructor); // Function

let a = new constructorFn();
console.log(a.constructor);
// ƒ constructorFn() {
  this.name = "11";
}

原型prototype

console.log(Object.prototype);

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
{

    constructor: ƒ Object()
    hasOwnProperty: ƒ hasOwnProperty()
    isPrototypeOf: ƒ isPrototypeOf()
    propertyIsEnumerable: ƒ propertyIsEnumerable()
    toLocaleString: ƒ toLocaleString()
    toString: ƒ toString()
    valueOf: ƒ valueOf()
    __defineGetter__: ƒ __defineGetter__()
    __defineSetter__: ƒ __defineSetter__()
    __lookupGetter__: ƒ __lookupGetter__()
    __lookupSetter__: ƒ __lookupSetter__()
    __proto__: (...)
    get __proto__: ƒ __proto__()
    set __proto__: ƒ __proto__()

}

在js當中，每個函數或者方法都有一個特殊的，並且是默認的屬性叫作原型（prototype），它是一個對象，這個對象包含了這個方法自帶的一些屬性和方法。

原型鏈 proto

function constructorFun() {}
constructorFun.prototype.testName = "constructorFun";
let newFun = new constructorFun();

// newFun
console.log(newFun);
console.log(newFun.testName); // 通過__proto__查找 輸出： constructorFun
console.log(newFun.constructor);  // ƒ constructorFun() {}
console.log(newFun.__proto__);  // {testName: 'constructorFun', constructor: ƒ}
console.log(newFun.prototype);  // undefined
console.log(newFun.prototype.__proto__); // Error in created hook: "TypeError: Cannot read property '__proto__' of undefined"

通過上述代碼我們可以看到，prototype這個對象裏面，包含了一個__proto__的屬性，這個屬性就是原型鏈的關鍵,

• 當newFun用過new操作符，繼承構造函數constructorFun的時候，testName，同時通過newFun.__proto__我們可以知道，newFun沒有自己的name的時候，會通過__proto__不斷地往上查找，直到查找到相關屬性，如果不存在則為undefined
• 在JavaScript 中只有一種結構：對象。每個實例對象（object）都有一個私有屬性（稱之為 proto ）指向它的構造函數的原型對象（prototype）。該原型對象也有一個自己的原型對象（__proto__），層層向上直到一個對象的原型對象為 null。根據定義，null 沒有原型，並作為這個原型鏈中的最後一個環節。（斷言出自 MDN https://developer.mozilla.org/ ）

從原型鏈查找到null的過程

構造函數

function constructorFun() {}
constructorFun.prototype.testName = "constructorFun";
let newFun = new constructorFun();

// newFun
console.log(newFun);
console.log(newFun.testName); // 通過__proto__查找 輸出： constructorFun
console.log(newFun.constructor);  // ƒ constructorFun() {}
console.log(newFun.__proto__);  // {testName: 'constructorFun', constructor: ƒ}
console.log(newFun.prototype);  // undefined
console.log(newFun.prototype.__proto__); // Error in created hook: "TypeError: Cannot read property '__proto__' of undefined"

• 使用new操作符實例化的方法，沒有自己的原型對象，並且通過__proto__可以向上查找構造函數的屬性和方法，以及構造函數。
• 實例化方法可以通過constructor屬性，獲取構造函數本身

// constructorFun
console.log(constructorFun.constructor);  // ƒ Function() { [native code] }
console.log(constructorFun.__proto__ === Function.prototype); // true
console.log(constructorFun.prototype);  // {testName: 'constructorFun', constructor: ƒ}testName: "constructorFun"constructor: ƒ constructorFun()[[Prototype]] ...}
console.log(constructorFun.prototype.constructor);  // ƒ constructorFun() {}
console.log(constructorFun.prototype.__proto__ === Object.prototype); // true

• 構造函數constructorFun的屬性constructor為Function，原型鏈向上查找的時候，構造函數的__proto__ → Function的原型prtotype
• constructorFun的原型對象的__proto__是對象的原型

// Function
console.log(Function.constructor);  // ƒ Function() { [native code] }
console.log(Function.__proto__);    // ƒ () { [native code] }
console.log(Function.prototype);    // ƒ () { [native code] }
console.log(Function.prototype.constructor);  // ƒ Function() { [native code] }
console.log(Function.prototype.__proto__ === Object.prototype); // true

// Object
console.log(Object.constructor);  // ƒ Function() { [native code] }
console.log(Object.__proto__);  // ƒ () { [native code] }
console.log(Object.prototype);  // constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …
console.log(Object.prototype.constructor);  // ƒ Object() { [native code] }
console.log(Object.prototype.__proto__);  // null

字面量創建對象

let parent = {name:1}
// parent

console.log(parent.constructor); // ƒ Object() { [native code] }
console.log(parent.__proto__);  // {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
console.log(parent.prototype);  // undefined
// console.log(parent.prototype.__proto__); // Error in created hook: "TypeError: Cannot read property '__proto__' of undefined"

// Object
console.log(Object.constructor); // ƒ Function() { [native code] }
console.log(Object.__proto__);  // ƒ () { [native code] }
console.log(Object.prototype);  // {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
console.log(Object.prototype.constructor);  // ƒ Object() { [native code] }
console.log(Object.prototype.__proto__);  // null

通過以上代碼查找，我們可以畫出對應的關係圖

總結：

• 原型prototype和原型鏈查找__proto__，constructor構成了原型鏈，通過這些屬性和方法可以層層網上查找一直到null
• 構造函數實例化方法，可以通過原型鏈的形式向上查找到對應屬性（這個屬性存在的前提下），這裏的知識點還包含了new實例的過程中，繼承方面的知識
• 使用原型鏈和原型，我們可以進行封裝一下構造方法，還有一些插件，我們在閲讀一下框架源碼或者插件源碼的時候，都能看到原型和構造函數相關的代碼。
• 原型和原型鏈的知識從概念上並不太好理解或者説有點晦澀難懂，可以試着去寫一些實例化對象和方法，去查找原型上的方法
• 並且在開發過程中如果涉及到面向對象編程或者運用較多的話，可以加深我們的理解
• 類似數組以及Function等構造函數，我們可以通過繼承，在原型鏈上擴展一些通用的utils方法

以上就是js中原型和原型鏈概念的簡單解析，有任何問題歡迎留言，後續的文章整理然後作為補充。

文章博客地址：javaScript原型和原型鏈

源碼地址

• 碼雲 https://gitee.com/lewyon/vue-note

• githup https://github.com/akari16/vue-note

歡迎關注公眾號：程序員布歐，不定期更新一些文章

創作不易，轉載請註明出處和作者。