Explication détaillée des variables et de la portée JavaScript

Si vous n'êtes jamais allé à Tiananmen, à la Cité Interdite ou à la Grande Muraille, cela signifie que vous n'êtes jamais allé à Pékin. Si vous ne comprenez pas la portée des variables JS, cela équivaut à ne pas apprendre JS. Découvrez par vous-même l’importance de la portée des variables JS ! Astuce : Pensez à lire les commentaires en lisant cet article !

JS est un langage faiblement typé (vaguement typé), ce qui signifie qu'il est intrinsèquement différent et unique !
Avant d'expliquer la portée des variables, comprenons d'abord les variables dans JS. Les variables en JS sont très différentes des autres langages. Étant donné que les variables JS ont une nature vague (non obligatoire), elles constituent simplement un nom qui contient un type spécifique de valeur à une étape spécifique.

Les variables JS contiennent deux types de données différents : les types de données de base (types de valeur) et les types de données de référence (types de données complexes).

Les valeurs des types de données de base sont stockées dans la mémoire de la pile. La valeur du type de données de référence est stockée dans la mémoire tas et seule l'adresse du pointeur du type de référence est conservée dans la mémoire de pile.
Il existe cinq types de valeurs de base : non défini, Null, Boolean, Number et String. Les valeurs des types de données de base sont stockées dans la mémoire de pile.

//在栈内存中开辟一块空间存储值为"laotie"的变量namevar name="laotie";//在栈内存中开辟一块空间存储值为"laotie"的变量name2var name2=name;//name与name2是相对独立的，所以改变name2的值为"xiaozhang"，而name的值不会受到影响var name2="xiaozhang";
console.log(name);//laotieconsole.log(name2);//xiaozhang

Regardons à nouveau les types de référence :

/*在栈内存中存放 obj的地址
* 其值存放在堆内存中。
* 栈内存的地址的指向堆内存中的值。*/var obj={
    name:"zhangpeiyue"}/*将obj的地址赋值给obj2
所以在栈内存中存储的地址与obj的地址相同，
obj与obj2共享同一个值。
*/var obj2=obj;
obj2.name="xiaozhang";//因为obj与obj2共享同一个值，所以上行代码改变的是同一个值console.log(obj.name);//xiaozhang
 //你也可以认为obj即为obj2，引用类型比较的是地址，因此为trueconsole.log(obj==obj2);//true

Ensuite, regardons la comparaison entre les types de données de base et les types de référence respectivement

• Pour la comparaison des types de données de base, la comparaison est la valeur :

//基本数据类型比较的是值，只要值相等比较结果即为truevar a=1;var b=1;console.log(a==b);//truevar c=2;var d=c;console.log(c==d);//true

• Pour la comparaison du type de référence, la comparaison est l'adresse :

var obj={
    age:12}var obj2={
    age:12}//引用类型比较的是地址，而不是值。//由于每次创建的引用类型地址都不同，所以结果为falseconsole.log(obj==obj2);//falsevar obj3={
    age:12}//将obj3的地址赋值给obj4。所以地址相同var obj4=obj3;//由于比较的是地址，且obj3与obj4的地址相同，所以结果为trueconsole.log(obj3==obj4);

Examinons la question des types de base et des types de référence en tant que paramètres dans les fonctions

• Les types de base sont utilisés comme paramètres, et les paramètres sont des variables locales

/*接收的所有基本数据类型，接收的是其值。
接收的参数都是函数体中的局部变量。
在函数体内改变值，对外部不会产生任何影响*/function fn(a){
    a+=1;
    console.log(a);//14}
var a=13;fn(a);
console.log(a);//13

• Type de données de référence en tant que paramètre, le paramètre est une variable globale

/*引用数据类型传递的是引用地址，
因此函数体中的obj与函数外的obj的引用地址相同。
所以函数体中的obj与函数外的obj共享同一值，
改变其中一个值，其它的也会随之改变
*/function fn(obj){
    obj.name="laowang"
    console.log(obj.name);//laowang}
var obj={
    name:"laotie"}fn(obj);
console.log(obj.name);//laowang

Parlons enfin de portée ! La portée de la variable JS fait référence à la portée affectée par la variable. La portée dans JS est divisée en portée globale et portée locale (portée de fonction). Les variables définies dans la portée globale sont des variables globales et les variables définies dans la portée locale sont des variables locales.

La portée globale est la portée définie de la manière la plus périphérique dans les navigateurs Web, la portée globale fait référence à l'objet fenêtre. Par conséquent, vous pouvez considérer les variables et les fonctions définies dans la portée globale comme des propriétés et des méthodes de l'objet window !

var color="red";//定义一个全局colorfunction fn(){
    color="blue";//全局函数可以在函数内访问}fn();
console.log(color);//blue

• Les variables et fonctions globales sont des propriétés et des méthodes de l'objet window.

var color="red";//定义一个全局colorfunction fn(){    color="blue";//全局函数可以在函数内访问}window.fn();
console.log(window.color);//blue

• Les variables déclarées dans le scope de la fonction ont le même nom que les variables déclarées dans le scope global

var color="yellow";//定义全局变量colorfunction fn(){    //在函数体内如果拥有指定的变量，就不会去外层查找
    var color="red";//这里是局部变量color，外面是访问不到的哦
    console.log(color);//red}fn();
console.log(color);//yellow

• En passant des paramètres. Les paramètres transmis sont des types de base et les paramètres sont des variables locales dans le corps de la fonction. Les paramètres transmis sont des types référence et les paramètres sont des variables globales dans le corps de la fonction. Cela a été abordé au début de l’article, je ne l’expliquerai donc pas ici !

• Si une sous-fonction existe dans le corps de la fonction, seule cette fonction peut accéder à la sous-fonction.

var color="green";function fn(){
    //子函数是建议以下划线开头
    function _fn2(){
        var color2="orange";
        console.log(color);//green
        console.log(color2);//orange
    }
    _fn2();//_fn2()的作用域在fn()内}
fn();
_fn2();//在此处调用fn2()是调取不到的

Remarque : lorsque du code est exécuté dans une portée, il existe ce qu'on appelle une chaîne de portée. Son rôle est d'assurer le bon déroulement de l'accès aux variables et aux méthodes. C'est-à-dire que s'il existe une variable ou une méthode spécifiée dans l'environnement d'exécution actuel, elle ne recherchera pas périphériquement. Si elle n'existe pas, elle recherchera périphériquement jusqu'à ce qu'elle soit trouvée ! S'il ne peut pas être trouvé, une erreur sera signalée ! Le comportement de recherche de variables et de méthodes spécifiées couche par couche forme une chaîne d'opérations. Cette chaîne est la chaîne de portée. L'accès aux variables locales est beaucoup plus rapide que les variables globales car il n'est pas nécessaire de chercher à l'extérieur (rechercher) la variable spécifiée.
* JS n'a pas de portée au niveau du bloc. La portée dite au niveau du bloc fait référence au code entouré d'accolades dans les instructions if, for et autres !

if(true){    var name="zhang";
}
console.log(name);//zhang

Lorsque vous déclarez une variable sans le mot-clé var dans une fonction, la variable devient une variable globale. Cependant, ce comportement peut facilement provoquer des conflits de noms, il n'est donc pas recommandé à tout le monde de l'utiliser !

function fn(){    //此处a=12相当于window.a=12。
    a=12;//声明一个不带var关键字的变量}fn();
console.log(a);//12

Cela est dû au fait que la fonction fn est exécutée dans l'environnement de fenêtre, donc a=12 dans le corps de la fonction équivaut à exécuter window.a=12. Et window est l'objet de niveau supérieur de JS. On peut également considérer que nous avons ajouté un attribut d'une valeur de 12 à l'objet de niveau supérieur. La variable a devient donc une variable globale.
De plus, si la variable dans le corps de la fonction est déclarée via le mot-clé var, la variable est une variable locale et n'est accessible que dans le corps de la fonction et n'est pas accessible en dehors du corps de la fonction.

function fn(){
    var a=12;
    console.log(a);//12}fn();
console.log(a);//报错：a is not defined

• Partagez une question d'entretien d'Alibaba sur la portée :

var obj = {
    b: 2};var fn = function () {};
fn.c = 3;function test(x, y, z) {
    x = 4;
    y.b = 5;
    z.c = 6;    return z;
}
test(a, obj, fn);
console.log(a + obj.b + fn.c);//12

变量的生命周期

所谓变量的生命周期指的是变量由声明到销毁。
对于全局变量来讲，其生命周期是永久的，除非我们主动去销毁这个全局变量。而在函数体内声明的局部变量，当函数运行完以后，局部变量就失去了任何价值，它们也会随着函数的执行完毕而销毁。

var fn=function(){
    var a=1;//退出函数后，局部变量a会销毁
    console.log(a);
}fn();

• JS环境中分配的内存一般有如下生命周期
  内存分配：当我们声明变量、函数、对象的时候，系统会自动为他们分配内存
  内存使用：即读写内存，也就是使用变量、函数等
  内存回收：使用完毕，由垃圾回收自动回收不再使用的内存 

• 本文讲解了JavaScript的变量及作用域，更多相关内容请关注php中文网。

• 相关推荐：

• 关于$.ajax()方法参数详解

• 讲解数学对象Math相关内容

• 关于JS和JSP的区别讲解
  

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!