【譯】【Javascript - 真正的原型繼承】

zoomdong 發(fā)布于2019-08-19 17:53 / 613人閱讀

摘要：操作符構(gòu)造步驟有三步構(gòu)造一個類的實例這個實例是一個空對象，并且他的屬性指向構(gòu)造函數(shù)的原型。不優(yōu)化原生的或自定義的作為構(gòu)造函數(shù)是及其不高效的。

原文地址：Javascript – How Prototypal Inheritance really works

在網(wǎng)上可以看到各種關(guān)于Javascript原型繼承的文章，但Javascript規(guī)范中只提供了new操作符這一種實現(xiàn)原型繼承的方法。因此網(wǎng)上大多數(shù)的文章是具有迷惑性的，很混亂。這篇文章會讓你清晰的認識到什么是真正的原型繼承？并且怎么樣使用它？

原型繼承的定義:

你會經(jīng)常看到如下關(guān)于原型繼承的定義：

訪問一個對象屬性的時候，Javascript會沿著原型鏈向上尋找，直到找到該屬性。

Javascript中大多數(shù)實現(xiàn)方式都是使用__proto__來指定原型鏈中下一個被訪問的對象，接下來會揭示__proto__與prototype之間的區(qū)別。

注意：不要在你的代碼中使用__proto__，文中使用它僅僅是為了更好的解釋Javascript繼承是如何工作的。

下面的代碼展示了Javascript引擎如何檢索對象的屬性（偽代碼，僅為了方便理解）

function getProperty(obj, prop) {
    if (obj.hasOwnProperty(prop)){
        return obj[prop];
    }else if (obj.__proto__ !== null){
        return getProperty(obj.__proto__, prop);
    }else{
        return undefined;
    }
}

舉個例子：一個二維的點。擁有x坐標(biāo)屬性，y坐標(biāo)屬性和一個print方法。

用書面語言來表示該定義就是：我們定義了一個有三個屬性的對象：x，y和print。為了構(gòu)造一個新點，我們只需要創(chuàng)建一個對象并將他的__proto__屬性指向Point。

var Point = {
    x: 0,
    y: 0,
    print: function () { console.log(this.x, this.y); }
};
var p = {x: 10, y: 20, __proto__: Point};
p.print(); // 10 20

奇怪的原型繼承:

怪異之處在于解釋原型繼承的人給出的例子往往與他們的定義不相符合，他們給出的代碼通常如下所示：

function Point(x, y) {
    this.x = x;
    this.y = y;
}
Point.prototype = {
    print: function () { console.log(this.x, this.y); }
};
var p = new Point(10, 20);
p.print(); // 10 20

上面所例舉的代碼跟原型繼承完全不相關(guān)，Point是構(gòu)造函數(shù)，它有一個prototype屬性，使用了new操作符，但是然后呢？

new是如何工作的:

Brendan Eich 想讓javascript像Java，C++這些傳統(tǒng)的面向?qū)ο笳Z言一樣，用new操作類直接構(gòu)造一個實例，所以他給Javascript也添了new操作符。

C++中有構(gòu)造函數(shù)，用來初始化實例的屬性。因此，new操作符操作的對象必須是函數(shù)。

我們需要把對象的方法掛載到某個地方，由于我們使用的是原型語言，我們把他放在函數(shù)的原型屬性里。

new操作符構(gòu)造步驟有三步：

構(gòu)造一個類的實例：這個實例是一個空對象，并且他的__proto__屬性指向構(gòu)造函數(shù)的原型。

初始化實例：構(gòu)造函數(shù)被調(diào)用，并將this指向這個實例。

返回實例對象。

現(xiàn)在我們了解了new構(gòu)造的過程，我們在Javascript中實現(xiàn)它：

function New (f) {
    var n = { "__proto__": f.prototype };
    return function () {
        f.apply(n, arguments);
        return n;
    };
}

舉一個小例子：

function Point(x, y) {
    this.x = x;
    this.y = y;
}
Point.prototype = {
    print: function () { console.log(this.x, this.y); }
};

var p1 = new Point(10, 20);
p1.print(); // 10 20
console.log(p1 instanceof Point); // true
 
var p2 = New (Point)(10, 20);
p2.print(); // 10 20
console.log(p2 instanceof Point); // true

Javascript中真正的原型繼承:

Javascript規(guī)范只定義了new操作符的工作流程，Douglas Crockford發(fā)現(xiàn)了一種利用new實現(xiàn)原型繼承的新方法，他寫的Object.create函數(shù)。

Object.create = function (parent) {
    function F() {}
    F.prototype = parent;
    return new F();
};

看起來很奇怪，但實際上很簡潔。他只創(chuàng)建了一個新的對象，原型你可以隨意設(shè)置。如果允許使用__proto__的話，這個例子可以這樣寫：

Object.create = function (parent) {
    return { "__proto__": parent };
};

下面這個Point例子才是真正的原型繼承。

var Point = {
    x: 0,
    y: 0,
    print: function () { console.log(this.x, this.y); }
};
 
var p = Object.create(Point);
p.x = 10;
p.y = 20;
p.print(); // 10 20

結(jié)論:

我們了解了原型繼承并用一種具體的方法實現(xiàn)了它。但這樣寫有一些缺點：

不標(biāo)準(zhǔn)：__proto__不是標(biāo)準(zhǔn)并不贊成使用，并且原生的 Object.create 和 Douglas Crockford的實現(xiàn)不等同。

不優(yōu)化：Object.create (原生的或自定義的)作為構(gòu)造函數(shù)是及其不高效的。