Detaillierte Erläuterung der Javascript-Ausführungsumgebung und der Scope_Javascript-Fähigkeiten-js-Tutorial-php.cn

Ich habe kürzlich „JavaScript Advanced Programming 3“ noch einmal gelesen und denke, dass ich einige Blogs schreiben sollte, um einige der Kenntnisse aufzuzeichnen, die ich gelernt habe, sonst vergesse ich alles. Was ich heute zusammenfassen möchte, ist die Ausführungsumgebung und der Umfang von js.

Lassen Sie uns zunächst über die Ausführungsumgebung sprechen

1. Ausführungsumgebung
Das Konzept im Buch, die Ausführungsumgebung, definiert Variablen oder andere Daten, auf die Funktionen Zugriff haben, und bestimmt deren jeweiliges Verhalten. Jeder Ausführungsumgebung ist ein Variablenobjekt zugeordnet. In diesem Objekt werden alle in der Umgebung definierten Variablen und Funktionen gespeichert. Obwohl wir beim Schreiben von Code keinen Zugriff auf dieses Objekt haben, verwendet der Parser es im Hintergrund bei der Datenverarbeitung.

　Ausführungsumgebung ist ein Konzept, ein Mechanismus, der definiert, ob eine Variable oder Funktion die Berechtigung hat, auf andere Daten zuzugreifen

In Javascript gibt es drei Arten von ausführbarem JavaScript-Code:
1. Globaler Code, d. h. globaler Code, der sich in keiner Funktion befindet, wie zum Beispiel: eine JS-Datei, in eine HTML-Seite eingebetteter JS-Code usw.
2. Eval-Code, ein JS-Code, der mithilfe der Funktion eval() dynamisch ausgeführt wird.
3. Funktionscode, d. h. der JS-Code des Funktionskörpers in der benutzerdefinierten Funktion.

Überspringen Sie den Evaluierungscode und sprechen Sie nur über die globale Ausführungsumgebung und die Funktionsausführungsumgebung.

1. Globale Umgebung:

Die globale Umgebung ist die peripherste Ausführungsumgebung. Die globale Ausführungsumgebung wird als Fensterobjekt betrachtet. Daher werden alle globalen Variablen und Funktionen als Eigenschaften und Methoden des Fensterobjekts erstellt. Wenn der Code in den Browser geladen wird, wird die globale Ausführungsumgebung erstellt (die globale Ausführungsumgebung wird zerstört, wenn wir die Webseite oder den Browser schließen). Beispielsweise wird auf einer Seite eine globale Ausführungsumgebung erstellt, wenn der JS-Code zum ersten Mal geladen wird.

Aus diesem Grund haben Schließungen den Nachteil von Speicherlecks. Weil die externe Funktion im Abschluss als globale Umgebung behandelt wird. Es wird also nicht zerstört und bleibt immer im Speicher.

2. Funktionsausführungsumgebung

Jede Funktion verfügt über ihre eigene Ausführungsumgebung. Wenn die Ausführung einer Funktion erfolgt, wird die Ausführungsumgebung der Funktion an die Spitze eines Ausführungsumgebungsstapels verschoben und das Ausführungsrecht wird erhalten. Wenn die Ausführung der Funktion abgeschlossen ist, wird ihre Ausführungsumgebung von der Oberseite des Stapels entfernt und die Ausführungsrechte werden an die vorherige Ausführungsumgebung zurückgegeben. Dies ist der Ausführungsablauf in einem ECMAScript-Programm.

Es kann auch so interpretiert werden: Wenn eine JavaScript-Funktion aufgerufen wird, tritt die Funktion in die der Funktion entsprechende Ausführungsumgebung ein. Wenn eine andere Funktion aufgerufen wird, wird eine neue Ausführungsumgebung erstellt und der Ausführungsprozess befindet sich während des Funktionsaufrufs in dieser Umgebung. Wenn die aufgerufene Funktion zurückkehrt, kehrt der Ausführungsprozess zur ursprünglichen Ausführungsumgebung zurück. Daher stellt der laufende JavaScript-Code einen Ausführungsumgebungsstapel dar.

　Die lokale Umgebung der Funktion wird erstellt, wenn die Funktion aufgerufen wird (nachdem der Code innerhalb der Funktion ausgeführt wurde, wird die Umgebung zerstört und alle darin gespeicherten Variablen und Funktionsdefinitionen werden ebenfalls zerstört).

2-1 Definitionszeitraum

Wenn eine Funktion definiert ist, wird ein [[scope]]-Attribut erstellt. Dieses Objekt entspricht einer Liste von Objekten. Auf die Objekte in der Liste kann nur innerhalb von JavaScript zugegriffen werden.

　(Umfang bedeutet auch Umfang.)

Wir definieren eine globale Funktion A, dann erstellt die A-Funktion ein [[scope]]-Attribut von A. Derzeit enthält [[scope]] nur das globale Objekt [Global Object].

Und wenn wir eine B-Funktion in A definieren, dann erstellt die B-Funktion auch ein [[scope]]-Attribut. Das [[scope]]-Attribut von B enthält zwei Objekte, eines ist das aktive Objekt von A Aktivierungsobjekt Eines ist das globale Objekt, das Aktivitätsobjekt von A befindet sich vorne und das globale Objekt befindet sich hinten.

Kurz gesagt, die Reihenfolge der Objektliste im [Scope]-Attribut einer Funktion ist das Aktivierungsobjektobjekt der oberen Schichtfunktion, dann die obere Schicht bis hin zum äußersten globalen Objekt.

Das Folgende ist der Beispielcode: A hat nur einen Bereich und B hat zwei Bereiche

// 外部函数
function A(){
  var somevar;
  
  // 内部函数
 function B(){
   var somevar;
  }
}

Nach dem Login kopieren

2-2 Ausführungszeitraum

Wenn eine Funktion ausgeführt wird, betritt sie die Ausführungsumgebung dieser Funktion. Zuerst erstellt sie ihr eigenes Aktivitätsobjekt [Aktivierungsobjekt] (dieses Objekt enthält Parameter (Argumente), lokale Variablen (einschließlich benannter Parameter) und die Bereichskette [[Bereichskette]] eines variablen Objekts, dann den [Bereich] dieser Ausführungsumgebung der Reihe nach nach [[Bereichskette]] kopieren und schließlich das aktive Objekt in [[Bereichskette]] verschieben. Die Oberseite von [ Scope-Kette]] ist ein geordneter Stapel, der einen geordneten Zugriff auf alle Variablen und Objekte gewährleistet, auf die die Ausführungsumgebung Zugriff hat

// 第一步页面载入创全局执行环境global executing context和全局活动象
// 定义全局[[scope]],只含有Window对象
// 扫描全局的定义变量及函数对象:color【undefined】、changecolor【FD创建changecolor的[[scope]]，此时里面只含有全局活动对象】,加入到window中，所以全局变量和全局函数对象都是做为window的属性定义的。
// 程序已经定义好所以在此执行环境内任何位置都可以执行changecolor(),color也已经被定义，但是它的值是undefined

// 第二步color赋值"blue"
var color = "blue";

// 它是不需要赋值的，它就是引用本身
function changecolor() {
 // 第四步进入changecolor的执行环境
 // 复制changecolor的[[scope]]到scope chain
 // 创建活动对象，扫描定义变量和定义函数，anothercolor【undefined】和swapcolors【FD创建swapcolors的[[scope]]加入changecolor的活动对象和全局活动对象】加入到活动对象,活动对象中同时还要加入arguments和this
 // 活动对象推入scope chain 顶端
 // 程序已经定义好所以在此执行环境内任何位置都可以执行swapcolors(),anothercolor也已经被定义好，但它的值是undefined
 
 // 第五anothercolor赋值"red"
 var anothercolor = "red";
 
 // 它是不需要赋值的，它就是引用本身
 function swapcolors() {
  // 第七步进入swapcolors的执行环境，创建它的活动对象
  // 复制swapcolors的[[scope]]到scope chain
  // 扫描定义变量和定义函数对象，活动对象中加入变量tempcolor【undefined】以及arguments和this
  // 活动对象推入scope chain 顶端
  
  // 第八步tempcolor赋值anothercolor,anothercolor和color会沿着scope chain被查到，并继续往下执行
  var tempcolor = anothercolor;
   anothercolor = color;
   color = tempcolor; 
 }

 // 第六步执行swapcolors,进入其执行环境
 swapcolors();
}

// 第三步执行changecolor,进入其执行环境
changecolor();

Nach dem Login kopieren

2-3访问标识符：

　　当执行js代码的过程中，遇到一个标识符，就会根据标识符的名称，在执行上下文(Execution Context)的作用域链中进行搜索。从作用域链的第一个对象（该函数的Activation Object对象）开始，如果没有找到，就搜索作用域链中的下一个对象，如此往复，直到找到了标识符的定义。如果在搜索完作用域中的最后一个对象，也就是全局对象(Global Object)以后也没有找到，则会抛出一个错误，提示undefined。

二、Scope/Scope Chain(作用域/作用域链)

　　当代码在一个环境中执行时，都会创建一个作用域链。作用域链的用途是保证对执行环境有权访问的所有变量和函数的有序访问。整个作用域链是由不同执行位置上的变量对象按照规则所构建一个链表。作用域链的最前端，始终是当前正在执行的代码所在环境的变量对象。

　　如果这个环境是函数，则将其活动对象（activation object)作为变量对象。活动对象在最开始时只包含一个变量，就是函数内部的arguments对象。作用域链中的下一个变量对象来自该函数的包含环境，而再下一个变量对象来自再下一个包含环境。这样，一直延续到全局执行环境，全局执行环境的Variable Object始终是作用域链中的最后一个对象。

如图所示：

书中例子：

 var color="blue";
 function changecolor(){
 var anothercolor="red";
 function swapcolors(){
 var tempcolor=anothercolor;
 anothercolor=color;
 color=tempcolor;
  // Todo something  
  }
 swapcolors();
}
changecolor();
 //这里不能访问tempcolor和anocolor;但是可以访问color;
alert("Color is now "+color);

Nach dem Login kopieren

　通过上面的分析，我们可以得知内部环境可以通过作用域链访问所有的外部环境，但外部环境不能访问内部环境中的任何变量和函数。

　　这些环境之间是线性、有次序的。每个环境都可以向上搜索作用域链，以便查询变量和函数名；但任何环境不能通过向下搜索作用域链条而进入另一个执行环境。

　　对于上述例子的swapcolor()函数而言，其作用域链包括：swapcolor()的变量对象、changecolor（）变量对象和全局对象。swapcolor（）的局部环境开始先在自己的Variable Object中搜索变量和函数名，找不到，则向上搜索changecolor作用域链。。。。。以此类推。但是，changecolor()函数是无法访问swapcolor中的变量

启示：尽量使用局部变量，能够减少搜索的时间

1、没有块级作用域

与C、C++以及JAVA不同，Javscript没有块级作用域。看下面代码：

if(true){
  var myvar = "张三"; 
 }
 alert(myvar);// 张三

Nach dem Login kopieren

如果有块级作用域，外部是访问不到myvar的。再看下面

for (var i=0;i<10;i++){
   console.log(i) 
  }
  
  alert(i); // 10

Nach dem Login kopieren

对于有块级作用域的语言来说，比如java或是c#代码，i做为for初始化的变量，在for之外是访问不到的。因为i只存在于for循环体重，在运行完for循环后，for中的所有变量就被销毁了。而在javascript中则不是这样的，在for中的变量声明将会添加到当前的执行环境中（这里是全局执行环境），因此在for循环完后，变量i依旧存在于循环外部的执行环境。因此，会输出10。

2、声明变量

使用var声明变量时，这个变量将被自动添加到距离最近的可用环境中。对于函数内部，最接近的环境就是函数的局部变量。如果初始化变量时没有使用var，该变量会自动添加到全局函数中。

代码如下：

var name = "小明";
function getName(){
 alert( name ); //'undefined'
 var name = '小黄';
 alert(name ); //小黄
}
getName()

Nach dem Login kopieren

为什么第一个name是undefined呢。这是因为，javascript解析器，进入一个函数执行环境，先对var 和 function进行扫描。

相当于会把var或者function【函数声明】声明提升到执行环境顶部。

也就是说，进入我们的getName函数的时候，标识符查找机制查找到了var，查找的name是局部变量name，而不是全局的name,因为函数里面的name被提升到了顶部。

上面的代码会被解析成下面这样：

var name = "小明";
function getName(){
 var name;
 alert( name ); //'undefined'
 var name = '小黄';
 alert(name ); //小黄
}
getName()

Nach dem Login kopieren

延长作用域链：

　　虽然执行环境只有两种——全局作用域和函数作用域，但是还是可以通过某种方式来延长作用域链。因为有些语句可以在作用域链的顶部增加一个临时的变量对象。
有两种情况会发生这种现象：
1、try-catch语句的catch块；
2、with语句；

以上就是本文的全部内容，希望对大家学习理解javascript执行环境及作用域有所帮助。