省略 'new' 关键字导致 javascript 构造函数中出现无法解释的问题

Question

我是javascript的新手，正在研究构造函数和new关键字。故意省略 new 后，它引起了一些问题，我无法理解为什么会这样。

let Fruit = function (person, color) {
    this.person = person;
    this.color = color;
    this.displayInfo = function () {
        console.log(this.person + " is " + this.color);
    }
}
let altFruit = function (person, color) {
    this.person = person;
    this.color = color;
}

let a1 = altFruit('Banana', 'Yellow');   //new keyword not written
let f1 = new Fruit('Orange', 'orange');

let aFunction = f1.displayInfo;
aFunction();

我在初始化对象a1时没有写new。我将函数 f1.displayinfo 存储在一个变量中，然后调用它。预期输出是 undefined is undefined，但我得到的是 Banana is Yellow.

真是莫名其妙，因为aFunction与altFruit构造函数或a1无关。另外，即使看了很多教程，我仍然不明白 new 的确切含义是什么，因为只有在我省略它时才会出现这种奇怪的输出。

Answer 1

this 的值取决于函数的调用方式。

在非严格模式下，当你调用不带new关键字的altFruit函数时，里面的this会引用全局的window对象。所以，

this.person = person;

将在全局 window 对象上添加 person 属性。（您可以通过在代码末尾的控制台上记录 window.person 来测试它）。

当你调用aFunction时，在非严格模式下，displayInfo函数中this的值将引用全局window对象。

简而言之，您的代码分别向全局 window 对象添加属性和从中读取属性。

"new"运算符

new 运算符用于创建用户定义对象类型（如 Fruit）或内置对象类型（如 Array、Date、等）。

当您调用 new Fruit(...) 时，new 运算符将执行以下操作：

创建新对象
在指向Fruit.prototype对象的新建对象上添加__proto__属性。
将Fruit构造函数中的this指向新创建的对象。
Return 从 Fruit 构造函数中新创建的对象。

详情请见：MDN: new operator

省略 'new' 关键字导致 javascript 构造函数中出现无法解释的问题

Omitting 'new' keyword causing unexplainable problems in javascript constructor function

javascript

new-operator

"new"运算符