javascript - 我的小程序中的新运算符

Question

大家好，我有下面这个小程序:

function foo() {
  this.x = 2;
  return this;
}


var y = foo();
var g = foo();                                                                                                             
g.x = 3;
console.log("y", y.x); // 3
console.log("g", g.x); // 3
console.log("this", this.x); //3

现在所有 3 个 console.logs 打印 3 ，我猜第一个 console.log 打印 3 因为 y.x 被 g.x 覆盖但是我不太明白为什么 this.x 打印 3 ，因为我没有 this.x全局范围。

我的第一个问题:为什么 this.x 打印 3 ？

现在，如果我原来的程序员按以下方式更正(基本上我正在添加新的运算符):

function foo() {
              this.x = 2;
              return this;
            }

            var y = new foo();
            var g =  new foo();                                                                                                             
            g.x = 3;
            console.log("y", y.x);   // 2
            console.log("g", g.x);   // 3
            console.log("this", this.x); // undefined

我得到了更可预测的结果，或者更确切地说是预期的结果(查看评论)。

我不知道新运算符有什么不同，现在我浏览了 SO 并在下面找到了这个线程:

New operator

我也看到了 MDN 文档，但我仍然很困惑。

有人可以回答我的第一个问题，然后还告诉我最重要的，新的运营商有什么不同吗？在我的示例中，让您的回答简洁明了，只需告诉我新运算符给我想要的结果的确切原因？

谢谢。

亚历山大。

Answer 1

要确定函数中 this 的值，Javascript 会查看您如何调用此函数:

• 如果您使用 .apply(或 .call)调用它，如 foo.call(someObj)，this 是第一个参数的值
• 如果函数调用前有new，则this是新创建的对象
• 如果函数前面有一个点(或括号)，如 someObj.foo()，this 就是点之前的内容(someObj 此处)
• 如果函数名前没有任何内容，this 是全局对象(window 如果您在浏览器中运行)

^{注意:以上内容有意简化，请参阅 standard完整图片(搜索“thisArg”)}

因此，在您的第一个代码段中，您修改了 Global 对象并将其返回。在第二个片段中，您修改并返回一个由 new 创建的新对象。