Question

我正在学习es6，并且资助了一个奇怪的问题节点和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});

镀铬

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

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

foo();

回调函数是一个箭头函数，它没有自己的上下文，因此this指的是全局上下文，对于节点环境是global，对于浏览器是window。因此，您可以获得true，与环境无关。
foo.call({id:42});

在这种情况下，您传递一个上下文对象{id: 42}。与上一个示例类似，只要回调是一个箭头函数并且没有自己的上下文this指代父上下文（即{id: 42}），这就是为什么您获得false的原因节点和浏览器环境。
foo1(); and foo1.call({id: 42})在浏览器中。

foo1函数的主要区别在于，回调是一个普通的函数，具有自己的上下文。对于浏览器，在全局上下文或您传递的上下文上调用foo1函数都没有关系。在您的情况下，回调函数将始终具有自己的回调函数，并且将为window。这就是为什么您在浏览器中遇到这两种情况都得到true的原因。
foo1(); and foo1.call({id: 42})

节点env中的情况几乎相同。回调函数的上下文被全局上下文或您传递的上下文遮蔽。但是，如果检查this指的是什么，就会发现它是Timeout而不是global。这就是为什么在节点环境中这两种情况都得到false的原因。

节点和Chrome之间的不同结果

1 个答案: