Analyse détaillée de la priorité des opérateurs JavaScript (avec exemples)

Cet article vous apporte une analyse détaillée de la priorité des opérateurs JavaScript (avec des exemples). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Écrivant du JavaScript depuis deux ans, je pensais que je ne tomberais pas dans le piège de la syntaxe, mais en fait, j'ai été giflé Récemment, un beau mec de l'équipe de développement de produits m'a demandé d'en discuter. un problème. Question, afin de faciliter la lecture pour tout le monde, j'ai résumé le modèle de ce problème :

var provider = {
    test: {
        $get: function(){
            return function anonymous(config){
            };
        }
    }
};
var type = "test";
var config = {};
new provider[type].$get()(config);

Lorsque l'instruction ci-dessus est exécutée, pourquoi le anonymous dans la fonction this pointez sur window au lieu de newNouvel objet créé. La première chose à laquelle j'ai pensé en entendant cette question a été : Nani ! Comment est-il possible que le new dans le constructeur correspondant à l'opérateur this ne pointe pas vers une instance d'objet nouvellement créée ? À cette époque, parce que je n'avais pas soigneusement extrait le problème de l'entreprise, j'étais en fait un peu confus. Mais quand j'y ai bien réfléchi, qu'exprimait exactement cette phrase ?

Réflexion

Avant de parler du sens de cette expression, parlons de quelques petites connaissances sur le nouvel opérateur :

Retour constructeur

Le constructeur JavaScript peut renvoyer une valeur ou non, tel que :

function Person(){

}
var person = new Person()

Nous savons qu'à ce moment le constructeur renvoie la création L'objet instance est l'objet pointé par this dans le constructeur. Mais lorsque votre constructeur a une valeur de retour, vous devez différencier en fonction de la situation. Si une valeur de type non référence est renvoyée, ce qui est réellement renvoyé est toujours un objet d'instance nouvellement créé. Mais lorsqu'une valeur d'un type référence est renvoyée, l'objet de référence lui-même est renvoyé. Par exemple :

function Person(){
    return function(){}
}
var person = new Person()
typeof person // "function"

En JavaScript, les fonctions, en tant que citoyens de première classe, sont essentiellement des types de référence, donc personne est la fonction anonyme renvoyée.

Deux formes de nouvel opérateur

En fait, dans la description du nouvel opérateur de MDN, la syntaxe est

new constructor[([arguments])]

Vous trouverez ( [arguments ]) entouré de crochets signifie qu'il peut être omis. Par conséquent, s'il n'y a pas de différence entre new Person() et new Person pour un constructeur sans paramètres, alors nous réfléchirons à une question : Pour la personne qui a renvoyé la fonction plus tôt, pourquoi new Person() est-il exécuté au lieu de (new Person)() lorsque new Person() est exécuté ? Si vous avez lu un de mes articles précédents, vous savez que le nouvel opérateur avec paramètres a une priorité plus élevée que le nouvel opérateur sans liste de paramètres. Ainsi, le premier sera toujours exécuté à la place du second.

Après avoir compris les étapes ci-dessus, nous sommes proches de l'essence du problème pour l'expression

new provider[type].$get()(config);

JavaScript. moteur à la fin Est-il analysé en :

(new provider[type].$get())(config);

ou

new (provider[type].$get())(config);

Pour le premier formulaire, (new supplier[type].$get()) renvoie une fonction anonyme, donc Dans anonyme (config), l'interne pointe vers la fenêtre. Dans le deuxième mode, supplier[type].$get() renvoie la fonction anonyme, donc lors de l'exécution de new anonyme(config), le pointeur this interne pointe vers l'instance this nouvellement créée.

Bien sûr, nous pouvons le voir à partir de la question : pourquoi cela pointe vers la fenêtre au lieu du nouvel objet créé par new. En fait, ce que l'auteur voulait exprimer à l'époque était le deuxième sens, mais en fait c'est le cas. a été exprimé de la première manière. Le chemin est en cours. Pourquoi? La raison est très simple. Dans la première méthode d'exécution, le moteur JavaScript analyse d'abord le nouvel opérateur avec une liste de paramètres, tandis que dans la deuxième méthode, l'appel de fonction est exécuté en premier, puis le nouvel opérateur est exécuté. Comparons ce qui précède. priorités Comme vous pouvez le voir sur le diagramme de niveau, les nouveaux avec une liste de paramètres ont une priorité plus élevée que les appels de fonction, ils doivent donc être exécutés de la première manière.

En fait, cet article ne contient pas beaucoup d'informations utiles, mais j'en tire quand même deux enseignements. Premièrement, de l'article similaire précédent, j'ai souligné qu'il fallait éviter d'utiliser des expressions aussi vagues et utiliser davantage quelques mots. les problèmes avec les parenthèses peuvent être facilement résolus. Par exemple, certains élèves écriront quelque chose comme :

var str = "Hello" + true ? "World" : "JavaScript";

Alors, quel est le contenu de str Certaines personnes peuvent penser que c'est Hello World, et d'autres peuvent le penser ? est World. , en fait, le résultat de l'opération est World,
Parce que l'opérateur + a une priorité plus élevée que l'opérateur conditionnel, l'ajout de parenthèses à ce moment rendra votre code plus facile à lire. Deuxièmement, restez impressionné par la technologie. La plus grande peur est que vous pensez tout savoir, mais en réalité vous ne savez rien.

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!