javascript - 节点和 Chrome 之间的不同结果

Question

我正在学习 es6，并且遇到了一个奇怪的问题'this' 在 node 和 chrome 环境之间是不同的在节点中

var id = 32;
function foo(){
  setTimeout(()=> {
    // console.log('id=>',this.id);
    console.log('id=>',this === global);
    // console.log(this)
    console.log('*---------*');
  },100);
}

function foo1(){
  setTimeout(function(){
    // console.log('id !=>', this.id);
    console.log('id !=>',this === global);
    // console.log(this);
    console.log('*---------*');
  }, 100);
}
foo();
foo1();
foo.call({id:42});
foo1.call({id: 33});

在 Chrome 中

var id = 32;
function foo(){
  setTimeout(()=> {
    // console.log('id=>',this.id);
    console.log('id=>',this === window);
    // console.log(this);
  },100);
}

function foo1(){
  setTimeout(function(){
    // console.log('id !=>', this.id);
    console.log('id !=>',this === window);
    // console.log(this);
  }, 100);
}

foo();
foo1();
foo.call({id:42});
foo1.call({id: 33});

节点中的结果是

 true false false false

在 chrome 中这个结果是

 true true false true

为什么？

Answer 1

让我们分别检查每个示例。

1. foo();

   回调函数是一个箭头函数，它没有自己的上下文，所以 this 指的是全局上下文，对于节点环境和 window 是 global 用于浏览器。因此，您可以独立于环境获得 true。

2. foo.call({id:42});

   在这种情况下，您传递了一个上下文对象，它是 {id: 42}。与前面的示例类似，只要回调是箭头函数并且没有自己的上下文 this 引用父上下文(即 {id: 42})并且这就是为什么您在节点和浏览器环境中都得到 false 的原因。

3. foo1();和 foo1.call({id: 42}) 在浏览器中。

   foo1 函数的主要区别在于回调是一个普通函数，它有自己的上下文。对于浏览器，foo1 函数是在全局上下文中调用还是在您传递的上下文中调用都没有关系。在您的情况下，回调函数将始终有自己的回调函数，它将是 window。这就是为什么您在浏览器中对这两种情况都得到 true 的原因。

4. foo1();和节点环境中的 foo1.call({id: 42})。

   node env 中的情况非常相似。回调函数的上下文从全局上下文或您传递的上下文中隐藏。但是，如果您检查 this 指的是什么，您会发现它是一个 Timeout 而不是 global。这就是为什么您在节点环境中对这两种情况都得到 false 的原因。