5.1. JavaScript 原型继承工作原理

2018-11-08 本文已影响0人牧羊少年之奇幻之旅

英文原文链接: 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中的原型继承解释图：

objectprototyperelationship.png

5.1. JavaScript 原型继承工作原理

原型继承的定义

JavaScript 怪异的原型继承

new 运算符是如何工作的

JavaScript 中真正的原型继承

结论

原型继承相关文章:

猜你喜欢

热点阅读