js(=>) Explication détaillée de la fonction de flèche et collection de cas

La norme ES6 ajoute une nouvelle fonction : Arrow Function (fonction flèche).

Pourquoi s'appelle-t-elle la fonction Flèche ? Parce que sa définition utilise une flèche :

x => x * x

La fonction fléchée ci-dessus est équivalente à :

function (x) {
    return x * x;
}

Les fonctions fléchées sont équivalentes aux fonctions anonymes et simplifient les définitions de fonction. Il existe deux formats pour les fonctions fléchées, l'un est comme celui ci-dessus, qui ne contient qu'une seule expression, et même la somme { ... }est returnomise. Il y en a un autre qui peut contenir plusieurs déclarations, à ce moment la somme ne peut pas être { ... }omise return:

x => {
    if (x > 0) {
        return x * x;
    }
    else {
        return - x * x;
    }
}

Si le paramètre n'en est pas un, il doit être ()placé entre parenthèses :

// 两个参数:
(x, y) => x * x + y * y

// 无参数:
() => 3.14

// 可变参数:
(x, y, ...rest) => {
    var i, sum = x + y;
    for (i=0; i<rest.length; i++) {
        sum += rest[i];
    }
    return sum;
}

Si vous souhaitez renvoyer un objet, vous devez faire attention. S'il s'agit d'une seule expression, vous obtiendrez une erreur si vous l'écrivez comme ceci :

// SyntaxError:
x => { foo: x }

因为和函数体的{ ... }有语法冲突，所以要改为：

// ok:
x => ({ foo: x })

ce

La fonction flèche semble être un raccourci pour la fonction anonyme, mais en fait, il y a une différence évidente entre la fonction flèche et la fonction anonyme : à l'intérieur de la fonction flèche se trouve la portée lexicale, thisqui est déterminée par le contexte.

En revenant à l'exemple précédent, l'exemple suivant ne fonctionne pas comme prévu en raison de la gestion incorrecte des liaisons par la fonction JavaScript :this

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = function () {
            return new Date().getFullYear() - this.birth; // this指向window或undefined
        };
        return fn();
    }
};

Les fonctions fléchées corrigent désormais entièrement thisles pointeurs thispour toujours pointer vers la portée lexicale, qui est l'appelant externeobj :

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
        return fn();
    }
};
obj.getAge(); // 25

Si vous utilisez la fonction flèche, la méthode d'écriture hack précédente :

var that = this;

Ce n'est plus nécessaire.

Étant donné que thisla fonction de flèche a été liée selon la portée lexicale, lors de l'utilisation call()ou apply()de l'appel de la fonction de flèche, elle ne peut pas être thisliée, c'est-à-dire que le premier paramètre passé est ignoré :

var obj = {
    birth: 1990,
    getAge: function (year) {
        var b = this.birth; // 1990
        var fn = (y) => y - this.birth; // this.birth仍是1990
        return fn.call({birth:2000}, year);
    }
};
obj.getAge(2015); // 25