JS中this的指向

JS this指向？

在了解JS中this指向问题之前，首先我们得明白，在JS中，this只能出现在函数里。

总的来说，在封装一个函数后，它会内置一个this，普通函数内的this指向调用它的变量，匿名函数和箭头函数则会穿过自己本身，依赖其父元素的this指向，下面依次举例来说明函数的this指向：

普通函数

function fun(){
console.log(this)
}

fun(); //这里的fun()可以看做是window.fun()，window调用了函数，所以该函数的this指向window对象。

函数在对象里

第一种

let obj = {
fun:function(){
console.log(this)
}
}

obj.fun(); //这里obj对象调用了该函数，所以该函数的this指向该对象。

第二种（该写法为ES6写法，this指向不变）

let obj = {
fun(){
console.log(this)
}
}

obj.fun(); //这里obj对象调用了该函数，所以该函数的this指向该对象。

箭头函数

所有的箭头函数this都会穿过自己本身，当你在一个箭头函数里用到this时，this的指向为它的父级函数，若父级函数依旧没有this指向，继续寻找其父级函数，直至找到window。

let obj = {
fun:function(){
funs = () => {
console.log(this)
}
funs()
}
}

obj.fun(); 这里obj调用了fun函数，fun指向obj，而箭头函数的this指向依赖于它的父函数，所以也指向obj。

let obj = {
funs:() => {
console.log(this)
}
}

obj.funs(); //这里的箭头函数funs没有父级函数，尽管obj调用了它，它依旧指向window。

匿名函数

匿名函数一般会作为回调函数呈现，它与箭头函数相似，当匿名函数内出现this时，会寻找它的父函数，this指向其父元素。

setTimeout(function(){
console.log(this) //这里的setTimeout可以看做是window.setTimeout()，其中的匿名函数没有this，依赖于它父元素的this即window.setTimeout()，所以这里的this指向是window。
})

let obj = {
time:setTimeout(function(){
console.log(this) //这里的setTimeout同上所述，也可以看做是window.setTimeout()，对象obj调用了key并非window.setTimeout()该函数，所以这里的this也指向window。
})
}

obj.time

个人见解，如有不足，欢迎探讨。