变量在setTimeout内部表示它未定义，但在setTimeout外部表示它已定义[duplicate]

Question

我有课。我需要在超时内做一些http工作。我面临的问题是超时内的http变量一直说它是未定义的。

export class MyClass {

    http:Http:

    constructor(private http:Http) {
        this.http = http;
    }

    sendFriendRequest(){

    this.http.post( ...//http variable is defined here
           setTimeout(function(){
               this.http.post(...  //http is not defined here
        }
   }
}

Answer 1

您应该在这里使用箭头函数，以保留它的存在。

setTimeout(()=>{
   this.http.post(...  //http is not defined here
})

这样做时，函数内部的this被绑定到外部上下文。它与以下内容相同：

setTimeout(function(){
    this.http.post();
}.bind(this));

Answer 2

在JavaScript中，this关键字用于访问调用函数的context。无论使用.methodName()语法或不使用它调用JavaScript中的函数，都将使用上下文调用函数，除非在当前作用域中设置了“use strict”标志。

在没有上下文的情况下调用函数时：

myFunction()

运行库假定上下文是全局窗口对象（除非设置了“use strict”标志，在这种情况下，上下文将未定义）

注意：当使用ES6与像Babel这样的transpiler时，输出中默认设置了严格模式。

当对一个函数的引用保存在一个对象上时，您可以使用点语法将该对象作为“this”的上下文调用该函数。

var myObj = {
    myFunc: function(){}
};

// myFunc invoked like this, the value of 'this' inside myFunc will be myObj.
myObj.myFunc();

操纵“this”：

调用并应用

通过使用.call或.apply方法调用函数，始终可以更改函数的上下文。在本例中，您有一个匿名函数，它不是由您调用的，而是由setTimeout函数调用的。正因为如此，您将无法利用.调用或.应用。

绑定

相反，您可以使用.bind方法创建一个具有自定义上下文的新函数。通过对匿名函数调用.bind（），将返回一个新函数，该函数将您的自定义上下文绑定到“this”。这样，您就可以将自定义绑定函数作为数据传递给SetTimeout。

setTimeout(function(){
   // your code.
}.bind(this), 1000);

现在，在匿名函数中，'this'关键字将绑定到正确的值。

词汇“this”：

然而，在ES6中，当使用箭头函数时，关于“this”的规则发生了变化。如果您使用这个语法，您将看到“this”的上下文将与当前范围中的上下文保持相同。

setTimeout(() => {
    // Hey I can access 'this' in here!
}, 1000);

保存引用：

如果您查看Babel的编译输出，您将看到Babel通过使用_this1、_this2等保存对“this”的引用来跟踪上下文。

要自己使用这个方法，只需声明一个新变量（通常使用'that'或'self')，并在匿名函数中使用它访问值，如下所示：

var self = this;
setTimeout(function(){
    self.http.post...
}); 

希望这有帮助。

关于更多的解释，Developer.mozilla.org有一篇很好的文章描述了“this”在函数范围内的行为。

Answer 3

这是因为setTimeout内部的回调函数处于不同的词法环境中。这就是为什么在ES6+中可以使用=>定义函数的原因。这样，函数中的代码就与该函数共享相同的作用域。

要解决此问题，您可以使用ES6+语法，其中使用function(a,b,args）{...}，而不是function(a,b,args)=>{...}:

setTimeout(() => {
  this.http.post(...);
});

或使用ES5语法：

var root = this;

setTimeout(function(){
    root.http.post(...);
});

希望这有帮助！