Detaillierte Erläuterung der JavaScript-Variablen und des Gültigkeitsbereichs

Wenn Sie noch nie auf dem Platz des Himmlischen Friedens, in der Verbotenen Stadt oder an der Chinesischen Mauer waren, bedeutet das, dass Sie noch nie in Peking waren. Wenn Sie den Umfang von JS-Variablen nicht verstehen, ist dies gleichbedeutend damit, JS nicht zu lernen. Erfahren Sie mehr über die Bedeutung des JS-Variablenbereichs für sich! Tipp: Denken Sie beim Lesen dieses Artikels daran, auch die Kommentare zu lesen!

JS ist eine schwach typisierte (lose typisierte) Sprache, was bedeutet, dass sie von Natur aus anders und einzigartig ist!
Bevor wir den Variablenbereich erklären, wollen wir zunächst die Variablen in JS verstehen. Variablen in JS unterscheiden sich stark von anderen Sprachen. Da JS-Variablen einen lockeren (nicht obligatorischen) Charakter haben, handelt es sich lediglich um einen Namen, der einen bestimmten Werttyp in einer bestimmten Phase enthält.

JS-Variablen enthalten zwei verschiedene Datentypen: Basisdatentypen (Werttypen) und Referenzdatentypen (komplexe Datentypen).

Werte grundlegender Datentypen werden im Stapelspeicher gespeichert. Der Wert des Referenzdatentyps wird im Heapspeicher gespeichert, und nur die Zeigeradresse des Referenztyps bleibt im Stapelspeicher erhalten.
Es gibt fünf Grundtypen von Werten: undefiniert, Null, Boolean, Zahl und Zeichenfolge. Werte grundlegender Datentypen werden im Stapelspeicher gespeichert.

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

Schauen wir uns noch einmal die Referenztypen an:

/*在栈内存中存放 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

Als nächstes schauen wir uns den Vergleich zwischen Basisdatentypen und Referenztypen an

• Grundlegender Datentypenvergleich, der Vergleich ist der Wert:

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

• Referenztypvergleich, der Vergleich ist die 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);

Kommen Sie noch einmal. Werfen Sie einen Blick auf das Thema Basistypen und Referenztypen als Parameter in Funktionen

• Basistypen werden als Parameter verwendet, und Parameter sind lokale Variablen

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

• Referenzdatentyp als Parameter, Parameter ist globale Variable

/*引用数据类型传递的是引用地址，
因此函数体中的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

Lassen Sie uns zum Schluss über den Umfang sprechen! Der JS-Variablenbereich bezieht sich auf den Bereich, der von der Variablen betroffen ist. Der Bereich in JS ist in globalen Bereich und lokalen Bereich (Funktionsbereich) unterteilt. Im globalen Bereich definierte Variablen sind globale Variablen, und im lokalen Bereich definierte Variablen sind lokale Variablen.

Der globale Bereich ist der am weitesten peripher definierte Bereich. In Webbrowsern bezieht sich der globale Bereich auf das Fensterobjekt. Daher können Sie sich Variablen und Funktionen, die im globalen Bereich definiert sind, als Eigenschaften und Methoden des Fensterobjekts vorstellen!

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

• Globale Variablen und Funktionen sind Eigenschaften und Methoden des Fensterobjekts.

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

• Die im Funktionsbereich deklarierten Variablen haben denselben Namen wie die im globalen Gültigkeitsbereich deklarierten Variablen

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

• Durch Übergabe von Parametern. Die übergebenen Parameter sind Grundtypen und die Parameter sind lokale Variablen im Funktionskörper. Die übergebenen Parameter sind Referenztypen und die Parameter sind globale Variablen im Funktionskörper. Es wurde am Anfang des Artikels behandelt, daher werde ich es hier nicht erklären!

• Wenn eine Unterfunktion im Funktionskörper vorhanden ist, kann nur diese Funktion auf die Unterfunktion zugreifen.

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

Hinweis: Wenn Code innerhalb eines Bereichs ausgeführt wird, gibt es eine sogenannte Bereichskette. Seine Aufgabe besteht darin, die Ordnungsmäßigkeit des Zugriffs auf Variablen und Methoden sicherzustellen. Das heißt, wenn in der aktuellen Ausführungsumgebung eine bestimmte Variable oder Methode vorhanden ist, wird nicht peripher gesucht. Wenn sie nicht vorhanden ist, wird peripher gesucht, bis sie gefunden wird! Wenn es nicht gefunden werden kann, wird ein Fehler gemeldet! Das Verhalten der schichtweisen Suche nach bestimmten Variablen und Methoden bildet eine Operationskette. Diese Kette ist die Scope-Kette. Der Zugriff auf lokale Variablen ist viel schneller als auf globale Variablen, da keine Notwendigkeit besteht, außerhalb nach der angegebenen Variablen zu suchen.
* JS hat keinen Gültigkeitsbereich auf Blockebene. Der sogenannte Gültigkeitsbereich auf Blockebene bezieht sich auf den in geschweiften Klammern eingeschlossenen Code in if-, for- und anderen Anweisungen!

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

Wenn Sie eine Variable ohne das Schlüsselwort var in einer Funktion deklarieren, wird die Variable zu einer globalen Variablen. Allerdings kann dieses Verhalten leicht zu Namenskonflikten führen, weshalb es nicht jedem empfohlen wird, es zu verwenden!

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

Das liegt daran, dass die fn-Funktion in der Fensterumgebung ausgeführt wird, sodass a=12 im Funktionskörper der Ausführung von window.a=12 entspricht. Und window ist das Objekt der obersten Ebene von JS. Es kann auch davon ausgegangen werden, dass wir dem Objekt der obersten Ebene ein Attribut mit dem Wert 12 hinzugefügt haben. Die Variable a wird also zu einer globalen Variablen.
Wenn die Variable im Funktionskörper außerdem über das Schlüsselwort var deklariert wird, handelt es sich bei der Variablen um eine lokale Variable, auf die nur innerhalb des Funktionskörpers und nicht außerhalb des Funktionskörpers zugegriffen werden kann.

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

• Teilen Sie eine Interviewfrage von Alibaba zum Umfang:

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的区别讲解
  

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der JavaScript-Variablen und des Gültigkeitsbereichs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!