最浅显易懂的箭头函数this指向分析
感觉看得懂的大哥哥小姐姐们留下👍🏻
在了解箭头函数指this向之前我只需要你知道正常函数this指向，以及一点点的作用域链。（this永远指向上下文）！开始吧！！
1、我们来看一个函数，同学要是看不穿，建议慢慢来
function exp1() {
const data = "exp1data";
const expJT = () => {
console.log(data);
};
expJT();
}
exp1();
输出什么懂得都懂。(exp1data)
还是给不懂的解释一下，要不然说我水
- 执行exp1
- 创建data和expJT
- 执行expJT
- 在expJT找data
- 找不着，言作用域链在exp1里面找data
- 找到，输出data
好了你已经懂箭头函数this的指向，不，是一直懂。
？？？？what
干货
我悄悄告诉你普通函数内置了this，但是箭头函数忘记内置了，箭头函数找不到this沿着作用域链找this，这不就是找data！！！！！
聪明的小伙伴到这就行了，接下来给机敏的小伙伴讲讲
!!!!!!箭头函数没有this!!!!!!!
function exp1() {//普通函数内置this
const data = "exp1data"; //来跟着水镜的思路把这个data看成this
const expJT = () => {//箭头函数没有this
console.log(data); //把这个data也看成this
};
expJT();
}
exp1();
那么我们的代码不就可以写成这样
function exp1() {//普通函数内置this
//const this = "exp1data"; //普通函数本身就有this,我有脑子本来就有
const expJT = () => {//箭头函数没有this
console.log(this); //箭头函数没有this（脑子），沿着作用域链找啊
};
expJT();
}
exp1();
再看看上面的解释，这不就通了。
给宝们最后举个🌰
//直接定义
function exp1() {
console.log("Fun",this)
const expJT = () => {
console.log("JT",this);
};
expJT();
}
exp1() //Fun,window | JT | window
//定义在object
function exp1() {
console.log("Fun", this)
const expJT = () => {
console.log("JT", this);
};
expJT();
}
const obj = { exp1 , exp2:()=>{console.log(this)}}
obj.exp1();//Fun,obj | JT | obj
obj.exp2();//window
/**
这里解释一下exp2
1.执行exp2
2.找this
3.自己没有向上找
4.这步是强加的懂得可忽略：obj找this（不能自己定义）没有
5.window找this，到了window就到了全局上下文，没有更大的上下文，规定指向window
6.输出window
*/
