Maison  >  Article  >  interface Web  >  Analyse détaillée de la déclaration de variable et de la promotion de la déclaration de fonction en js (avec exemples)

Analyse détaillée de la déclaration de variable et de la promotion de la déclaration de fonction en js (avec exemples)

不言
不言original
2018-08-23 14:16:431559parcourir

Ce que cet article vous apporte est une analyse détaillée des déclarations de variables et des améliorations des déclarations de fonctions dans js (avec des exemples). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. .

Amélioration de la déclaration des variables
1. Définition de la variable
Vous pouvez utiliser var pour définir des variables. Si aucune valeur n'est attribuée à la variable, la valeur initiale de la variable n'est pas définie. .

2. Portée de la variable
La portée de la variable fait référence à la portée dans laquelle la variable fonctionne. Les variables sont divisées en variables globales et variables locales. Les variables globales sont définies globalement ; les variables locales ne sont valides que dans une fonction.
Dans le corps de la fonction, les variables locales ou les paramètres portant le même nom auront une priorité plus élevée que les variables globales. Autrement dit, s'il existe des variables locales ou des paramètres portant le même nom que les variables globales dans la fonction, les variables globales seront écrasées par les variables locales.
Toutes les variables non définies à l'aide de var sont considérées comme des variables globales

3 Portée de la fonction et déclaration à l'avance
Le rôle de fonction de JavaScript fait référence à toutes les variables déclarées dans la fonction Variables. sont toujours définies dans le corps de la fonction, ce qui signifie que les variables sont disponibles avant d'être déclarées. Cette fonctionnalité est appelée levage, c'est-à-dire que toutes les déclarations dans les fonctions JavaScript (uniquement les déclarations, mais pas les affectations) sont hissées en haut du corps. corps de fonction, laissant les opérations d’affectation de variables là où elles se trouvaient. Prenons l'exemple suivant :
Remarque : La déclaration préalable est effectuée lors de la pré-compilation du moteur JavaScript, avant que le code ne commence à s'exécuter.

var scope = 'global';function f(){
    console.log(scope);    
    var scope = 'local';
    console.log(scope);
}

En raison de la promotion de la déclaration au sein de la fonction, le code ci-dessus ressemble en fait à ceci

var scope = 'global';function f(){
    var scope;    //变量声明提升到函数顶部
    console.log(scope);
    scope = 'local';    //变量初始化依然保留在原来的位置
    console.log(scope);
}

Après une telle transformation, la réponse est très évidente. Étant donné que la portée a été définie avant la première instruction console.log(scope), mais qu'aucune valeur n'a été attribuée, la référence de la portée n'est pas définie pour le moment. Avant la deuxième instruction console.log(scope), une valeur a été attribuée à la portée. valeur de 'local', donc le résultat de sortie est local.

Promotion de la déclaration de fonction
Syntaxe de déclaration de fonction

f('superman');function f(name){
    console.log(name);
}

Syntaxe de l'expression de fonction

f('superman');var f= function(name){
    console.log(name);
}

Lorsque vous exécutez le code ci-dessus, un l'erreur sera signalée Uncaught ReferenceError: f is not definition(…), le message d'erreur montre que f n'est pas défini.
Pourquoi y a-t-il des différences entre les déclarations de fonction et les expressions de fonction dans le même code ?
C'est parce que la déclaration de fonction a une fonctionnalité très importante : le levage de la déclaration de fonction. L'instruction de déclaration de fonction sera hissée en haut du script externe ou de la portée de la fonction externe (est-ce très similaire au levage de variable). Grâce à cette fonctionnalité, la déclaration de fonction peut être placée après l'instruction qui l'appelle. Comme dans l’exemple ci-dessous, quel devrait être le résultat final ? :

var getName = function(){
    console.log(2);
}function getName (){
    console.log(1);
}
getName();

Certaines personnes peuvent penser que le résultat final est 1. Analysons-le.Cet exemple implique la promotion de déclarations de variables et la promotion de déclarations de fonctions. Comme mentionné précédemment dans la promotion de la déclaration de fonction, la déclaration de fonction function getName(){} sera avancée vers le haut. L'expression de fonction var getName = function(){} montre la promotion de la déclaration de variable. Donc, dans ce cas, getName est également une variable, donc la déclaration de cette variable sera également promue vers le bas, tandis que l'affectation de la variable restera toujours à sa position d'origine. Il convient de noter que les fonctions sont prioritaires. Bien que les déclarations de fonctions et les déclarations de variables soient promues, les fonctions seront promues en premier, puis les variables. Par conséquent, la fonction ci-dessus peut être convertie en ce qui suit :

function getName(){    //函数声明提升到顶部
    console.log(1);
}
var getName;    //变量声明提升
getName = function(){    //变量赋值依然保留在原来的位置
    console.log(2);
}
getName();    // 最终输出:2

Le résultat final est donc : 2. Dans l'exemple d'origine, bien que la déclaration de fonction se trouve après l'expression de fonction, parce que la déclaration de fonction est promue au sommet, getName est ensuite écrasée par l'opération d'affectation de l'expression de fonction, donc 2 est affiché.

Recommandations associées :



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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn