this
在方法内部的函数中使用this
'use strict';
var xiaoming = {
name: '小明',
birth: 1990,
age: function () {
function getAgeFromBirth() {
var y = new Date().getFullYear();
return y - this.birth;
}
return getAgeFromBirth(); // 非严格模式下,在这里函数执行的时候可以看作是window.getAgeFromBirth(),所以this指向了window
}
};
xiaoming.age(); // Uncaught TypeError: Cannot read property 'birth' of undefined
由于this
指针只在age
方法的函数内指向xiaoming
,在函数内部定义的函数,this
又指向undefined
了!(在非strict模式下,它重新指向全局对象window
!)
修复的方法可以声明一个that
变量来捕获this
:
var xiaoming = {
name: '小明',
birth: 1990,
age: function () {
var that = this; // 在方法内部一开始就捕获this
function getAgeFromBirth() {
var y = new Date().getFullYear();
return y - that.birth; // 用that而不是this
}
return getAgeFromBirth();
}
};
xiaoming.age(); // 25
也可以使用箭头函数:
var obj = {
birth: 1990,
getAge: function () {
var b = this.birth; // 1990
var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
return fn();
}
};
obj.getAge(); // 25
由于
this
在箭头函数中已经按照词法作用域绑定了,所以,用call()
或者apply()
调用箭头函数时,无法对this
进行绑定,即传入的第一个参数被忽略:var obj = { birth: 1990, getAge: function (year) { var b = this.birth; // 1990 var fn = (y) => y - this.birth; // this.birth仍是1990 return fn.call({birth:2000}, year); } }; obj.getAge(2015); // 25
注意在对象中使用箭头函数定义属性时,this
的指向,例如:
let a = 10;
let obj = {
a: 2,
func: () => console.log(this.a) // 或者console.log(a) 调用结果都是指向全局的 a
}
由于箭头函数没有执行主体,函数体内的this
指向只和上下文相关。所以要this
指向对象就不要使用箭头函数定义属性方法:
let obj = {
a: 2,
func: function(){
console.log(this.a); // 2
}
}