时间：2022-08-17 14:53:57 | 栏目：JavaScript代码 | 点击：次
箭头函数是ES6中的新增特性，他没有自己的this，其this指向从外层代码库继承。
使用箭头函数时要注意一下几点：
PS: 实际开发环境中，React可以使用箭头函数解决一个经典问题，这里不细说了。
给一个例子看一下箭头函数的实际情况：
const obj = {
fun1: function () {
console.log(this);
return () => {
console.log(this);
}
},
fun2: function () {
return function () {
console.log(this);
return () => {
console.log(this);
}
}
},
fun3: () => {
console.log(this);
}
}
let f1 = obj.fun1(); // obj
f1() // obj
let f2 = obj.fun2();
let f2_2 = f2(); // window
f2_2() // window
obj.fun3(); // window
针对每行输出的分析：
let f1 = obj.fun1() // obj
这里明显进行的是隐式绑定，fun1的this指向obj
f1() // obj
这里执行了上一行返回出来的箭头函数，我们分析上一层代码库的this指向obj，所以直接继承，箭头函数this指向
objlet f2 =obj.fun2()
fun2第一层执行的时候没有打印代码，而是返回了一个函数出来，赋值给f2，并且这里发生了绑定丢失，this指向由原来的obj指向了window(发生了赋值)
let f2_2 = f2() // window
f2()执行了，打印出了改绑后的this——window，然后将箭头函数返回出来，赋值给f2_2f
2_2() // window
执行打印出window，刚才的外层代码的this不是指向了window吗，所以这里就继承了window作为this
obj.fun3() // window
在字面量中直接定义的箭头函数无法继承该对象的this，而是往外再找一层，就找到了window，因为字面量对象无法形成自己的一层作用域，但是构造函数可以哦。
那我们怎么操纵箭头函数的this指向呢：
答案是修改外层代码库的this指向，在箭头函数定义之前就给this修改方向即可。
在以上代码的基础上：
let fun4 = f2.bind(obj)() // obj fun4() // obj
我们发现修改的是第二层方法的this指向，并且箭头函数也继承了下来。
fun2: function () {
return function () { // 我们修改的是这里的this
console.log(this);
return () => { // 然后这里定义的时候就继承啦
console.log(this);
}
}
},