JavaScript采用原型繼承這事兒是眾所皆知的，但由于它默認只提供了一個實現的實例，也就是 new 運算符，因此對于它的解釋總是令人困惑。這篇文章旨在闡明什么是原型繼承以及在JavaScript中究竟如何使用原型繼承。

原型繼承的定義

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

大多數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 

結論

我們已經了解了JS原型繼承是什么，以及JS如何用特定的方式來實現之。然而使用真正的原型繼承（如 Object.create 以及 __proto__）還是存在以下缺點：

• 標準性差：__proto__ 不是一個標準用法，甚至是一個不贊成使用的用法。同時原生態的 Object.create 和道爺寫的原版也不盡相同。
• 優化性差： 不論是原生的還是自定義的 Object.create ，其性能都遠沒有 new 的優化程度高，前者要比后者慢高達10倍。

附圖，ECMA中的原型繼承解釋圖：

原文鏈接：http://www.ituring.com.cn/article/56184