this指向
常规函数
概念:this的指向只跟两个条件有关,
- 调用函数的位置
- 调用函数的方式
常规函数包含
- 普通函数
- 匿名函数
- 立即执行函数
箭头函数
概念:箭头函数本身没有this,所以写在箭头函数中的this,指向包裹箭头函数的函数。
换而言之,箭头函数的this只跟箭头函数声明的位置有关,和调用者无关
function fn1(){
return ()=>{
console.log(this)
}
}
const obj = {
a:()=> {
console.log(this)
}
}
fn1()()//this指向fn1
obj.a()//this指向window,因为包裹着a这个箭头函数的函数没有,所以指向了window,对象是没有作用域的
输出一下程序中的打印结果
const obj = {
dev: ‘bfe‘,
a: function() {
return this.dev
},
b() {
return this.dev
},
c: () => {
return this.dev
},
d: function() {
return (() => {
return this.dev
})()
}
}
console.log(obj.a())
console.log(obj.b())
console.log(obj.c())
console.log(obj.d())
答案:自己运行程序看结果
解析
const obj = {
dev: ‘bfe‘,
a: function() {
return this.dev
},
b() {
return this.dev
},
c: () => {
return this.dev
},
d: function() {
return (() => {
return this.dev
})()
}
}
console.log(obj.a())
//obj.a(),a的调用者是obj,所以,a指向obj,this=obj,
console.log(obj.b())
//同上
console.log(obj.c())
//箭头函数,this指向只跟声明函数的位置有关,指向包裹他的函数,这里指向window
console.log(obj.d())
//这里()(),是立即执行函数,他的this指向调用者obj