Question

鉴于此代码：

const numberManipulator = (function() {
   this.defaultNumber = 5;

  const doubleNumber = function(num) {
    console.log(this.defaultNumber);
    return num !== undefined ? num * 2 : new Error('no number provided!');
  }

  return {
    doubleNumber
  }
})();

const test = numberManipulator.doubleNumber(20);

为什么console.log(this.defaultNumber显示undefined，但如果我console.log(defaultNumber，则会显示5？我认为后者会显示未定义。

由于

Answer 1

您应该阅读How does the “this” keyword work?

当调用IIFE时，其 this 未设置，因此它默认为全局对象，因此在：

const numberManipulator = (function() {
   this.defaultNumber = 5;
...
})();

this.defaultNumber = 5创建一个名为 defaultNumber 的全局（浏览器中的窗口）对象的属性，并为其赋值为5.

如果return语句应该是：

return {doubleNumber: doubleNumber}

然后IIFE返回对 numberManipulator 的对象引用。当被称为：

numberManipulator.doubleNumber(20)

然后在 doubleNumber 中的 numberManipulator ，它没有 defaultNumber 属性，因此{ {1}}返回 undefined 。

Answer 2

长话短说：

~~1。 IIFE正在window~~ 的 上下文中执行我错了，请参阅RobG的评论。
2. this因此指的是IIFE中的window，因为它没有默认设置你做this.defaultNumber = 5;因此等同于 window.defaultNumber = 5;
4.第二种方法在numberManipulator的上下文中执行，因此记录this.defaultNumber等同于numberManipulator.defaultNumber，这是您从未设置的。因此，它是未定义的。

关于this的说明：

在任何函数中，this关键字指的是执行函数的 当前上下文 。在代码库中定义该函数的位置并不重要。在你称之为什么背景下，这一切都很重要。在您目前的情况下，您在窗口的上下文中调用IIFE。这样做的：

const numberManipulator = (function() { // MAGIC })();

相当于：

在window上下文中运行IIFE。

将返回的结果分配给常量。

但是，可以使用.call，.apply或简单地将该方法作为另一个对象的属性来更改函数的上下文。在您的第二个日志this.defaultNumber中，this引用了对象，因为您使用numberManipulator.doubleNumber(20);调用了该方法。使用object.prop()调用方法会将其上下文（=this）设置为object。

希望有所帮助！：d

为什么this.defaultNumber未定义？试图了解IIFE

2 个答案: