JavaScript 继承与 .call(this) [重复]答案

【问题标题】：JavaScript inheritance with .call(this) [duplicate]JavaScript 继承与 .call(this) [重复]
【发布时间】：2015-06-23 22:06:21
【问题描述】：

代码来自MDN：

function Employee() {
    this.name = "";
    this.dept = "general";
}

function Manager() {
    Employee.call(this);
    this.reports = [];
}

Manager.prototype = Object.create( Employee.prototype );

function WorkerBee() {
    Employee.call(this);
    this.projects = [];
}

WorkerBee.prototype = Object.create( Employee.prototype );

var x = new WorkerBee();

console.log( x );

输出：WorkerBee {name: "", dept: "general", projects: Array[0]}

Employee.call(this); 有什么作用？我通过运行代码知道继承必须成功。 .call() 的文档很简单，

方法使用给定的 this 值和提供的参数调用函数个人。

好的，所以它调用构造函数Employee()，但没有使用new 运算符，也没有return 会返回对象及其属性。 Employee.call(this)如何让子对象继承父属性？

如果省略此行，则只有 projects 数组作为属性存在。

【问题讨论】：

这个问题基本上可以归结为“.call 做了什么”。 MDN documentation.
在对象上调用构造函数会在对象上设置在构造函数中定义的自己的属性。
“Employee.call(this) 是如何导致子对象继承父属性的？” 它不继承任何东西。 “如果省略这一行，则只有项目数组作为属性存在。” Employee 是做什么的？它将name 和deps 分配给this。因此我们可以得出结论Employee.call(this) 调用Employee 并将其this 设置为新对象。也许这有助于更好地理解.call：function foo() { console.log(this.name); }; foo.call({name: 'abc'}); foo.call({name: 'xyz'});。
嘿菲利克斯。我想我从你的解释中明白了。

标签： javascript inheritance

【解决方案1】：

call 所做的只是调用具有给定上下文this 的函数。在您的示例中，这意味着函数Employee 被调用，其中this 是WorkerBee 的实例。所以在这种情况下发生的情况是，当Employee 被执行时，它会创建并设置自己的属性到this 对象，此时WorkerBee。

在运行代码时检查控制台日志：

function Employee() {
    console.log(this instanceof WorkerBee);
    this.name = "";
    this.dept = "general";
}

...你会看到this确实指向WorkerBee的对象实例。

此模式用于使一个构造函数在外部宿主对象（上下文）上创建自己的属性。也称为“借用构造函数”。

【讨论】：

哦，好吧，现在很有意义。谢谢！

【解决方案2】：

Employee.call(this); 在绑定到参数的函数内运行函数 Employee 和 this。有点令人困惑的是，参数是this。当Employee.call(this); 运行时，this 是对使用new 创建的WorkerBee 对象的引用。

使用Employee.call(this);，Employee 函数将附加属性添加到WorkerBee 对象。

【讨论】：

【解决方案3】：

Employee 只是一个函数，就像任何其他函数一样。当与new 运算符一起使用时，它作用于Employee“类型”的新分配对象，但这不是调用它的唯一方法。

在您所指的场景中，它只是填充了this 的name 和dept 属性。

【讨论】：