[[405146]]

16.1 基礎

原型

每個對象都包含一個原型屬性(prototype)，用于關聯另一個對象，關聯后就能使用那個對象的屬性和方法，這其實就是JavaScript的原型式繼承。操作原型有如下方法：

(1)Object.create()

根據指定的原型創建新對象，原型可以是null

const parentObj = { 
    add: function() { 
        return this.a + this.b; 
    } 
}; 
 
const newObj = Object.create(parentObj, { 
    a: { 
        value: 10 
    }, 
    b: { 
        value: 20 
    } 
}); 
 
console.log(newObj.add()); // 30 

(2)Object.getPrototypeOf()

返回指定對象的原型

console.log(Object.getPrototypeOf(newObj)); // { add: [Function: add] } 

(3)Object.setPrototypeOf()

設置一個指定的對象的原型到另一個對象或 null。

const parentObj = { 
    add: function() { 
        return this.a + this.b; 
    } 
}; 
 
const childObj = { 
    a: 10, 
    b: 20 
}; 
 
Object.setPrototypeOf(childObj, parentObj); 
 
console.log(childObj.add()); // 30 
console.log(Object.getPrototypeOf(childObj)); // { add: [Function: add] } 

(4)Object.prototype.isPrototypeOf()

返回一個布爾值，用于檢查一個對象是否存在于另一個對象的原型鏈上。

console.log(parentObj.isPrototypeOf(childObj)); // true 

構造函數

構造函數 ，是一種特殊的方法。主要用來在創建對象時初始化對象， 即為對象成員變量賦初始值，總與new運算符一起使用在創建對象的語句中。

實例

通過構造函數和new創建出來的對象，就是實例

16.2 三者之間關系

下面先看一張網上流傳的神圖，里面包含了原型、構造函數、實例三者之間的關系。

image-20210530114840237.png

上述圖中內容可以簡化為以下幾條：

• 原型.constructor === 構造函數
• 構造函數.prototype === 原型
• 實例.__ proto __ === 原型

下面先來看一段代碼，這段代碼雖然簡短，但是里面卻包含了上述的原型、構造函數和實例。

// 構造函數 
function Test(a, b) { 
    this.a = a; 
    this.b = b; 
} 
 
// 原型 
Test.prototype.add = function() { 
    return this.a + this.b; 
} 
 
// 實例 
const test = new Test(10, 20); 
console.log(test.add()); // 30 

下面來利用上述代碼驗證一下這三者的關系

獲取實例內容

在實例中具備__ proto __ 屬性，可以看到里面的內容就是原型，從而驗證了實例.__ proto __ === 原型

獲取構造函數內容

獲取原型內容

在原型中具備constructor屬性，該屬性的內容就是構造函數，從而驗證了原型.constructor === 構造函數

本文轉載自微信公眾號「執鳶者」，可以通過以下二維碼關注。轉載本文請聯系執鳶者公眾號。