ES 2017 : fonction asynchrone vs objet AsyncFunction vs expression de fonction asynchrone

Question

Je viens de lire sur async 函数 et j'ai découvert des fonctionnalités similaires pour ES2017. Cela crée beaucoup de confusion et je veux juste demander :

Quelle est la différence entre
1. async function、AsyncFunction (utilisé pour créer une fonction asynchrone) et une expression de fonction asynchrone (qui, je pense, n'est qu'une autre fonction asynchrone) ?
2. Quand faut-il utiliser un format plutôt qu’un autre ?

Les points forts des bizarreries et des performances de chacun seraient grandement appréciés !

Answer 1

Il existe quatre façons de créer des fonctions en Javascript. Il existe également quatre façons de créer des fonctions asynchrones en Javascript, qui sont des miroirs exacts les unes des autres.

Pour démontrer comment cela fonctionne, j'ai utilisé une fonction sleep simple, déclarée globalement :

function sleep(time) {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve();
        }, time);
    });
}

Déclaration de fonction

function speak() { return 'Hi'; }
async function speak() { await sleep(1000); return 'Hi'; }

C'est la façon la plus simple de déclarer une fonction. Il peut être déclaré une fois et hissé au sommet de la portée de la fonction actuelle.

Une déclaration de fonction est exactement la même qu'une déclaration de fonction asynchrone, sauf async 函数始终返回一个 Promise 并允许您使用 await.

Expression de fonction

let speak = function() { return 'Hi'; } // anonymous function expression
let speak = function speakFn() { return 'Hi'; } // named function expression

let speak = async function() { await sleep(1000); return 'Hi'; } // anonymous asynchronous function expression
let speak = async function speakFn() { await sleep(1000); return 'Hi'; } // named asynchronous function expression

Les expressions de fonction ressemblent beaucoup aux déclarations de fonction. Cependant, ils ne sont pas promus au sommet du périmètre des fonctions. Vous pouvez les redéfinir autant de fois que nécessaire. Ils peuvent être définis en ligne. Ils peuvent être anonymes ou nommés : s'ils sont nommés, le nom fait référence à une fonction dans le cadre de cette fonction.

Les expressions de fonction sont exactement les mêmes que les expressions de fonction asynchrones, sauf async 函数始终返回一个 Promise 并允许您使用 await.

Fonction flèche

let speak = word => 'Hi ' + word; // one parameter
let speak = (word1, word2) => 'Hi ' + word1 + word2; // multiple parameters

let speak = async word => { await sleep(1000); return 'Hi ' + word; } // one parameter
let speak = async (word1, word2) => { await sleep(1000); return 'Hi ' + word1 + word2; } // multiple parameters

Les

Fonctions fléchées sont un moyen rapide et court de définir une fonction, introduite dans ES2015 (ES6). Elles sont équivalentes aux expressions de fonction à bien des égards, sauf qu'elles sont toujours anonymes et que la valeur de this est toujours liée lexicalement, c'est-à-dire héritée de la portée externe.

Les fonctions fléchées sont exactement les mêmes que les fonctions fléchées asynchrones, juste async 函数始终返回一个 Promise 并允许您使用 await。 （它们在上面的语句中略有不同，因为每个异步函数内部都有多个语句。这意味着这些语句需要包含在一个块 {} 中，并且 return. (Ils sont légèrement différents dans les instructions ci-dessus car il y a plusieurs instructions à l'intérieur de chaque fonction asynchrone. Cela signifie que ces instructions doivent être placées dans un bloc {} et return doit pour être explicite. Cela est également vrai pour les fonctions fléchées ordinaires qui durent plus d'une instruction.)

Constructeur de fonctions

let speak = new Function('word', 'return "Hi " + word;');
let speak = new AsyncFunction('word', 'await sleep(1000); return "Hi " + word;')

Le constructeur de fonctions vous permet de définir dynamiquement des fonctions à l'aide de chaînes. Notez qu'ils s'exécutent toujours dans la portée globale et n'ont pas accès à la portée dans laquelle ils sont définis. Ils ne sont utiles que dans des situations rares. Personnellement, je ne pense pas qu'un constructeur de fonctions asynchrones serait utile. Les auteurs de ES2017 sont d'accord avec moi parce que AsyncFunction 不是全局对象，必须首先使用 const AsyncFunction = Object.getPrototypeOf(async function(){}).constructor obtient.

Les fonctions créées à l'aide de constructeurs de fonctions sont exactement les mêmes que les fonctions créées à l'aide de constructeurs de fonctions anonymes, sauf async 函数始终返回一个 Promise 并允许您使用 await. (Mais vous l'avez déjà deviné, non ?)