Quelle est la différence entre la portée au niveau du bloc et la portée de la fonction dans js ? (analyse du code)

Ce que cet article vous apporte concerne la différence entre la portée au niveau du bloc et la portée de la fonction dans js ? (Analyse du code) a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile.

Pourquoi avons-nous besoin d'une portée de bloc ?

ES5 n'a qu'une portée globale et une portée de fonction, et aucune portée au niveau du bloc, ce qui entraîne de nombreux scénarios déraisonnables.

Dans le premier scénario, la variable interne peut écraser la variable externe :

var tmp = new Date();

function f(){
  console.log(tmp);
  if(false){
    var tmp = "hello";
  }
}

f(); // undefined

Dans le code ci-dessus, une fois la fonction f exécutée, le résultat de sortie est undefined en raison de la variable Lifting, la variable tmp interne écrase la variable tmp externe.

Dans le deuxième scénario, la variable de boucle utilisée pour la technologie est divulguée en tant que variable globale :

var s = "hello";
for(var i=0;i<s.length;i++){
  console.log(s[i]);
}

console.log(i); // 5

Dans le code ci-dessus, la variable i n'est utilisée que pour contrôler la boucle , mais une fois la boucle terminée, elle ne disparaît pas, elle est divulguée dans une variable globale.

Portée au niveau du bloc d'ES6

letAjoute en fait une nouvelle portée au niveau du bloc à JavaScript

function f1(){
  let n = 5;
  if(true){
    let n = 10;
  }
  console.log(n); // 5
}

La fonction ci-dessus a 2 blocs de code, des variables n sont déclarés et 5 est affiché après l'exécution. Cela signifie que le bloc de code externe n'est pas affecté par le bloc de code interne. Si vous utilisez var pour définir la variable n, la valeur de sortie finale est 10.

La portée externe ne peut pas lire les variables de la portée interne :

{
    {let insane = "hello"}
    console.log(insance); // 报错
}

La portée interne peut définir des variables portant le même nom que la portée externe :

{
    let a = "hello";
    {let a = "hello"}
}

L'émergence de la portée au niveau du bloc rend en fait l'expression de fonction immédiatement exécutée (IIFE) largement utilisée n'est plus nécessaire : ​​

// IIFE写法
(function(){
  var tmp = ...;
  ...
}());

// 块级作用域写法
{
  let tmp = ...;
  ...
}

La portée des variables avant ES6 était la portée de la fonction, parfois dans certains temporaires les variables sont nécessaires localement dans la fonction. Puisqu'il n'y a pas de portée au niveau du bloc, le code local sera encapsulé dans IIEF, afin d'obtenir l'effet souhaité sans introduire de variables temporaires redondantes. Après l'introduction de la portée des blocs, l'IIEF n'est bien sûr plus nécessaire !

function f(){
    ...
    swap(var_a,var_b);
    (function swap(a,b){
        var tmp;
        tmp = a;
        a = b;
        b=tmp;
    })(var_a,var_b);
}

Comme dans le code ci-dessus, tmp est encapsulé dans IIFE, il ne polluera donc pas la fonction de niveau supérieur ; et avec une portée au niveau du bloc, il n'est pas nécessaire de l'encapsuler dans IIEF, juste mettez-le directement dans un niveau de bloc.

function f(){
    let a,b;
    ...
    {
        let tmp;
        tmp = a;
        a = b;
        b=tmp;
    }
}

Pour faire simple, le but de l'exécution immédiate de la fonction anonyme est d'établir une portée au niveau du bloc. Maintenant qu'il existe une véritable portée au niveau du bloc, il n'est plus nécessaire d'exécuter l'anonyme. fonctionner immédiatement.

Recommandations associées :

Explication de la portée et des exemples de fermeture de fonction dans js

Portée au niveau du bloc PHP{} détaillée explication

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!