javascript - 从 JS 中的构造函数返回 this

Question

如果我在 JavaScript 中有一个构造函数，我希望能够显式返回一些东西，以便在团队中工作时一切都清楚。

我读到如果你在 JS 中使用一个函数作为构造函数，如果你返回任何东西，那么使用 new 关键字将是一种浪费。但我想知道您是否可以从构造函数返回 this 并且是安全的，例如:

function MyConstructor(val){

      this.val = val;
      return this;   //attention here

}

var example = new MyConstructor(val);

这是否会产生所需的行为？

Answer 1

让我们从 JavaScript 的正常行为开始。如果您不从构造函数返回任何内容，它将按预期工作(当然)。

因此

var Dog = function (name) {
  this.name = name;
};

var alice = new Dog('Alice');

生成一个新对象，其 name 属性设置为 Alice。

现在，如果您尝试通过显式调用来覆盖构造函数的隐式 return 语句，会发生什么情况？

让我们介绍一个返回其他内容的return语句:

var Dog = function (name) {
  this.name = name;
  return 23;
};

var alice = new Dog('Alice');

alice 现在是什么值？您可能希望它是 23，但实际上不是。它仍然是一个 name 属性设置为 Alice 的对象。

这里的问题是 JavaScript 比你聪明:它看到了你的 return，但意识到你想要返回的东西的类型与调用函数的事实不匹配新。因此 return 被忽略。

现在，如果我们尝试变得比 JavaScript 更聪明并返回类型匹配的东西(即对象)怎么办？

var Dog = function (name) {
  this.name = name;
  return { foo: 'bar' };
};

var alice = new Dog('Alice');

在这种情况下，JavaScript 认为您有充分的理由覆盖隐式 return 并实际使用您的。这意味着 alice 现在指向一个对象，该对象的 foo 属性设置为 'bar'。

所以，长话短说:如果您显式调用

return this;

最后一个案例。您覆盖隐式返回的对象。但是由于您返回的那个实际上与隐式返回的那个相同，所以没有区别。

所以:是的，它是一样的，但是调用 return this; 不是必需的。

一些开发人员使用这种行为来欺骗 JavaScript 总是返回一个新对象，无论您是否调用带有或不带有 new 的构造函数:

var Dog = function (name) {
  return {
    name: name
  };
};

var alice1 = new Dog('Alice');
var alice2 = Dog('Alice');

这两个调用都会产生一个新对象，其 name 属性设置为 Alice，但与前面的示例存在一些差异:

• 这两个对象都只是对象字面量，其constructor 属性未设置为Dog，它们都没有使用预期的原型(prototype)链。
• 在 with new 的情况下，实际上正在创建两个对象:一个由 new 创建，另一个由您使用对象字面量语法创建。这意味着垃圾收集器需要做更多的工作。

因此，我认为您应该避免这种技术，并且要么正确使用构造函数，要么坚持使用工厂函数。

这与 @maboiteaspam's answer 中使用的效果相同:

function DHT (opts) {
  var self = this
  if (!(self instanceof DHT)) return new DHT(opts)
  // ctor body
}

如果你用new调用这个函数，this被设置为一个对象，它的constructor属性指向DHT功能。因此 self instanceof DHT 返回 true 并运行实际的构造函数。

如果您在没有使用 new 的情况下调用此函数，if 语句会检测到这一点并自动为您使用 new 运行它(至少比上面描述的解决方案更好，你最终有两个缺点)。

请注意，在严格模式下，不允许从未在对象上调用的函数访问 this，因此在不使用 new 关键字的情况下调用构造函数一旦您尝试访问 this 就会导致错误。