英文原文链接: Javascript – How Prototypal Inheritance really works
转载该文章中文翻译: 于明昊 - http://www.ituring.com.cn/article/56184
JavaScript 采用原型继承这事儿是众所皆知的，但由于它默认只提供了一个实现的实例，也就是new运算符，因此对于它的解释总是令人困惑，这篇文章旨在阐明什么是原型继承以及在 JavaScript 中究竟如何使用原型继承。
原型继承的定义
当你阅读关于 JS 原型继承的解释时，你时常会看到以下这段文字：
当查找一个对象的属性时，JavaScript 会向上遍历原型链，直到找到给定名称的属性为止 —— 出自 JavaScript Garden
大多数 JavaScript 的实现用__proto__属性来表示一个对象的原型链，在这篇文章里我们将看到__proto__ 与 prototype 的区别所在。
注： __proto__是一个不应在你代码中出现的非正规的用法(__proto__属性已在 ECMAScript 6 语言规范中标准化)，这里仅仅用它来解释 JavaScript 原型继承的工作原理。
以下代码展示了 JS 引擎如何查找属性(仅供阅读)：
function getProperty(obj, prop) {
if (obj.hasOwnProperty(prop)) { /* 判断对象自身属性中是否拥有指定属性 */
return obj[prop];
} else if (obj.__proto__ !== null) { /* 判断是否已检索至原型链顶端(Object.prototype.__proto__ -> null) */
return getProperty(obj.__proto__, prop);
} else {
return undefined; /* 未检索到该属性则返回 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(); // expected output: 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(); // expected output: 10, 20
这和说好的不一样啊，这里Point变成了函数，然后还有个什么prototype的属性，而且有了new 运算符。这他喵的是什么情况？
new 运算符是如何工作的
造物者 Brendan Eich 想让 JS 和传统的面向对象的编程语言差不太多，如 Java 和 C++。在这些语言里，我们采用new运算符来给类实例化一个新的对象。所以他在 JS 里写了一个 new 运算符。
- C++里有用来初始化实例属性的构造函数概念，因此
new运算符必须针对函数。 - 我们需要将对象的方法放到一个地方去，既然我们在用原型语言，我们就把它放到函数的原型属性中去。
new运算符接受一个函数F及其参数：new F(arguments...)。这一过程分为三步：
01.创建类的实例。这步是把一个空的对象的__proto__属性设置为F.prototype
02.初始化实例。函数F被传入参数并调用，关键字this被设定为该实例。
03.返回实例。
现在我们知道了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 p = new Point(10, 20);
p.print(); // expected output: 10 20;
console.log(p instanceof Point); // expected output: true
var p1 = New(Point)(10, 20);
p1.print(); // expected output: 10, 20
console.log(p1 instanceof Point); // expected output: 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(); // expected output: 10 20
结论
我们已经了解了 JS 原型继承是什么，以及 JS 如何用特定的方式来实现之。然而使用真正的原型继承（如Object.create以及__proto__）还是存在以下缺点：
-
标准性差：
__proto__不是一个标准用法(__proto__属性已在 ECMAScript 6 语言规范中标准化)，甚至是一个不赞成使用的用法。同时原生态的Object.create和道爷写的原版也不尽相同。 -
优化性差：不论是原生的还是自定义的
Object.create，其性能都远没有new的优化程度高，前者要比后者慢高达10倍(链接: http://jsperf.com/object-create-vs-crockford-vs-jorge-vs-constructor/16)。
附图，ECMA中的原型继承解释图：
原型继承相关文章:
Javascript继承机制的设计思想
白话原型和原型链
Javascript Garden: Object.prototype
JavaScript 继承
