javaScript原型和原型鏈_ZenDei技術網路在線

前言在瞭解原型和原型鏈之前，我們先瞭解一部分概念，constructor，prototype，proto。 constructor 在之前判斷數據類型的文章: javaScript常見數據類型檢查校驗有提到過關於構造函數的屬性constructor constructor 的是返回創建實例對象的 ...

前言

在瞭解原型和原型鏈之前，我們先瞭解一部分概念，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

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

原型圖