JavaScript原型继承工作原理

译者按：这篇文章原是出自著名的前端博主阮一峰一篇关于JS原型继承的文章：Javascript继承机制的设计思想中的引用。这篇文章对于原型继承讲解详细，令人读之有拨云见日之感，作者在文章里说：

我一直很难理解Javascript语言的继承机制。

它没有“子类”和“父类”的概念，也没有“类”（class）和“实例”（instance）的区分，全靠一种很奇特的“原型链”（prototype chain）模式，来实现继承。

我花了很多时间，学习这个部分，还做了很多笔记。但是都属于强行记忆，无法从根本上理解。

直到昨天，我读到法国程序员Vjeux的解释，才恍然大悟，完全明白了Javascript为什么这样设计。

不过说来惭愧，本人面向对象学的不是很好，对于传统的继承思想其实理解的并不深刻，所以JS的在程序语言里特立独行的原型继承对我来说就是第一个深入理解的继承思想。我也特别想知道这篇令作者恍然大悟的文章究竟讲的如何，于是特意翻译一下，以飨读者。

原文链接：Javascript – How Prototypal Inheritance really works

JavaScript采用原型继承这事儿是众所皆知的，但由于它默认只提供了一个实现的实例，也就是 new运算符，因此对于它的解释总是令人困惑。这篇文章旨在阐明什么是原型继承以及在JavaScript中究竟如何使用原型继承。

原型继承的定义

当你阅读关于JS原型继承的解释时，你时常会看到以下这段文字：

当查找一个对象的属性时，JavaScript 会向上遍历原型链，直到找到给定名称的属性为止。——出自JavaScript秘密花园

大多数JavaScript的实现用 __proto__ 属性来表示一个对象的原型链。在这篇文章里我们将看到__proto__与 prototype 的区别何在。

注：__proto__ 是一个不应在你代码中出现的非正规的用法，这里仅仅用它来解释JavaScript原型继承的工作原理。

以下代码展示了JS引擎如何查找属性：

  1.  
    function getProperty(obj, prop) {
  2.  
    if (obj.hasOwnProperty(prop))
  3.  
    return obj[prop]
  4.  
     
  5.  
    else if (obj.__proto__ !== null)
  6.  
    return getProperty(obj.__proto__, prop)
  7.  
     
  8.  
    else
  9.  
    return undefined
  10.  
    }

让我们举一个常见的例子：二维点，拥有二维坐标 x y ，同似拥有一个 print 方法。

用之前我们说过的原型继承的定义，我们创建一个对象 Point ，拥有三个属性：x，y 和 print。为了能创建一个新的二维点，我们需要创建一个新的对象，让他其中的 __proto__ 属性指向Point ：

  1.  
    var Point = {
  2.  
    x: 0,
  3.  
    y: 0,
  4.  
    print: function () { console.log(this.x, this.y); }
  5.  
    };
  6.  
     
  7.  
    var p = {x: 10, y: 20, __proto__: Point};
  8.  
    p.print(); // 10 20

JavaScript怪异的原型继承

令人困惑的是，每个教授原型继承的人都不会给出上面那样的代码，反而会给出下面这样的代码：

  1.  
    function Point(x, y) {
  2.  
    this.x = x;
  3.  
    this.y = y;
  4.  
    }
  5.  
    Point.prototype = {
  6.  
    print: function () { console.log(this.x, this.y); }
  7.  
    };
  8.  
     
  9.  
    var p = new Point(10, 20);
  10.  
    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代码实现一下：

  1.  
    function New (f) {
  2.  
    var n = { '__proto__': f.prototype }; /*第一步*/
  3.  
    return function () {
  4.  
    f.apply(n, arguments); /*第二步*/
  5.  
    return n; /*第三步*/
  6.  
    };
  7.  
    }

一个小小的例子来看一下他的工作状况：

  1.  
    function Point(x, y) {
  2.  
    this.x = x;
  3.  
    this.y = y;
  4.  
    }
  5.  
    Point.prototype = {
  6.  
    print: function () { console.log(this.x, this.y); }
  7.  
    };
  8.  
     
  9.  
    var p1 = new Point(10, 20);
  10.  
    p1.print(); // 10 20
  11.  
    console.log(p1 instanceof Point); // true
  12.  
     
  13.  
    var p2 = New (Point)(10, 20);
  14.  
    p2.print(); // 10 20
  15.  
    console.log(p2 instanceof Point); // true

JavaScript中真正的原型继承

JS的ECMA规范只允许我们采用 new 运算符来进行原型继承。但是大宗师 Douglas Crockford 却发现了一种可以利用 new 来实现真正的原型继承的方式！他写下了 Object.create 函数如下：

  1.  
    Object.create = function (parent) {
  2.  
    function F() {}
  3.  
    F.prototype = parent;
  4.  
    return new F();
  5.  
    };

这看起来蛮奇怪的，但却是相当的简洁：它创建了新的对象，并将其原型设置为你想设置的任意值。如果我们允许使用 __proto__ ，那我们也可以这样写：

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

下面这段代码就是让我们的 Point 采用真正的原型继承：

  1.  
    var Point = {
  2.  
    x: 0,
  3.  
    y: 0,
  4.  
    print: function () { console.log(this.x, this.y); }
  5.  
    };
  6.  
     
  7.  
    var p = Object.create(Point);
  8.  
    p.x = 10;
  9.  
    p.y = 20;
  10.  
    p.print(); // 10 20

结论

我们已经了解了JS原型继承是什么，以及JS如何用特定的方式来实现之。然而使用真正的原型继承（如 Object.create 以及 __proto__）还是存在以下缺点：

  • 标准性差：__proto__ 不是一个标准用法，甚至是一个不赞成使用的用法。同时原生态的Object.create 和道爷写的原版也不尽相同。
  • 优化性差： 不论是原生的还是自定义的 Object.create ，其性能都远没有 new 的优化程度高，前者要比后者慢高达10倍。

附图，ECMA中的原型继承解释图：

enter image description here

译者的理解

实际上我觉得这篇文章所说还是十分的晦涩，没有阮一峰的原文写的深入浅出。这里还是推荐要了解原型继承和JS面向对象编程的读者阅读阮一峰的四篇博文：

这里简单的说一下我的理解：

  1. 为什么不推荐使用原型链 __proto__ 的写法？因为这样会对下游的子类开放对整个原型链的操作权限，也就是在子类中就可以对由上游父类产生的原型链进行修改，这一点是十分危险的。比如：

    1.  
      var P = new function(){}
    2.  
      P.prototype.name = 'parent'
    3.  
      var a = new P()
    4.  
      a.name // 'parent'
    5.  
      a.__proto__ === P.prototype //true
    6.  
      a.__proto__.name = 'child'
    7.  
      P.prototype.name // 被修改为'child'

  2. 原型继承到底继承了什么？实际上就是继承了构造函数和原型链两个东西。其中构造函数继承是用 apply() 实现的，这就意味着仅仅是把父类里面的属性复制了一遍，对其进行任何的更改，都不会影响其他的实例，在继承之后对父类进行任何更改也不会影响其子类。而对于原型链的继承，则是表示子类和父类共用原型链上的属性和方法，对于原型链的更改只能从上游源头进行修改，当然子类可以重写父类的方法，不过这样做实际上就是先给子类增添一个重名的方法，而导致JS引擎先调用此方法而不去调用原型链的方法。

  3. 大宗师的代码到底干了什么？道爷的代码主要是把刚才的构造函数继承都抛弃了，把所有父类的属性全部放在原型链上，让子类直接引用。这样是相当的节省内存的，这时子类如果想更改某一属性，则就会遵循2中所说的重写的方法。而且道爷这样写，父类就可以是任意的对象，而不必要非是函数，理解起来比JS晦涩的原生继承好的多。

posted @ 2018-10-12 13:26  xiezhenzhong  阅读(887)  评论(0)  编辑  收藏  举报