IIFE 和 JavaScript 中立即调用的构造函数 function 之间的细微差别是什么？

Question

我正试图围绕 IIFE 和 Javascript 中的立即调用构造函数 Function 之间的细微差别。

从我可以从下面的代码中收集到的信息，这两个函数的行为类似于匿名函数，因为它们不能被多次调用。 唯一的区别是它们都被立即调用，因此称为“立即调用”。 但我不明白你为什么要使用立即调用的构造函数 Function，因为我认为构造函数 function 的全部意义在于为初始化对象创建可重用代码？ 特别是因为我的印象是我可以编写一个 IIFE 来做与立即调用的构造函数 Function 相同的事情......我在正确的轨道上......还是我完全离开了？

立即调用 Function 表达式。

(function(userName){
this.name = userName;
this.hasBuildingRights = false;
})("Bob the Builder");

立即调用构造函数 Function。

let user = new function(userName){
this.name = userName;
this.hasBuildingRights = false;
};

感谢您帮助我提前了解！

Answer 1

如果您在全局 scope 中声明了 IIFE，它将在 window object 中创建一个名为 name 的变量，其值为“Bob the Builder”。

我在下面打印了第一个示例的 this。

Window {0: Window, window: Window, self: Window, document: document, name: 'Bob the Builder', location: Location, …}

IIFE 不仅用于立即调用 function，还用于控制“this”关键字的行为。 因此，在示例中，“this”采用全局 scope，如果在全局中声明，它将创建名称变量。

来到第二个例子，它将创建一个新的 object 类型为“function”。

{ name: undefined }

在 object 的原型中，将有一个带有您定义的 function 的构造函数。 （不张贴在这里，因为很难得到正确的缩进）。

IIFE 和构造函数在这里做了两个不同的工作。

如果您想使用用户名“Bob the builder”创建一个新的 object，我建议先创建一个 class 并定义一个构造函数来设置名称？ （注意将名称设置为空变量不是必须的，如果您愿意，可以跳过它）

class User {
    name = '';
    constructor(name) {
        this.name = name;
    }
}

let user = new User('Bob the builder');

这将创建一个名为 object 的用户，如下所示

User {name: 'Bob the builder'}