Fonctionnalités avancées JavaScript - Détails de l'exemple de code de portée

La portée est divisée en portée globale et portée locale dans javascript, et la portée locale fait en fait référence à la portée de la fonction. JavaScript considère la fonction comme la portée minimale de la portée.

Portée globale

Objet accessible n'importe où dans le code, comme l'objet fenêtre et la propriété de l'objet fenêtre, Il a une portée mondiale.
1. Les variables définies dans la couche la plus externe sont tous des attributs de l'objet fenêtre par défaut ;
2. Les variables non définies sont globales par défaut et sont des attributs de l'objet fenêtre par défaut ; la nouvelle version du navigateur a résolu ce problème !
Par exemple :

var firstName = "leo";
function changeName() {
    var secondName = "jut";
    fullName = "jutleo";
    function getName() {
        console.log(secondName);
    }
    getName();
}
console.log(firstName);
console.log(fullName);//报错
// console.log(secondName);//报错
changeName();
// getName();//报错

Portée locale/Portée de la fonction (Portée locale/Portée de la fonction)

Lorsqu'une variable est définie dans une fonction, la variable n'est visible que par le courant function. , JavaScript recherchera la portée de la fonction actuelle. S'il n'est pas trouvé, il continuera à rechercher vers le haut jusqu'à ce qu'il ne soit pas trouvé dans la portée globale et renverra

var version = "version_1";
var f1 = function() {
    console.log(version);//version_1
}
f1();

n'est pas ; trouvé dans la fonction f1, continuez à rechercher

var version = "version_1";
var f2 = function() {
    var version = "version_2";
    console.log(version);//version_2
}
f2();

et trouvez

var socpe = "scope_01";
var f3 = function() {
    console.log(scope); //undefined
    var scope = "scope_02";
}
f3();

directement dans la fonction f2. Pourquoi est-ce ? Il s'avère que JavaScript recherche la variable scope dans la fonction f3 et la trouve. À ce stade, la portée externe est ignorée, mais lorsque l'exécution atteint console.log(scope), la portée n'a pas été initialisée, donc undefined

.

var f4 = function() {
    var scope = "scope_02";
    (function(){
        var scope = "scope_03";
        (function(){
            console.log(scope); //scope_03
        })();
    })();
}
f4();

est renvoyé.

L'imbrication doit suivre les mêmes règles. Commencez par rechercher dans la fonction. S'il n'est pas trouvé, passez au niveau supérieur !

var x_scope = "leo";
var f5 = function() {
    console.log(x_scope); //leo
}
var f6 = function() {
    var x_scope = "jut";
    f5();
}
f6();

Pourquoi ça ? Il s'avère que lorsque les fonctions JavaScript sont imbriquées, la portée est déterminée par la relation d'imbrication et l'ordre des appels est ignoré !

Cela dit, comment utiliser cette lunette ? Nous pouvons voir à partir des exemples ci-dessus que lorsque JavaScript recherche des variables, la chaîne qui monte dans l'ordre est la chaîne de portée. Dans les applications réelles, plus la position de la variable est profonde, plus la vitesse de lecture et d'écriture est lente jusqu'à ce qu'elle soit trouvée dans la portée globale.

Regardez l'exemple :

function setLabelBgColor(){
    document.getElementById("btn").onclick=function(){
        document.getElementById("label").style.backgroundColor="red";
    };
}

Selon la logique de recherche de la chaîne de portée, la recherche de la variable du document doit parcourir toute la chaîne de portée jusqu'à ce qu'elle soit finalement trouvée dans l'objet global Cette fonction fait référence à deux Second-rate. L'optimisation est la suivante :

function setLabelBgColor(){
    var doc = document;
    doc.getElementById("btn").onclick=function(){
        doc.getElementById("label").style.backgroundColor="red";
    };
}

Ceci n'est qu'un exemple. Faire cela n'améliorera pas significativement les performances ! Cependant, dans la pratique, il est nécessaire d'éviter la situation dans laquelle les variables globales sont accédées en grande quantité.

(function(exports){
    //do some thing ...
})(window);

Pensez-y, pourquoi toutes les bibliothèques et frameworks que vous voyez commencent-ils comme ça ?

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!