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 创建的新对象。