Acerca de las ventajas y desventajas de las funciones de flecha en ES6 y escenarios donde no se pueden usar

Acerca de las funciones de flecha

Todo el mundo está familiarizado con la función de flecha, su función más importante es cambiar la dirección de esta.

Ventajas de las funciones de flecha

1-Función abreviada

function fn = ()=>{}

2-Cambie el apuntamiento de esto, el esto de la función de flecha apunta al objeto actual

let obj = {
  a: "a",
  getA: function () {
    setTimeout(function () {
      console.log(this.a); //undefined 因为此时 this 指向 window
    });
  },
};

let obj1 = {
  a: "A",
  getA: function () {
    setTimeout(() => {
      console.log(this.a);//A this指向obj1
    });
  },
};
obj.getA();
obj1.getA();

Desventajas de las funciones de flecha

1-Sin parámetros de argumentos

2- El punto de esto no se puede cambiar mediante la llamada de aplicación de enlace.

¿En qué escenarios no se pueden utilizar las funciones de flecha?

1- No se puede utilizar para métodos de objetos.

const obj = {
    a:'a'
    getA: () => {
        return this.a
    }
}
console.log( obj.getA() ) //undefined

2- No se puede utilizar para prototipos de objetos.

const obj = {
  name: "name",
};
obj.__proto__.getName = () => {
  console.log(this);// {}
  return this.name;
};
console.log(obj.getName());//undefined

3- No se puede utilizar en constructores.

const Person = (name, age) => {
  this.name = name;
  this.age = age;
};
const p1 = new Person("章三", 18); //报错  Person is not a constructor


正确写法：
const Person = function (name, age) {
  this.name = name;
  this.age = age;
};
const p1 = new Person("章三", 18); 
console.log(p1); //Person { name: '章三', age: 18 }

4- Contexto dinámico

错误写法
const div = document.getElementById('#div')
div.addEventListener('click', () => {  
    this.innerHTML = 'div'
})

正确写法
const div = document.getElementById('#div')
div.addEventListener('click', function（） {  
    this.innerHTML = 'div'
})

5- Ciclo de vida y métodos de Vue

En vue, debes escribir de acuerdo con la sintaxis de vue y no usar funciones de flecha. Por ejemplo

 methods: {
          //错误
        functionA: () => {
            return this.data
        },
    //正确
       functionA(){
            return this.data
        },
    }

//错误

created:()=>{}

//正确

created(){}