时间戳

首页 > 解决方案 > 省略'new'关键字导致javascript构造函数出现无法解释的问题

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

问题描述

我是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();

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

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

标签： javascriptnew-operator

解决方案

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

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

this.person = person;

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

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

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

“新”运算符

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

当你打电话时new Fruit(...)，new接线员会做以下事情：

  1. 创建一个新对象

  2. __proto__在指向对象的新创建的对象上添加属性Fruit.prototype。

  3. this在构造函数内部指向Fruit新创建的对象。

  4. Fruit从构造函数返回新创建的对象。

有关更多详细信息，请参阅：MDN: new operator

推荐阅读