[[405146]]

16.1 基礎(chǔ)

原型

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

(1)Object.create()

根據(jù)指定的原型創(chuàng)建新對象，原型可以是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()

設(shè)置一個指定的對象的原型到另一個對象或 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 

構(gòu)造函數(shù)

構(gòu)造函數(shù) ，是一種特殊的方法。主要用來在創(chuàng)建對象時初始化對象， 即為對象成員變量賦初始值，總與new運(yùn)算符一起使用在創(chuàng)建對象的語句中。

實(shí)例

通過構(gòu)造函數(shù)和new創(chuàng)建出來的對象，就是實(shí)例

16.2 三者之間關(guān)系

下面先看一張網(wǎng)上流傳的神圖，里面包含了原型、構(gòu)造函數(shù)、實(shí)例三者之間的關(guān)系。

image-20210530114840237.png

上述圖中內(nèi)容可以簡化為以下幾條：

• 原型.constructor === 構(gòu)造函數(shù)
• 構(gòu)造函數(shù).prototype === 原型
• 實(shí)例.__ proto __ === 原型

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

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

下面來利用上述代碼驗(yàn)證一下這三者的關(guān)系

獲取實(shí)例內(nèi)容

在實(shí)例中具備__ proto __ 屬性，可以看到里面的內(nèi)容就是原型，從而驗(yàn)證了實(shí)例.__ proto __ === 原型

獲取構(gòu)造函數(shù)內(nèi)容

獲取原型內(nèi)容

在原型中具備constructor屬性，該屬性的內(nèi)容就是構(gòu)造函數(shù)，從而驗(yàn)證了原型.constructor === 構(gòu)造函數(shù)

本文轉(zhuǎn)載自微信公眾號「執(zhí)鳶者」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系執(zhí)鳶者公眾號。