| 箭头函数是ES6中的新增特性，他没有自己的this，其this指向从外层代码库继承。
使用箭头函数时要注意一下几点： - 箭头函数不能用作构造函数，用的话会抛出一个错误
- 无法使用arguments参数，如果要用的话就用rest
- 无法使用yield命令，所以箭头函数无法用作Generator函数
- 因为没有自己的this，所以没法通过bind、call、apply来改变this指向
- 但是这不代表箭头函数的this指向是静态的，我们可以通过改变它外层代码库的this指向来控制
- 箭头函数的this从外层代码库继承，所以箭头函数的this是在定义的时候就绑定好了的，而普通函数是在调用的时候确定this指向
- 字面量对象中直接定义的箭头函数的this不绑定该对象，而是往外找一层，最简单的情况是绑定到window
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(); // objf1() // objlet f2 = obj.fun2();let f2_2 = f2(); // windowf2_2() // windowobj.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
下载地址:
vue components 动态组件详解
详解react-navigation6.x路由库的基本使用 |
