Detaillierte Erläuterung der Javascript-Ausführungsumgebung und der Scope_Javascript-Fähigkeiten

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;
  }
}

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();

 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);

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

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

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

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