有时候,我们逻辑上感觉没问题,可是偏偏this点出来的值就是undefined。很多人因此而头疼,于是开始各种调试找原因。下面我用一个简单的例子带大家了解一下。
实例:
function Test() {
this.num = 100;
this.func = function(){
console.log(this.num); // 100
setTimeout(function(){
console.log(this.num); // undefined
}, 500);
};
}
var obj = new Test();
obj.func();
以上代码运行结果是100和undefined.
为什么?(敲黑板,认真看啦)
因为方法里调用了setTimeout函数,该函数500毫秒后调用我们定义的函数时,实际上是window对象调用的,所以这时匿名函数的this是指向window而不是指向obj了,所以下面那个值自然就不见了。
针对这种情况,我们有两种方案可以应付:
第一种方案:
把this对象复制到临时变量that
function Test() {
var that=this;
that.num = 100;
that.func = function(){
console.log(that.num); // 100
setTimeout(function(){
console.log(that.num); // 100
}, 500);
};
}
var obj = new Test();
obj.func();
第二种方案:
箭头函数
注意:箭头函数除了传入的参数之外,其它的对象都没有!在箭头函数引用了this、arguments或者参数之外的变量,那它们一定不是箭头函数本身包含的,而是从父级作用域继承的。
function Test() {
this.num = 100;
this.func = function(){
console.log(this.num); // 100
setTimeout(() => {
console.log(this.num); // 100
}, 500);
};
}
var obj = new Test();
obj.func();
两种方案的运行结果一致:(建议用第一种)
每天进步一点点,开心也多一点点