在标准函数(function)中,this引用的是把函数当成方法调用的上下文对象,这时候通常称其为this值(在网页的全局上下文中调用函数时,this值指向window)。来看下面例子:
window.color = ‘red’;
let o = {
color: 'blue'
};
function sayColor() {
console.log(this.color);
}
sayColor(); // 'red'
o.sayColor = sayColor;
o.sayColor(); // 'blue'
在箭头函数中,this引用的是定义箭头函数的上下文。
window.color = 'red';
let o = {
color: 'blue'
};
let sayColor = () => console.log(this.color);
sayColor(); // 'red'
o.sayColor = sayColor;
o.sayColor(); // 'red'
在事件回调或定时回调中调用某个函数时,this值指向的并非想要的对象。此时将回调函数写成箭头函数就可以解决问题。因为箭头函数中的this会保留定义该函数的上下文:
functon king() {
this.royaltyName = 'Henry';
//this引用king的实例
setTimeout(()=> console.log(this.royaltyName),1000);
}
function Queen() {
this.royaltyName = 'Elizabeth';
//this 引用window对象
setTimeout(function() { console.log(this.royaltyName);}, 1000};
}
new King(); // Henry
new Queen(); // undefined
函数名只是保存指针的变量。因此全局变量定义的sayColor()函数和o.sayColor()是同一个函数,只不过执行的上下文不同。