¿Cuál es la diferencia entre una función de flecha y una función normal?
1. Diferentes formas de escribir
En js, las funciones con nombre y las expresiones de funciones se denominan funciones ordinarias. Para las funciones ordinarias, deben declararse con la palabra clave function. La función de flecha no necesita usar la palabra clave de función, escribir los parámetros entre corchetes delante de la flecha y escribir el cuerpo del método entre corchetes después de ella. La sintaxis de la función de flecha es más concisa y clara.
// 命名式函数
function normalFn(参数) {
// 方法体
return 'normalFn';
}
// 函数表达式
const normalFn = function(参数) {
// 方法体
return 'normalFn';
}
// 箭头函数
const arrowFn = (参数) => {
// 方法体
return 'arrowFn';
}
2. Esto apunta a diferentes
función ordinaria
En las funciones ordinarias, el punto de esto es dinámico, y su valor depende de cómo se llame a la función. Por lo general, hay cuatro métodos de llamada: 1) Cuando se llama directamente,
apunta al objeto global (indefinido en modo estricto)
function fnc() {
console.log(this); //window{}
}
fnc(); // 全局对象（global 或 window）
2) Cuando se llama al método, esto apunta al objeto que llama al método
let obj = {
fnc1(){
console.log('fnc1', this === obj); // fnc1 true
}
}
obj.fnc2 = function() {
console.log('fnc2', this === obj); // fnc2 true
}
function fnc3() {
console.log('fnc3', this === obj); // fnc3 true
}
obj.fnc3 = fnc3;
obj.fnc1(); // true
obj.fnc2(); // true
obj.fnc3(); // true
3) Cuando se llama new, apunta al objeto de instancia recién creado
function fnc() {
console.log(this); //fnc {}
}
let obj = new fnc(); // fnc 的实例 fnc {} 这里就是obj
4) Cuando se llama a call, apply y bind, apuntan al primer parámetro de los tres métodos
function fnc() {
console.log(this);
}
let obj = {
name: '张三',age: 18}
fnc.call(obj) // obj对象
fnc.apply(obj) // obj对象
fnc.bind(obj)() // obj对象
La función bind() es para crear una nueva función, que no se ejecutará de inmediato y debe llamarse manualmente
función de flecha
La función este punto de la flecha es estática, no importa dónde se ejecute o dónde se ejecute, esta función dentro de la flecha siempre apunta al objeto al que apunta el alcance cuando se creó. Dado que la función de flecha no tiene su propio puntero this, métodos como call(), apply(), bind() no pueden cambiar a lo que apunta en la función de flecha.
const obj = {
fnc(arr) {
console.log(this === obj); // true(obj)
const cb = () => {
console.log(this === obj); // true(obj)
};
arr.forEach(cb);
}
};
obj.fnc([1, 2, 3]);
3. Las funciones de flecha no se pueden usar como constructores
Debido a que la función de flecha no tiene su propio this, en realidad hereda this en el entorno de ejecución externo, y este punto nunca cambiará, y la función de flecha no tiene un prototipo de prototipo, por lo que es imposible dejar que el atributo __proto__ de su instancia apunta a , por lo que la función de flecha no se puede usar como constructor, y se informará un error cuando se llame con new.
var Foo = () => {
};
var foo = new Foo();
La implementación interna de new en realidad se divide en los siguientes cuatro pasos:
1) crear un nuevo objeto vacío
2) vincular al prototipo
3) vincular esto, ejecutar el constructor
4) devolver un nuevo objeto
function myNew() {
// 1.新建一个空对象
let obj = {
}
// 2.获得构造函数
let con = arguments.__proto__.constructor
// 3.链接原型
obj.__proto__ = con.prototype
// 4.绑定this，执行构造函数
let res = con.apply(obj, arguments)
// 5.返回新对象
return typeof res === 'object' ? res : obj
}
4. Las funciones de flecha no tienen atributo prototipo.
5. Parámetros
La principal diferencia entre las funciones ordinarias y las funciones de flecha en términos de parámetros es que las funciones de flecha no vinculan el objeto de argumentos.
Cuando necesitamos usar parámetros, podemos considerar parámetros de descanso (descanso) en ES6.
const fn = (...args) => args[0];
fn(1,2,3,4)
