setTimeout函数this指针指向全局的问题

setTimeout的this会指向全局变量：

var num = 0;

function Obj (){

this.num = 1,

this.getNum = function(){

console.log(this.num);

},

this.getNumLater = function(){

setTimeout(function(){

console.log(this.num);

}, 1000)

}

}

var obj = new Obj;

obj.getNum();//1　　打印的是obj.num，值为1

obj.getNumLater()//0　　打印的是window.num，值为0

从上述例子中可以看到setTimeout中函数内的this是指向了window对象，这是由于setTimeout()调用的代码运行在与所在函数完全分离的执行环境上。这会导致这些代码中包含的this关键字会指向window(或全局)对象。

解决方法：

1.将当前对象的this存为一个变量，定时器内的函数利用闭包来访问这个变量：

var num = 0;

function Obj (){

var that = this;    //将this存为一个变量，此时的this指向obj

this.num = 1,

this.getNum = function(){

console.log(this.num);

},

this.getNumLater = function(){

setTimeout(function(){

console.log(that.num);    //利用闭包访问that，that是一个指向obj的指针

}, 1000)

}

}

var obj = new Obj;

obj.getNum();//1　　打印的是obj.num，值为1

obj.getNumLater()//1　　打印的是obj.num，值为1

2.利用bind()方法：

var num = 0;

function Obj (){

this.num = 1,

this.getNum = function(){

console.log(this.num);

},

this.getNumLater = function(){

setTimeout(function(){

console.log(this.num);

}.bind(this), 1000)    //利用bind()将this绑定到这个函数上

}

}

var obj = new Obj;

obj.getNum();//1　　打印的为obj.num，值为1

obj.getNumLater()//1　　打印的为obj.num，值为1

3. 箭头函数：

var num = 0;

function Obj (){

this.num = 1,

this.getNum = function(){

console.log(this.num);

},

this.getNumLater = function(){

setTimeout(() => {

console.log(this.num);

}, 1000)    //箭头函数中的this总是指向外层调用者，也就是Obj

}

}

var obj = new Obj;

obj.getNum();//1　　打印的是obj.num，值为1

obj.getNumLater()//1　　打印的是obj.num，值为1

ES6中的箭头函数完全修复了this的指向，this总是指向词法作用域，也就是外层调用者obj，因此利用箭头函数就可以轻松解决这个问题。