箭头函数应用

简化回调函数，简化函数表达式，固定this指向
arr.map(function(x) {    return x * 2;})arr.map((x) => 2 * x)
  • 没有本人的this，无奈通过call、apply、bind扭转this指向
  • 没有arguments对象
  • 没有protoType属性
  • 没有[[Construct]]办法，不能被new调用，没有new.target绑定
 const fn1 = () => {    console.log('arguments', arguments) } fn1(100, 200)  // error    function fn2(){    console.log('arguments', arguments) } fn2(100, 200)  // [100, 200, callee: ƒ, Symbol(Symbol.iterator): ƒ]

防止如下场景

  1. 对象办法（原型办法）

  2. 构造函数申明

    构造函数是通过 new 关键字来生成对象实例，生成对象实例的过程也是通过构造函数给实例绑定 this 的过程，而箭头函数没有本人的 this。因而不能应用箭头作为构造函数，也就不能通过 new 操作符来调用箭头函数
  3. 事件监听回调
  4. vue选项式api(生命周期、数据等)

留神：react组件中能够应用箭头函数

Vue组件实质上是一个 JS 对象；React 组件（非Hooks）他实质上是一个 ES6 的 class
class Man {    constructor(name, city) {        this.name = name        this.city = city    }    getName = () => {        return this.name    }}const f = new Man('李四','上海')console.log(f.getName())   // 李四

嵌套箭头函数

管道机制部署

const pipeline = (...funcs) =>  val => funcs.reduce((a, b) => b(a), val);const plus = a => a + 1;const multiply = a => a * 2;const addThenMultiply = pipeline(plus, multiply);addThenMultiply(5)   // 12