原型继承(翻译 vjeux 文章)

Javascript——原型继承是如何实现的

在网页上我们随处可见说javascript是一种原型继承。然而javascript仅仅默认地在使用new操作符的这种特殊情况下提供了原型继承。因此，许多js的解读都让人感到很迷惑。
这篇文章用于阐述什么是原型继承以及如何在js中使用原型继承。

原型继承的目的：在 js 中实现一种对象之间的资源（对象属性）共享。

原型继承的定义

关于js的原型继承，你常会看到如下定义：

当访问一个对象的属性时，js会沿着原型链向上遍历直到寻找到匹配的属性。

大多数js实现使用 proto 属性来代表原型链中的下一层对象。在这篇文章中我们会看到 proto 和 prototype 究竟有什么不同之处。

注意： proto 是一种非标准表示方式，你不应该将其用在你的代码中。在这篇文章中我们用它来描述js继承是如何实现的。

下面代码显示了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
  }
}

让我们来看一个经典的案例：一个2D点元素。一个点有两个坐标 x 和 y 以及一个方法 print。
使用之前我们所写的原型继承方法，我们将创建一个 Point 对象以及它的三个属性： x, y, 和 point。要创建一个新的点，我们只需要使用设置在 Point对象上的 proto 来创建一个新的对象。

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奇怪的原型继承

让人迷惑的是每个教授js原型继承的人都给了这样的定义却没有给如上的代码。他们所给的代码像下面这样：

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 想要将 Javascript 设计成一种传统的面向对象的编程语言，如同 Java h和 C++ 那样。在这些语言中，我们使用 new 操作符来创建一个类的实例。所以他为 Javascript 添加了 new 操作符。

C++ 有构造函数( constructor )的概念，用于初始化实例属性。因此，new 操作符必须的作用对象必须是一个函数。
我们必须把对象的方法放在某一处。由于我们使用的是一种原型语言，让我们把它置于函数的原型属性中。

new 操作符创建一个带参数的 F 函数: new F(arguments…)。通过如下三步来实现：

创建类的实例: 这是一个将 proto 属性设置在 F.prototype 上的空对象。
初始化实例： F函数调用时接受传入的参数并且将 this 指向这个实例。
返回实例
现在我们理解了 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

js中真正的原型继承

js规范仅为我们提供了 new 操作符可以使用。Douglas Crockford 找到了一种利用 new 操作符来实现原型继承的方法！他创造了 Object.create 函数。

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

这种写法看起来很奇怪但它的工作原理很简单。它仅仅根据设置在这个函数上的原型来创建了一个新的对象。如果我们可以使用 proto 它的写法将会是这个样子：

1
2
3

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

下面的代码是我们使用真正的原型继承来创建的一个点。

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 仅仅是用了一种特别的方法来实现它。
然而，使用原型继承（Object.create and proto）也存在一些缺点：

非标准：proto 不是标准化的东西甚至被弃用。原生的 Object.create 和 Douglas Crockford 的实现也不完全相同。
未优化：与 new 构造函数（原生或自定义）相比Object.create 还没有被深度严格优化, 后者甚至慢十倍。

另外

如果你能够通过下面的图理解原型继承是如何工作的，Congratulations！

Vjeux英文原文链接

Javascript——原型继承是如何实现的