[JS笔记]跟着大佬学习之JS的this指向

跟着大佬学习之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