this指向什么?this是在函数被执行时,指向调用它的对象。
用代码来理解这句话:
var a = 2
function fn() {
console.log(this.a);
}
fn() // 2
这种情况下,函数fn是直接加在全局对象上,this指向全局对象(这里是window),变量a也是window的属性,因此打印出来是2
var a = 2
var o = {
a: 4,
fn: function() {
console.log(this.a);
}
}
o.fn() // 4
这一次函数的调用是发生在对象o上面的,存在上下文对象的情况,因此,this指向的对象o里的变量a,打印结果是4。
var a = 2
var o = {
a: 4,
fn: function() {
console.log(this.a);
}
}
var f = o.fn;
f() // 2
这里f保存了o对象的fn函数,调用还是在全局环境中,因此打印结果是2。
如果我们想改变调用函数的那个对象,该怎么改变?我们可以使用call或者apply方法。
var a = 2
function fn() {
console.log(this.a);
}
var o = {
a: 4
}
fn.call(o); // 4
这一次我们在全局环境中调用fn函数,我们显示的改变了调用他的对象,因此打印结果是对象o里的变量a的值。
在箭头函数中的this又有点不同,this 的值取决于该函数外部非箭头函数的 this 的值
var fn = () => {
console.log(this.a);
}
var a = 2;
var o = {
a: 4,
fn: fn
}
o.fn() // 2
fn.call(o); // 2
上述代码显示:改变调用对象对箭头函数并不生效,fn外层为全局对象,因此打印出来是全局对象的a的值。
再来一段代码
function fn() {
return () => {
console.log(this.a);
}
}
var a = 2;
var o = {
a: 4,
fn: fn
}
var f = o.fn()
f() // 4
这里箭头函数的外层环境为fn函数,fn函数又在o对象里,this指向o对象,打印结果为4。