箭头函数

• 箭头函数不绑定 arguments，可以使用 ...args 代替
• 箭头函数没有 prototype 属性，不能进行 new 实例化
• 箭头函数不能通过 call、apply 等绑定 this，因为箭头函数底层是使用bind永久绑定this了，bind绑定过的this不能修改
• 箭头函数的this指向创建时父级的this
• 箭头函数不能使用yield关键字，不能作为Generator函数

• const fn1 = () => {
    // 箭头函数中没有arguments
    console.log('arguments', arguments)
  }
  fn1(100, 300)
  
  const fn2 = () => {
    // 这里的this指向window，箭头函数的this指向创建时父级的this
    console.log('this', this)
  }
  // 箭头函数不能修改this
  fn2.call({x: 100})
  
  const obj = {
    name: 'poetry',
    getName2() {
      // 这里的this指向obj
      return () => {
        // 这里的this指向obj
        return this.name
      }
    },
    getName: () => { // 1、不适用箭头函数的场景1：对象方法
      // 这里不能使用箭头函数，否则箭头函数指向window
      return this.name
    }
  }
  
  obj.prototype.getName3 = () => { // 2、不适用箭头函数的场景2：对象原型
    // 这里不能使用箭头函数，否则this指向window
    return this.name
  }
  
  const Foo = (name) => { // 3、不适用箭头函数的场景3：构造函数
    this.name = name
  }
  const f = new Foo('poetry') // 箭头函数没有 prototype 属性，不能进行 new 实例化
  
  const btn1 = document.getElementById('btn1')
  btn1.addEventListener('click',()=>{ // 4、不适用箭头函数的场景4：动态上下文的回调函数
    // 这里不能使用箭头函数 this === window
    this.innerHTML = 'click'
  })
  
  // Vue 组件本质上是一个 JS 对象，this需要指向组件实例
  // vue的生命周期和method不能使用箭头函数
  new Vue({
    data:{name:'poetry'},
    methods: { // 5、不适用箭头函数的场景5：vue的生命周期和method
      getName: () => {
        // 这里不能使用箭头函数，否则this指向window
        return this.name
      }
    },
    mounted:() => {
      // 这里不能使用箭头函数，否则this指向window
      this.getName()
    }
  })
  
  // React 组件（非 Hooks）它本质上是一个 ES6 class
  class Foo {
    constructor(name) {
      this.name = name
    }
    getName = () => { // 这里的箭头函数this指向实例本身没有问题的
      return this.name
    }
  }
  const f = new Foo('poetry') 
  console.log(f.getName() )

  总结：不适用箭头函数的场景

• 场景1：对象方法
• 场景2：对象原型
• 场景3：构造函数
• 场景4：动态上下文的回调函数
• 场景5：vue的生命周期和method