La différence entre les fonctions fléchées et les fonctions ordinaires

Avant-propos

---

La fonction flèche est un point de test à haute fréquence dans l'interview frontale. La fonction flèche est une API d'ES6, je pense. parce que sa syntaxe est meilleure que l'ordinaire. La fonction est plus concise, donc elle est appréciée de tout le monde. Il s'agit d'une API que nous utilisons dans le développement quotidien, mais la plupart des étudiants ne la comprennent pas assez bien. Apprenons-en davantage sur la syntaxe de base des fonctions fléchées et sur la différence entre les fonctions fléchées et les fonctions ordinaires.

1. Syntaxe de base

[1.1]Définir les fonctions

Définir les fonctions fléchées dans la syntaxe mathématique que les fonctions ordinaires Beaucoup plus simple , ES6 permet l'utilisation de flèches

=>

pour définir les fonctions fléchées omettent le mot-clé function, et les paramètres de la fonction sont placés entre parenthèses devant =>. ; , le corps de la fonction suit => entre accolades.

// 箭头函数
let fun = (name) => {
    return `Hello ${name} !`;
};

// 普通函数
let fun = function (name) {
    return `Hello ${name} !`;
};

【1.2】Paramètres de la fonction flèche

① Si la fonction flèche n'a pas de paramètres, écrivez simplement un crochet vide.

② Si ​​la fonction flèche n'a qu'un seul paramètre, vous pouvez également omettre les parenthèses entourant le paramètre.

③ Si la fonction flèche a plusieurs paramètres, séparez les paramètres par des virgules (,) et placez-les entre parenthèses.

// 没有参数
let fun1 = () => {
    console.log('dingFY');
};

// 只有一个参数，可以省去参数括号
let fun2 = name => {
    console.log(`Hello ${name} !`)
};

// 有多个参数，逗号分隔
let fun3 = (val1, val2, val3) => {
    return [val1, val2, val3];
};

【1.3】Le corps de la fonction flèche

① Si le corps de la fonction flèche n'a qu'une seule ligne de code, qui renvoie simplement une variable ou une simple expression JS, il peut être omis des accolades { } pour le corps de la fonction.

let fun = val => val;
// 等同于
let fun = function (val) { return val };

let sum = (num1, num2) => num1 + num2;
// 等同于
let sum = function(num1, num2) {
  return num1 + num2;
};

② Si ​​le corps de la fonction flèche n'a qu'une seule instruction, il renvoie un objet Vous pouvez l'écrire comme ceci :

// 用小括号包裹要返回的对象，不报错
let getTempItem = id => ({ id: id, name: "Temp" });

// 但绝不能这样写，会报错，因为对象的大括号会被解释为函数体的大括号
let getTempItem = id => { id: id, name: "Temp" };

③ Si le corps de la fonction flèche a. une seule instruction et n'a pas besoin de renvoyer de valeur (le plus courant est d'appeler une fonction), vous pouvez ajouter un mot-clé void devant cette instruction

let fun = () => void doesNotReturn();

2. La différence entre les fonctions fléchées et fonctions ordinaires

---

【2.1】La syntaxe est plus concise et claire

Comme le montre l'exemple de syntaxe de base de la flèche fonction ci-dessus, la définition de la fonction flèche est plus concise et claire que la définition de la fonction ordinaire. Beaucoup plus, très rapidement.

【2.2】La fonction flèche n'a pas de prototype (prototype), donc la fonction flèche elle-même n'a pas cela

// 箭头函数
let a = () => {};
console.log(a.prototype); // undefined

// 普通函数
function a() {};
console.log(a.prototype); // {constructor:f}

【2.3】Fonction flèche Elle ne créera pas son propre this

La fonction flèche n'a pas son propre this Le point this de la fonction flèche est hérité du premier objet ordinaire à l'extérieur. calque lorsqu'il est défini (remarque : lorsqu'il est défini, pas lorsqu'il est appelé, c'est la fonction). Par conséquent, le pointage de celui-ci dans la fonction flèche est déterminé lors de sa définition et ne changera jamais par la suite.

let obj = {
  a: 10,
  b: () => {
    console.log(this.a); // undefined
    console.log(this); // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
  },
  c: function() {
    console.log(this.a); // 10
    console.log(this); // {a: 10, b: ƒ, c: ƒ}
  }
}
obj.b(); 
obj.c();

【2.4】call | apply | bind ne peut pas changer le pointage de ceci dans la fonction flèche

call apply peut être utilisé pour modifier dynamiquement ceci | lorsque la fonction est exécutée Pointant vers, mais parce que celle-ci de la fonction flèche est déterminée lorsqu'elle est définie et ne changera jamais. Ainsi, l’utilisation de ces méthodes ne peut jamais modifier le pointage de la fonction flèche.

var id = 10;
let fun = () => {
    console.log(this.id)
};
fun();     // 10
fun.call({ id: 20 });     // 10
fun.apply({ id: 20 });    // 10
fun.bind({ id: 20 })();   // 10

【2.4】call | apply | bind ne peut pas changer le pointage de ceci dans la fonction flèche

call apply peut être utilisé pour modifier dynamiquement ceci | lorsque la fonction est exécutée Pointant vers, mais parce que celle-ci de la fonction flèche est déterminée lorsqu'elle est définie et ne changera jamais. Ainsi, l’utilisation de ces méthodes ne peut jamais modifier le pointage de la fonction flèche.

var id = 10;
let fun = () => {
    console.log(this.id)
};
fun();     // 10
fun.call({ id: 20 });     // 10
fun.apply({ id: 20 });    // 10
fun.bind({ id: 20 })();   // 10

[2.5] Les fonctions fléchées ne peuvent pas être utilisées comme constructeurs

Comprenons d'abord ce que new fait dans le constructeur ? Pour faire simple, il est divisé en quatre étapes : ① JS va d'abord générer un objet en interne ; ② Puis le pointer dans la fonction vers l'objet ; ③ Puis exécuter l'instruction dans le constructeur ④ Enfin renvoyer l'instance de l'objet.

Mais ! ! Parce que la fonction flèche n'a pas son propre this, c'est this hérite en fait de this dans l'environnement d'exécution externe, et le but de this ne changera jamais en fonction de l'endroit où elle est appelée ou par qui, donc la fonction flèche ne peut pas être utilisée comme fonction de flèche. constructeur, ou Il dit que le constructeur ne peut pas être défini comme une fonction fléchée, sinon une erreur sera signalée lors de l'appel avec new !

let Fun = (name, age) => {
    this.name = name;
    this.age = age;
};

// 报错
let p = new Fun('dingFY', 24);

[2.6] La fonction flèche ne lie pas les arguments, utilise plutôt des paramètres de repos... au lieu de l'objet arguments pour accéder à la liste des paramètres de la fonction flèche

La fonction flèche n'a pas son propre objet arguments. L'accès aux arguments dans une fonction fléchée obtient en fait la valeur dans l'environnement d'exécution local (fonction) externe.

// 普通函数
function A(a){
  console.log(arguments);
}
A(1,2,3,4,5,8);  //  [1, 2, 3, 4, 5, 8, callee: ƒ, Symbol(Symbol.iterator): ƒ]

// 箭头函数
let B = (b)=>{
  console.log(arguments);
}
B(2,92,32,32);   // Uncaught ReferenceError: arguments is not defined

// rest参数...
let C = (...c) => {
  console.log(c);
}
C(3,82,32,11323);  // [3, 82, 32, 11323]

[2.7] Les fonctions fléchées ne peuvent pas être utilisées comme fonctions génératrices et le mot-clé rendement ne peut pas être utilisé

Tutoriel recommandé : "Tutoriel JS "

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!