普通函数中的this
要讨论this,就一定要与函数一起讨论。
普通函数
中,this
所表示的意义与他所处的环境有关。环境属于谁,this就指代谁。
观察打印结果,你会发现
this.age没有值
,打印结果是NaN,表示没有age的值不是一个number类型,无法自增加一。
function Person() {
// 在Person() 构造函数中, `this`表示的是Person它自己的实例.
this.age = 0;
setInterval(function growUp() {
// growUp()函数内部的 `this`表示的是全局对象window,
// 与在 Person()构造函数中定义的 `this`并不相同.
this.age++;
console.log(this.age);
}, 1000);
}
var o = new Person();
在obj这个对象中,obj的属性 talk 是一个方法,观察打印结果,你会发现 talk 中的 this.name 打印结果是
ifredom
,因为talk中的this表示的是obj
// 在obj这个对象中,obj的一个属性talk是一个方法,
// 在这个方法内, `this`表示的是obj 它自己.
var obj = {
name: "ifredom",
talk: function() {
console.log(this.name);
}
};
obj.talk();
箭头函数中的this
我们将前面提到的普通函数中的定时器改为箭头函数,观察打印结果,你会发现
this.age有值
。
function Person() {
// 在Person() 构造函数中, `this`表示得是Person它自己的实例.
this.age = 0;
setInterval(() => {
// 此时箭头函数中的this表示的Person它自己的实例.
this.age++;
console.log(this.age);
}, 1000);
}
var o = new Person();
我们添加一个属性talk2,它与talk一样都是
属性方法
,但是它的方法是一个箭头函数,观察打印结果,你会发现talk2中的this.name是undefined
,因为talk2中的this表示的是window
var obj = {
name: "ifredom",
talk: function() {
console.log(this.name);
},
talk2: ()=> {
console.log(this.name);
}
};
obj.talk();
obj.talk2();