JavaScript 构造函数——理解继承

Question

我正在学习如何使用构造函数在 JavaScript 中实现 OOP，但我对如何创建子类型感到困惑。

我目前的理解是，new 关键字是在幕后执行以下操作的内容:

• 创建一个空的this对象
• 设置this对象的__proto__属性指向构造函数的prototype属性
• 返回this对象

这就是为什么我们不必从我们的构造函数显式返回一个对象，new 关键字为我们做了这件事。

在下面的示例中，我创建了 User 类型的 PaidUser 子类型:

function User(name) {
  this.name = name;
}

function PaidUser(name, balance) {
  User.call(this, name);
  this.balance = balance;
}

下面是我看到的示例，我从 PaidUser 类型中的 User 类型属性进行扩展，并在 this 中设置上下文User 构造函数指向词法 this 与 User.call(this,...)

我的困惑在于 User.call() 如何影响 PaidUser 构造函数中 new 关键字隐式返回的内容？

例如，在 PaidUser 构造函数中，我将 this.balance 属性定义为 this 对象，现在我的理解是this 对象，当使用 new 关键字调用时，它将从 PaidUser 构造函数返回。 User.call(this, name) 如何返回或影响从 PaidUser 构造函数返回的对象。

目前根据我的理解，这就是幕后发生的想象:

function PaidUser(name, balance) {
  this = {
  __proto__:PaidUser.prototype
  };
  this.balance = balance;
  User.call(this, name); // {this.name:name}; //lexical this
                         // why is the object returned from User.call() just floating around
                         // neither assigned to a variable or returned ?

  return this;  // how does this.name ever become part of the returned object?
}

对于调用 PaidUser 构造函数时 new 关键字所采取的步骤的任何帮助和解释，我将不胜感激。

非常感谢和赞赏。

Answer 1

My confusion is regarding how does User.call() affect what is implicitly returned by the new keyword from the PaidUser constructor?

理解这种情况如何发生的关键是理解传递给函数的对象会在函数外部受到影响:

//function that takes an object and mutates it
function fn(o) {
  o.hello = "universe";
}

//a simple object
var obj = {
  hello: "world"
};

console.log("before calling the function", obj);

//call the function with the object
fn(obj);

console.log("after calling the function", obj);

因此，对象可以在函数内部发生变化，它也会影响函数外部的对象。

当您调用 User.call(this, name); 时，也会发生这种情况 User 构造函数的主体是 this.name = name 改变了 this 上下文。由于 this 上下文是一个对象，它会在函数外发生变化。由于它有效地改变了 new PaidUser 的 this 上下文，因此代码执行此操作:

function PaidUser(name, balance) {
  this.name = name; //contents of User.call(this, name);
  this.balance = balance;
}

所以，它实际上并没有看起来那么神奇。 new 关键字在整个过程中唯一起作用的部分是 new PaidUser 将创建一个新对象并将其设置为 this 上下文。您可以通过执行以下操作来模拟类似的效果:

function User(name) {
  this.name = name;
}

function PaidUser(name, balance) {
  User.call(this, name);
  this.balance = balance;
}

var obj = {};

PaidUser.call(obj, "Fred", 1234);

console.log(obj);

这并没有完成 new 关键字所做的所有事情 - 它不会设置原型(prototype)，不会使构造函数隐式返回 this，但它仍然会创建一个新对象并将其放入所有作业中。由于我们引用了该对象，我们可以事后检查它并看到代码确实有效完成了obj.name = name 和obj.balance = balance 。