使用 Object.assign 和 Object.create 进行继承

Question

我通常按照以下方式实现继承。

function Animal () { this.x = 0; this.y = 0;}

Animal.prototype.locate = function() { 
  console.log(this.x, this.y);
  return this;
};
Animal.prototype.move = function(x, y) {
  this.x = this.x + x;
  this.y = this.y + y; 
  return this;
}


function Duck () {
    Animal.call(this);
}

Duck.prototype = new Animal();
Duck.prototype.constructor = Duck;
Duck.prototype.speak = function () {
    console.log("quack");
    return this;
}

var daffy = new Duck();

daffy.move(6, 7).locate().speak();

我已经阅读了this post by Eric Elliott，如果我理解正确，我可以使用Object.create 和Object.assign 来代替吗？真的那么简单吗？

var animal = {
   x : 0,
   y : 0,
   locate : function () { 
     console.log(this.x, this.y);
     return this;
   },
   move : function (x, y) { 
     this.x = this.x + x; 
     this.y = this.y + y;
     return this;
   }
}

var duck = function () {
   return Object.assign(Object.create(animal), {
     speak : function () { 
       console.log("quack");
       return this;
     }
   });
}

var daffy = duck();

daffy.move(6, 7).locate().speak();

顺便说一句，按照惯例，构造函数是大写的，作为构造函数的对象字面量也应该大写吗？

我知道这里有很多问题在讨论 new 与 Object.create，但它们似乎通常与 Duck.prototype = new Animal(); 与 Duck.prototype = Object.create(Animal.prototype); 有关

Answer 1

是的，就是这么简单。在您使用Object.create/Object.assign 的示例中，您使用工厂函数来创建duck 的新实例（类似于如果您选择带有var body = $('body') 的元素，jQuery 创建新实例的方式）。这种代码风格的一个优点是，当你想创建一个新的 duck 实例（与 ES2015 类相反）时，它不会强制你调用 animal 的构造函数。

初始化的区别

也许一个有趣的花絮与使用构造函数（或任何其他初始化函数）的工作方式略有不同：

创建duck 实例时，animal 的所有属性都在duck 实例的[[Prototype]] 槽中。

var daffy = duck();
console.log(daffy); // Object { speak: function() }

所以daffy 还没有任何自己的x 和y 属性。但是，当您调用以下内容时，它们将被添加：

daffy.move(6, 7);
console.log(daffy); // Object { speak: function(), x: 6, y: 7 }

为什么？在animal.move的函数体中，我们有如下语句：

this.x = this.x + x; 

所以当你用daffy.move 调用它时，this 指的是daffy。所以它会尝试将this.x + x分配给this.x。由于尚未定义this.x，因此daffy 的[[Prototype]] 链将向下遍历到animal，其中定义了animal.x。

因此在第一次调用中，赋值右侧的this.x 指的是animal.x，因为daffy.x 没有定义。第二次调用daffy.move(1,2)，右侧的this.x将是daffy.x。

替代语法

或者，您也可以使用Object.setPrototypeOf 代替Object.create/Object.assign (OLOO Style)：

var duck = function () {
   var duckObject = {
       speak : function () { 
           console.log("quack");
           return this;
       }
   };
   return Object.setPrototypeOf(duckObject, animal);
}

命名约定

我不知道任何既定的约定。 Kyle Simpson 在 OLOO 中使用大写字母，Eric Elliot 似乎使用小写字母。就我个人而言，我会坚持使用小写字母，因为充当构造函数的对象字面量本身已经是完全成熟的对象（不仅仅是蓝图，就像类一样）。

单例

如果你只想要一个实例（例如单例），你可以直接调用它：

var duck = Object.assign(Object.create(animal), {
    speak : function () { 
        console.log("quack");
        return this;
    }
});

duck.move(6, 7).locate().speak();

Answer 2

我已经阅读了this post by Eric Elliott，如果我理解正确，我可以使用Object.create 和Object.assign 来代替吗？真的这么简单吗？

是的，create 和 assign 更简单，因为它们是原始的，并且发生的魔法更少 - 你所做的一切都是明确的。

但是，Eric 的 mouse 示例有点令人困惑，因为他遗漏了一步，并将从动物继承的鼠标与实例化鼠标混合在一起。

不如让我们再次尝试转录你的小鸭示例 - 让我们从字面上开始：

const animal = {
  constructor() {
    this.x = 0;
    this.y = 0;
    return this;
  },
  locate() { 
    console.log(this.x, this.y);
    return this;
  },
  move(x, y) {
    this.x += x;
    this.y += y; 
    return this;
  }
};
const duck = Object.assign(Object.create(animal), {
  constructor() {
    return animal.constructor.call(this);
  },
  speak() {
    console.log("quack");
    return this;
  }
});
/* alternatively: 
const duck = Object.setPrototypeOf({
  constructor() {
    return super.constructor(); // super doesn't work with `Object.assign`
  },
  speak() { … }
}, animal); */

let daffy = Object.create(duck).constructor();
daffy.move(6, 7).locate().speak();

您应该看到这里发生的事情与使用构造函数（或class 语法）没有什么不同，我们只是将原型直接存储在变量中，并且我们正在通过显式调用来进行实例化create 和 constructor。

现在你可以发现我们的duck.constructor 除了调用它的超级方法什么都不做，所以我们实际上可以完全省略它，让继承来完成它的工作：

const duck = Object.assign(Object.create(animal), {
  speak() {
    console.log("quack");
    return this;
  }
});

另一个经常改变的是实例属性的初始化。如果我们真的不需要它们，实际上没有理由初始化它们，在原型上放置一些 默认值 就足够了：

const animal = {
  x: 0,
  y: 0,
  locate() { 
    console.log(this.x, this.y);
  }
};
const duck = … Object.create(animal) …;

let daffy = Object.create(duck); // no constructor call any more!
daffy.x = 5; // instance initialisation by explicit assignment
daffy.locate();

这个问题是it only works for primitive values，它变得重复了。这是工厂函数进入的地方：

function makeDuck(x, y) {
    return Object.assign(Object.create(duck), {x, y});
}
let daffy = makeDuck(5, 0);

为了便于继承，初始化通常不在工厂中完成，而是在专用方法中完成，因此它也可以在“子类”实例上调用。这个方法你可以叫init，也可以叫constructor，和我上面做的一样，基本一样。

顺便说一句，按照惯例，构造函数是大写的，作为构造函数的对象字面量也应该大写吗？

如果你不使用任何构造函数，你可以为大写的变量名赋予新的含义，是的。然而，对于不习惯这一点的每个人来说，这可能会让人感到困惑。顺便说一句，它们不是“充当构造函数的对象字面量”，它们只是 原型对象。

Answer 3

您应该考虑打算使用哪种类型的“实例化模式”，而不是“继承”。它们有不同的实施目的。

顶部示例是原型，底部示例是功能共享的。看看这个链接：JS Instantiation patterns

另外，这与 es6 无关。