JavaScript原型繼承工做原理

原型繼承的定義

當你閱讀關於JS原型繼承的解釋時，你時常會看到如下這段文字：

當查找一個對象的屬性時，JavaScript 會向上遍歷原型鏈，直到找到給定名稱的屬性爲止。——出自JavaScript祕密花園

大多數JavaScript的實現用 __proto__ 屬性來表示一個對象的原型鏈。在這篇文章裏咱們將看到__proto__與 prototype 的區別何在。

注：__proto__ 是一個不該在你代碼中出現的非正規的用法，這裏僅僅用它來解釋JavaScript原型繼承的工做原理。

如下代碼展現了JS引擎如何查找屬性：

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 y ，同似擁有一個 print 方法。

用以前咱們說過的原型繼承的定義，咱們建立一個對象 Point ，擁有三個屬性：x，y 和 print。爲了能建立一個新的二維點，咱們須要建立一個新的對象，讓他其中的 __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

JavaScript怪異的原型繼承

使人困惑的是，每一個教授原型繼承的人都不會給出上面那樣的代碼，反而會給出下面這樣的代碼：

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

　　

這和說好的不同啊，這裏 Point 變成了函數，而後還有個什麼 prototype 的屬性，並且有了new 運算符。這他喵的是什麼狀況？

new 運算符是如何工做的

造物者 Brendan Eich 想讓JS和傳統的面向對象的編程語言差不太多，如Java和C++。在這些語言裏，咱們採用 new 運算符來給類實例化一個新的對象。因此他在JS裏寫了一個 new 運算符。

• C++裏有用來初始化實例屬性的構造函數概念，所以 new 運算符必須針對函數。
• 咱們須要將對象的方法放到一個地方去，既然咱們在用原型語言，咱們就把它放到函數的原型屬性中去。

new 運算符接受一個函數 F 及其參數：new F(arguments...)。這一過程分爲三步：

1. 建立類的實例。這步是把一個空的對象的 __proto__ 屬性設置爲 F.prototype 。
2. 初始化實例。函數 F 被傳入參數並調用，關鍵字 this 被設定爲該實例。
3. 返回實例。

如今咱們知道了 new 是怎麼工做的，咱們能夠用JS代碼實現一下：

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中真正的原型繼承

JS的ECMA規範只容許咱們採用 new 運算符來進行原型繼承。可是大宗師 Douglas Crockford 卻發現了一種能夠利用 new 來實現真正的原型繼承的方式！他寫下了 Object.create 函數以下：

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

這看起來蠻奇怪的，但倒是至關的簡潔：它建立了新的對象，並將其原型設置爲你想設置的任意值。若是咱們容許使用 __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