this的指向
this指向
正常情况下,this的指向分为以下几种情况
- 如果是个构造函数,this指向新生成的对象
- 如果是个箭头函数,this指向函数声明位置处,外面包裹着他的函数,
- 如果函数调用,但是没有显式的调用者,默认为window(全局),不管他的位置在哪里,嵌套有多深
- 如果函数调用,有显式调用者,则指向调用者
- 通过call 、bind 、 apply 显式改变
迷惑性较高
const obj = {
dev: 'bfe',
a: function() {
return this.dev
},
b() {
return this.dev
},
c: () => {
return this.dev
},
d: function() {
return (() => {
return this.dev
})()
},
e: function() {
return this.b()
},
f: function() {
return this.b
},
g: function() {
return this.c()
},
h: function() {
return this.c
},
i: function() {
return () => {
return this.dev
}
}
}
console.log(obj.a())
console.log(obj.b())
console.log(obj.c())
console.log(obj.d())
console.log(obj.e())
console.log(obj.f()())
console.log(obj.g())
console.log(obj.h()())
console.log(obj.i()())
解析
相同的函数
const obj = {
dev: 'bfe',
a: function() {
return this.dev
},
b() {
return this.dev
},
}
console.log(obj.a()) // bfe
console.log(obj.b()) // bfe
箭头函数
const obj = {
dev: 'bfe',
c: () => {
//当我们使用一个箭头函数作为对象属性,他创造出一个新的上下文环境,this指向window,this.dev不存在
return this.dev
},
}
console.log(obj.c()) // undefined
立即执行函数与箭头函数
const obj = {
dev: 'bfe',
d: function() {
//立即执行函数和箭头函数同时使用,立即执行函数只用于执行箭头函数,this会以箭头函数为准,指向d:function()
return (() => {
return this.dev
})()
},
e: function() {
return this.d()
},
}
console.log(obj.d()) // bfe
console.log(obj.e()) // bfe
const obj = {
dev: 'bfe',
b() {
return this.dev
},
f: function() {
//这里 被解析为两部分,b() {return this.dev}和()(),合在一起就是(b() {return this.dev})()
//变成了一个立即执行函数,无显式调用者,this指向window
return this.b
},
g: function() {
//这里也可以拆分成两部分,() => { return this.dev }和()(),但是这里要注意箭头函数,箭头函数的this只跟他声明的地方的,包裹着他的函数有关,跟其他无关,所以this指向window
return this.c()
},
h: function() {
//同 g:function一样
return this.c
},
}
console.log(obj.f()()) // undefined
console.log(obj.g()) // undefined
console.log(obj.h()()) // undefined
Finally nested arrow functions
const obj = {
dev: 'bfe',
i: function() {
return () => {
return this.dev //箭头函数,this指向声明位置的包裹他的函数,所有this指向i:function
}
}
}
console.log(obj.i()()) // bfe
总结:this的指向
- 跟调用方式有关
- 构造函数
- 调用函数
- 跟调用者有关
- 有显式调用者
- 无显式调用者
举例:函数调用(指向window) 对象方法(对象) 构造函数(实例化出来的对象) 定时器调用(全局) 匿名函数(window)
原型中的this指向调用他的对象不指向本身