Présentation d'exemples de portée de variable JavaScript

Cet article présente principalement la portée des variables JavaScript L'éditeur pense que c'est plutôt bien, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil

En JavaScript, les variables déclarées avec var ont en fait une portée.

Si une variable est déclarée à l'intérieur du corps de la fonction, la portée de la variable est l'intégralité du corps de la fonction, et la variable ne peut pas être référencée en dehors du corps de la fonction :

'use strict';

function foo() {
  var x = 1;
  x = x + 1;
}

x = x + 2; // ReferenceError! 无法在函数体外引用变量x

Si deux fonctions différentes déclarent la même variable, alors la variable ne fonctionne que dans le corps de la fonction respective. En d'autres termes, les variables portant le même nom à l'intérieur de différentes fonctions sont indépendantes les unes des autres et ne s'affectent pas les unes les autres :

'use strict';

function foo() {
  var x = 1;
  x = x + 1;
}

function bar() {
  var x = 'A';
  x = x + 'B';
}

Puisque les fonctions JavaScript peuvent être imbriquées, à ce moment, les Les fonctions internes peuvent accéder aux variables définies par les fonctions externes, mais pas l'inverse :

'use strict';

function foo() {
  var x = 1;
  function bar() {
    var y = x + 1; // bar可以访问foo的变量x!
  }
  var z = y + 1; // ReferenceError! foo不可以访问bar的变量y!
}

Si le noms de variables des fonctions internes et externes Que dois-je faire si j'ai le même nom ?

'use strict';

function foo() {
  var x = 1;
  function bar() {
    var x = 'A';
    alert('x in bar() = ' + x); // 'A'
  }
  alert('x in foo() = ' + x); // 1
  bar();
}

Cela montre que les fonctions JavaScript partent de leur propre définition de fonction lors de la recherche de variables et effectuent une recherche de "l'intérieur" vers "l'extérieur". Si la fonction interne définit une variable du même nom que la fonction externe, les variables de la fonction interne « protégeront » les variables de la fonction externe.

Promotion des variables

La définition de la fonction JavaScript a une caractéristique, elle va d'abord analyser les instructions de l'ensemble du corps de la fonction et "promouvoir" toutes les variables déclarées vers le haut de la fonction :

'use strict';

function foo() {
  var x = 'Hello, ' + y;
  alert(x);
  var y = 'Bob';
}

foo();

Bien qu'elle soit en mode strict, l'instruction var x = 'Hello, ' + y; ne rapporte pas d'erreur car la variable y est déclarée plus tard. Mais alert affiche Hello, undefined, indiquant que la valeur de la variable y est undefined. C'est précisément parce que le moteur JavaScript favorise automatiquement la déclaration de la variable y, mais ne favorise pas l'affectation de la variable y.

Pour la fonction foo() ci-dessus, le code vu par le moteur JavaScript est équivalent à :

function foo() {
  var y; // 提升变量y的申明
  var x = 'Hello, ' + y;
  alert(x);
  y = 'Bob';
}

Due à ce comportement de JavaScript Une "fonctionnalité" étrange, lorsque nous définissons des variables à l'intérieur d'une fonction, veuillez respecter strictement la règle de "déclarer d'abord toutes les variables à l'intérieur de la fonction". L'approche la plus courante consiste à utiliser un pour déclarer toutes les variables utilisées à l'intérieur de la fonction : var

function foo() {
  var
    x = 1, // x初始化为1
    y = x + 1, // y初始化为2
    z, i; // z和i为undefined
  // 其他语句:
  for (i=0; i<100; i++) {
    ...
  }
}

portée globale

Les variables qui ne sont définies dans aucune fonction ont une portée globale. En fait, JavaScript a un objet global

par défaut, et les variables dans la portée globale sont en fait liées à une propriété de window : window

'use strict';

var course = 'Learn JavaScript';
alert(course); // 'Learn JavaScript'
alert(window.course); // 'Learn JavaScript'

Par conséquent, accéder directement à la variable globale

équivaut exactement à accéder à course. window.course

Vous avez peut-être deviné que puisqu'il existe deux façons de définir une fonction, une fonction définie en mode variable

est en fait une variable globale. Par conséquent, la définition de la fonction de niveau supérieur est. également considérée comme une variable globale et liée à l'objet var foo = function () {} : window

'use strict';

function foo() {
  alert('foo');
}

foo(); // 直接调用foo()
window.foo(); // 通过window.foo()调用

Une autre supposition audacieuse est que la fonction alert() que nous appelons. directement à chaque fois est en fait une fenêtre Une variable :

'use strict';

window.alert('调用window.alert()');
// 把alert保存到另一个变量:
var old_alert = window.alert;
// 给alert赋一个新函数:
window.alert = function () {}

// 恢复alert:
window.alert = old_alert;
alert('又可以用alert()了!');

Cela montre que JavaScript n'a en fait qu'une seule portée globale. Si une variable (la fonction est également considérée comme une variable) n'est pas trouvée dans la portée actuelle de la fonction

, elle continuera à rechercher vers le haut. Enfin, si elle n'est pas trouvée dans la portée globale, une ReferenceError sera signalée. .

espace de noms

les variables globales seront liées à

si différents fichiers JavaScript utilisent la même variable globale, ou définition de niveau supérieur. les fonctions portant le même nom entraîneront des conflits de noms et seront difficiles à trouver. window

Une façon de réduire les conflits est de lier toutes vos variables et fonctions à une variable globale. Par exemple :

// 唯一的全局变量MYAPP:
var MYAPP = {};

// 其他变量:
MYAPP.name = 'myapp';
MYAPP.version = 1.0;

// 其他函数:
MYAPP.foo = function () {
  return 'foo';
};

Mettez tout votre code dans l'espace de noms unique

, ce qui réduira considérablement la possibilité de conflits de variables globales. MYAPP

De nombreuses bibliothèques JavaScript célèbres font cela : jQuery, YUI, underscore, etc.

Portée locale

Puisque la portée variable de JavaScript est en fait à l'intérieur de la fonction, nous sommes dans des blocs d'instructions tels que des boucles

. Impossible de définir des variables avec une portée locale : for

'use strict';

function foo() {
  for (var i=0; i<100; i++) {
    //
  }
  i += 100; // 仍然可以引用变量i
}

Afin de résoudre la portée au niveau du bloc, ES6 a introduit un nouveau mot-clé let, qui est remplacé par let var peut déclarer une variable au niveau du bloc :

'use strict';

function foo() {
  var sum = 0;
  for (let i=0; i<100; i++) {
    sum += i;
  }
  i += 1; // SyntaxError
}

Constante

由于var和let申明的是变量，如果要申明一个常量，在ES6之前是不行的，我们通常用全部大写的变量来表示“这是一个常量，不要修改它的值”：

var PI = 3.14;

ES6标准引入了新的关键字const来定义常量，const与let都具有块级作用域：

'use strict';

const PI = 3.14;
PI = 3; // 某些浏览器不报错，但是无效果！
PI; // 3.14

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!