Detaillierte Erläuterung der Verwendung des Ausführungskontexts auf Seiten

Dieses Mal werde ich Ihnen die Verwendung des Ausführungskontexts auf der Seite ausführlich erläutern. Was sind die Vorsichtsmaßnahmen zum Ausführungskontext auf der Seite? .

Wenn der JavaScript-Code einen ausführbaren Code ausführt, wird der entsprechende Ausführungskontext erstellt und der Kontext in den Kontextstapel verschoben.

Kontext enthält die folgenden 3 wichtigen Attribute:

name	-
变量对象(VO, variable object)	当前函数定义的变量、函数、参数
作用域链(Scope chain)	源代码定义时形成的作用域链
this

Kontext ist ein abstraktes Konzept. Um das Verständnis zu erleichtern, gehen wir davon aus, dass der Kontext ein Objekt ist und drei Attribute enthält: VO, Scope und dies:

function foo (c) {
  let a = 1
  let b = function () {}
}
// foo函数的上下文
fooContext = {
        VO: {
            arguments: { // 实参
              c: undefind,
              length: 0
            },
            a: 1, // 变量
            b: reference to function (){} // 函数
        },
        Scope: [VO, globalContext.VO], // 作用域链
        this: undefind // 非严格模式下为 this
    }

Der Kontext ist also die Umgebung oder abhängige Ressource wenn die Funktion ausgeführt wird. Eine Sammlung, die bestimmt, welche Variablen und Funktionen abgerufen werden können, wenn die Funktion ausgeführt wird.

Ausführungskontext (EC): Wenn sich die Funktion im Ausführungsstatus befindet, wird der Kontext der Funktion als Ausführungskontext bezeichnet. Wenn sich die Funktion gleichzeitig im Nichtausführungsstatus befindet, ist dies der Fall der (gewöhnliche) Kontext. 执行上下文 ist also nur ein anderer Zustand von 上下文, und es gibt im Wesentlichen keinen Unterschied zwischen ihnen.

Kontextstapel

Der Kontextstapel wird auch als Ausführungsstapel (ECS) bezeichnet. Der JavaScript-Parser selbst im Browser ist Single-Threaded, das heißt, er kann nur einen Kontext und den entsprechenden verarbeiten Codesegment gleichzeitig, sodass die JavaScript-Parsing-Engine den Kontextstapel verwendet, um den Kontext zu verwalten. Alle Kontexte werden nach ihrer Erstellung in der Kontextstapelwarteschlange gespeichert. Das untere Ende des Stapels ist der globale Kontext und das obere Ende des Stapels ist der aktuell ausgeführte Kontext.

Ein Kontext ist eine Ausführungseinheit, und JavaScript verwaltet Ausführungseinheiten in einem Stapel. Wenn die Seite initialisiert wird, wird der globale Kontext zuerst an den unteren Rand des Stapels verschoben. Wenn die ausführbare Funktion dann gemäß den Regeln ausgeführt wird, wird der Kontext der Funktion nach 上下文栈 verschoben die Ressourcen, die für die Ausführung der Funktion erforderlich sind (Variablenobjekte, Bereichsketten usw.), diese Ressourcen werden Ausdrücken bereitgestellt, wenn die Funktion ausgeführt wird.

Der Ausführungskontext kann als die Umgebung verstanden werden, in der die Funktion ausgeführt wird. Gleichzeitig ist der Ausführungskontext auch ein unsichtbares Konzept.

Es gibt 3 Ausführungsumgebungen in JavaScript:

• Globale Umgebung: window im Browser, global in der Knotenumgebung, wenn die Seite initialisiert wird. Wann Wenn die Funktion aufgerufen und ausgeführt wird, wird der globale Kontext in den Kontextstapel verschoben.

• Funktionsumgebung: Wenn die Funktion aufgerufen und ausgeführt wird, werden die Ressourcen der Funktion gesammelt. Der Kontext wird erstellt und in den Kontextstapel verschoben.

• Bewertungsumgebung, veraltet

Eine laufende Umgebung entspricht einem Kontext. Der Kontext an der Spitze des Stapels wird nach seiner Ausführung automatisch vom Stapel entfernt und dann nach unten verschoben, bis alle Kontexte vollständig ausgeführt wurden. Schließlich wird der globale Kontext zerstört, wenn der Browser geschlossen wird. Zum leichteren Verständnis geben wir ein Beispiel:

let i = 0
function foo () {
    i++
    console.log(i, 'foo')
}
function too () {
    i++
    console.log(i, 'too')
    foo()
}
function don () {
    i++
    console.log(i, 'don')
    too()
}
don()
 // 1 "don"
 // 2 "too"
 // 3 "foo"

Die Logik des obigen Codes besteht darin, zuerst don() und dann too(), foo() auszuführen. Der Kontextstapel beim Ausführen von foo() sieht folgendermaßen aus:

Wir gehen davon aus, dass der Kontextstapel ein Array ist: ECStack:

ECStack = []

Javascript wird geladen Nach Abschluss muss zunächst der globale Code analysiert und ausgeführt werden, sodass der globale Kontext während der Initialisierung in den Kontextstapel verschoben wird, den wir zur Darstellung mit globalContext verwenden.

ECStack = [
    globalContext
]

Der globale Bereich bleibt während der gesamten Codeausführungsphase bestehen, bis die Seite ECStack leer ist und globalContext zerstört wird.

Wenn der globale Kontext erstellt wird, werden Vorgänge wie Variablenheraufstufung und Variablenobjektgenerierung ausgeführt, und dann wird der ausführbare Code (Funktionen, Ausdrücke) im aktuellen Kontext ausgeführt. Wenn ein Funktionsaufruf auftritt, wird der Kontext der Funktion zum Kontextstapel push hinzugefügt.

function foo () {
    console.log('foo')
}
function too () {
    console.log('too')
    foo()
}
function don () {
    too()
}
don()

Die Ausführungslogik kann wie folgt verstanden werden:

1. zu don() ausführen, den internen Code der Don-Funktion analysieren

2. um don zu generieren Der Kontext der Funktion (vo, Scope-Kette, this)

3. Den Kontext von don an ECStack übertragen

4. Führe den Ausdruck im Don-Funktionskörper aus

5. Execute too()

6. Generiere den Kontext der Too-Funktion (vo, Scope-Kette, this)

7. Den Kontext von too in ECStack verschieben

8. ...

Der Javascript-Parser wird fortgesetzt um zu rekursieren, bis die Funktion „foo“ ausgeführt wird … Der Kontext der Funktion „foo“ wird gelöscht … und kehrt dann zum Kontext globalContext zurück … wartet … und führt die Rückruffunktion aus, wenn die Rückruffunktion des Ereignisses ist aktiviert. (Dies betrifft den Ausführungsmechanismus und die Ereignisschleife von Javascript. Bitte beachten Sie die folgenden Artikel ^_^)

执行逻辑的伪代码如下：

// 伪代码
// don()
ECStack.push(<don> functionContext);
// 在don中调用了too, push too的上下文到上下文栈里
ECStack.push(<fun2> functionContext);
// 在too中调用了foo， push foo的上下文到上下文栈里
ECStack.push(<fun3> functionContext);
// foo执行完毕, 弹出上下文
ECStack.pop();
// too执行完毕， 弹出上下文
ECStack.pop();
// don执行完毕， 弹出上下文
ECStack.pop();
// 非全局上下文执行完毕被弹出后会一直停留在全局上下文里，直至页面关闭</fun3></fun2></don>

需要注意的是，上下文与作用域（scope）是不同的概念。上下文是一个运行时概念，浏览器运行后执行 js 代码，将不同的上下文加入上下文栈中，顶层的上下文对应的代码块执行完后又将该上下文销毁。 而作用域是一个静态概念，根据所在代码片段的位置及词法关系确立的，不管浏览器运行与否，源代码的作用域关系、变量的访问权限依然不变。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

前端测试金字塔使用步骤详解

怎样处理MySQL数据库拒绝访问

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung des Ausführungskontexts auf Seiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!