跟着大佬学习之JS的this指向
【我一直傻傻分不清楚,今天和大家一起披关斩棘】
原创 | GOODDEEP
首先总结下在不同函数间this的区别:
1.普通函数下的this:
- 在普通函数中的this总是代表它的直接调用者,在默认的情况下,
this指的是window
- 在严格模式下,没有直接调用者的函数,
this是undefined
- call,apply,bind(es5新增),
this指的是绑定的对象
2.箭头函数中的this:
- 箭头函数没有自己的this,
它的this是继承而来的
,默认指向在定义它时所处的对象(宿主对象)
而不是执行时的对象
,定义它的时候,可能环境是window,也有可能是其他的
上代码:
普通函数中的this
function a(){
console.log(this) //window对象
}
a()
因为a是一个全局的函数,也就是挂载在window对象下的, 所以a(),等价于window.a()
var obj={
say:function(){
setTimeout(function(){
console.log(this) //window对象
})
}
}
obj.say()
因为定时器的函数,没有默认的宿主对象,所以指向window
//严格模式下的this
function test(){
'use strict';
console.log(this) //undefined
}
test()
严格模式下,函数没有直接的调用者,this的指向是undefined
'use strict'
var obj={
say:function(){
console.log(this) //obj
}
}
obj.say()
严格模式下,有直接调用者的函数this是obj
箭头函数中的this
var obj={
say:function(){
setTimeout(()=>{
console.log(this) //obj
})
}
}
此时定时器的this继承obj,指的是定义它的对象obj
var obj = {
say :function(){
var f1=function(){
console.log('f1',this) //window对象
setTimeout(()=>{
console.log("定时器中的",this)
})
}
f1()
}
}
obj.say()
//f1调用的时候,没有宿主对象,所以指向window对象
箭头函数使setTimeout里面的this,绑定的是定义时所在的作用域,而不是指向运行的作用域
相当于window.setTimeout(()=>{})
var obj={
say:function(){
var f1=()=>{
console.log("f1",this) //obj对象
setTimeout(()=>{
console.log("定时器",this) //obj对象
})
}
f1()
}
}
obj.say()
因为f1定义时所处的函数中的this指的是obj(箭头函数绑定this指向的是宿主对象)
而setTimeout中的箭头函数this继承f1,不管多少层继承,都是obj