白話解釋 Javascript 原型繼承(prototype inheritance)

kid143 發(fā)布于2019-08-21 15:09 / 3070人閱讀

摘要：我們有了構(gòu)造函數(shù)之后，第二步開始使用它構(gòu)造一個函數(shù)。來個例子這種方式很簡單也很直接，你在構(gòu)造函數(shù)的原型上定義方法，那么用該構(gòu)造函數(shù)實例化出來的對象都可以通過原型繼承鏈訪問到定義在構(gòu)造函數(shù)原型上的方法。

來源: 個人博客

白話解釋 Javascript 原型繼承(prototype inheritance) 什么是繼承?

學(xué)過“面向?qū)ο蟆钡耐瑢W(xué)們是否還記得，老師整天掛在嘴邊的面向?qū)ο笕筇卣鳎悍庋b，繼承，多態(tài)。今天我們就來白話一下javascript中的原型繼承，沒學(xué)過的同學(xué)們也不用擔(dān)心，跟著往下走，我相信你會明白的。

繼承，當(dāng)然是面向?qū)ο笃渲械囊环N思想和概念了，所謂繼承，顧名思義就是繼承了。。。

比如說小明是老明唯一的兒子，老明有一個億的資產(chǎn)，這一個億的資產(chǎn)雖然不在小明手里，但是小明是老明兒子，小明在一定程度上“繼承”了他老爸給他提供的這么多的資產(chǎn)，小明不僅可以享用自己賺來的錢，也可以隨時消費他父輩的資產(chǎn)。

在程序中，其實也是類似的，如果一個對象A繼承了對象B，那么對象A不僅可以使用自己的屬性和方法，同時也可以使用父級B中的屬性和方法。

為了能夠說明白Javascript 中的原型繼承，就不得不說javascript中的對象。

javascript對象兩種創(chuàng)建(聲明)方式

在javascript中你可以使用以下方式創(chuàng)建一個javascript 對象(object).

對象字面量(object literal)方式

構(gòu)造函數(shù)(constructor)方式 // es6中可以用class創(chuàng)建一個真正的對象

Object.create(prototype) //常用此方法進行對象間繼承

第一種對象字面量方式很簡單粗暴:

var a = {}; // 我創(chuàng)建了一個空對象a

第二種“構(gòu)造函數(shù)”方式來“創(chuàng)建對象”。

“構(gòu)造函數(shù)”只是創(chuàng)建一個對象的第一步！有了構(gòu)造函數(shù)之后，第二部就是用它創(chuàng)建一個對象！

所以，第一步，來一個構(gòu)造函數(shù)，你可以把它當(dāng)成一個普通函數(shù)，比如：

function People(name) {
    this.name = name;
}

這個函數(shù)也可以接受參數(shù)，如果大家對this關(guān)鍵字不了解，請先看《詳解javascript this關(guān)鍵字》這個教程，這里我就不啰嗦了。

我們有了構(gòu)造函數(shù)之后，第二步開始使用它構(gòu)造一個函數(shù)。

在javascript中，我們使用 “new” 操作符 + 構(gòu)造函數(shù) 來創(chuàng)建一個對象。

var a = new People("xiaoming");
var b = new People;

順便提一下，如果你不想給構(gòu)造函數(shù)傳入?yún)?shù)，那么帶不帶括號都是一樣的，也就是說：

var a = new People;
var b = new People();

這兩種創(chuàng)建對象方式都正確。

小提示：其實第一種對象字面量方式只是構(gòu)建對象的語法糖(syntax sugar)，底層還是使用構(gòu)造函數(shù)方式構(gòu)造的：

new Object()

大家不相信的話，可以打開你的chrome的控制臺，直接輸入：

Object

是不是看到了下面這一行？

function Object() { [native code] }

這個Object也是個構(gòu)造函數(shù)，只不過這里原生代碼。

原型prototype

現(xiàn)在大家知道了javascript中對象創(chuàng)建的兩種方式。

var a = {};
var xiaoming = new People();

接下來這句話請大家重復(fù)三遍：

所有的javascript對象都從一個叫“原型”的地方繼承了所有的屬性和方法！

這個“原型”是個啥？就是個對象！你可以把它想象成：{}。

我們前面說了創(chuàng)建對象的兩種方法：
1, 對象字面量

var a = {};
// 其實等于
var a = new Object;

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

function People(){
}

var a = new People();

我們說過了：

所有的javascript對象都從一個叫“原型”的地方繼承了所有的屬性和方法！

上面這兩個例子中對象是：

那么原型(prototype)在哪呢？大家試著和我一樣做一下：

console.log(Object.prototype);
console.log(People.prototype);

是不是都輸出了一個對象？

我們之前也說了，原型（prototype）就是一個對象而已，現(xiàn)在大家也知道它在哪了吧？原型就是構(gòu)造函數(shù)的一個屬性，這里可能聽著有點別扭，函數(shù)的屬性？對，javascript中的構(gòu)造函數(shù)也是對象！

重要的事情說三遍：javascript的原型(prototype)是什么？就是“構(gòu)造函數(shù)”下的一個對象叫做“原型”(prototype)

再添一句，這個原型對象中又有個名為“constructor”的屬性，指向了該函數(shù)本身。

function People(){}

People.prototype.constructor === People // true

再提醒一下，原型只存在在“構(gòu)造函數(shù)”中，有些同學(xué)會誤解的去找一個“對象”或“對象字面量”的原型(prototype)，因為我們說了原型(prototype)只存在在“構(gòu)造函數(shù)”中，所以去對象或?qū)ο笞置媪坷镎以偷恼也坏降模荒芊祷豼ndefined。比如：

var a = {};
console.log(a.prototype) // 返回undefined

// 或者

function People() {}
var p = new People;
console.log(p.prototype) // 依然返回undefined

// 但是
console.log(People.prototype) // 就返回一個{} 當(dāng)然這里面有好多原生的方法

但是，還有一個特別屬性

__proto__

可以讓你“向父級”查看，當(dāng)前對象繼承的“原型”是誰？就是孩子找爸爸。
打開你的chrome瀏覽器的控制臺，接著上面的代碼繼續(xù)試驗：

a.__proto__ // Object {}
p.__proto__ // Object {}
a.__proto__ === Object.prototype // true
p.__proto__ === People.prototype // true

// 我們發(fā)現(xiàn)兩個對象的原型都是對象。
// 那么我們再來看看構(gòu)造函數(shù)“繼承”的原型是誰？

Object.__proto__ // function () {}
People.__proto__ // function () {}

看到這里，希望你能明白，不管是javascript自帶的，還是我們自定義的構(gòu)造函數(shù)依然繼承自匿名函數(shù)的原型！(希望你沒暈)

原型繼承

有了上面的鋪墊，我們終于能夠開始說一下原型繼承了。如果你上面的知識點都理解了，理解原型繼承不在話下。

來個例子：

function People(name) {
    this.name = name;
}

People.prototype.sayHi = function () {
    console.log("hi, my name is ", this.name);
};


var a = new People("xiaoming");
a.sayHi(); // hi, my name is xiaoming

var b = new People("laoming");
b.sayHi(); // hi, my name is laoming

這種方式很簡單也很直接，你在構(gòu)造函數(shù)的原型上定義sayHi方法，那么用該構(gòu)造函數(shù)實例化出來的對象都可以通過原型繼承鏈訪問到定義在構(gòu)造函數(shù)原型上的方法。

理解了上述內(nèi)容，你可以直接利用javascript的原型繼承，也可以用它為基礎(chǔ)構(gòu)造自己“類”感覺小庫。

來源：個人博客