JavaScript-Closure Teil 2: Implementierung von Closure

Nachdem wir den theoretischen Teil besprochen haben, wollen wir vorstellen, wie Abschlüsse in ECMAScript implementiert werden. An dieser Stelle muss noch einmal betont werden: ECMAScript verwendet nur statische (lexikalische) Bereiche (während Sprachen wie Perl sowohl statische als auch dynamische Bereiche für Variablendeklarationen verwenden können).

var x = 10;
 
function foo() {
  alert(x);
}
 
(function (funArg) {
 
  var x = 20;
 
  // 变量"x"在(lexical)上下文中静态保存的，在该函数创建的时候就保存了
  funArg(); // 10, 而不是20
 
})(foo);

Technisch gesehen werden die Daten des übergeordneten Kontexts, der die Funktion erstellt hat, in der internen Eigenschaft [[Scope]] der Funktion gespeichert. Wenn Sie nicht wissen, was [[Scope]] ist, empfehlen wir Ihnen, zuerst das vorherige Kapitel zu lesen, das eine sehr detaillierte Einführung in [[Scope]] gibt. Wenn Sie [[Scope]] und das Wissen über die Umfangskette vollständig verstehen, werden Sie auch Abschlüsse vollständig verstehen.

Gemäß dem Funktionserstellungsalgorithmus sehen wir, dass in ECMAScript alle Funktionen Abschlüsse sind, da sie bei ihrer Erstellung die Bereichskette des oberen Kontexts speichern (mit Ausnahme von Ausnahmen) (Unabhängig davon, ob diese Funktion dies tut später aktiviert werden - [[Scope]] ist vorhanden, wenn die Funktion erstellt wird):

var x = 10;
 
function foo() {
  alert(x);
}
 
// foo是闭包
foo: <FunctionObject> = {
  [[Call]]: <code block of foo>,
  [[Scope]]: [
    global: {
      x: 10
    }
  ],
  ... // 其它属性
};

Wie gesagt, zu Optimierungszwecken, wenn eine Funktion keine freien Variablen verwendet. Wenn ja, ist die Implementierung möglicherweise nicht möglich in der Side-Effect-Domain-Kette gehalten werden. In der ECMA-262-3-Spezifikation wird jedoch nichts gesagt. Daher werden normalerweise alle Parameter während der Erstellungsphase im Attribut [[Scope]] gespeichert.

Einige Implementierungen ermöglichen den direkten Zugriff auf den Abschlussbereich. Beispielsweise gibt es in Rhino für das [[Scope]]-Attribut der Funktion ein nicht standardmäßiges __parent__-Attribut:

var global = this;
var x = 10;
 
var foo = (function () {
 
  var y = 20;
 
  return function () {
    alert(y);
  };
 
})();
 
foo(); // 20
alert(foo.__parent__.y); // 20
 
foo.__parent__.y = 30;
foo(); // 30
 
// 可以通过作用域链移动到顶部
alert(foo.__parent__.__parent__ === global); // true
alert(foo.__parent__.__parent__.x); // 10

Alle Objekte verweisen auf einen [[Scope]]

hier Beachten Sie außerdem, dass in ECMAScript im selben übergeordneten Kontext erstellte Abschlüsse ein gemeinsames [[Scope]]-Attribut haben. Mit anderen Worten: Änderungen, die ein bestimmter Abschluss an den Variablen von [[Scope]] vornimmt, wirken sich auf das Lesen ihrer Variablen durch andere Abschlüsse aus:

var firstClosure;
var secondClosure;
 
function foo() {
 
  var x = 1;
 
  firstClosure = function () { return ++x; };
  secondClosure = function () { return --x; };
 
  x = 2; // 影响 AO["x"], 在2个闭包公有的[[Scope]]中
 
  alert(firstClosure()); // 3, 通过第一个闭包的[[Scope]]
}
 
foo();
 
alert(firstClosure()); // 4
alert(secondClosure()); // 3

Das heißt: Alle internen Funktionen haben dasselbe übergeordnete Element Geltungsbereich

Es gibt ein sehr häufiges Missverständnis über diese Funktion. Entwickler erhalten oft nicht die erwarteten Ergebnisse, wenn sie Funktionen in Schleifenanweisungen erstellen (intern zählen), und die Erwartung besteht darin, dass jede Funktion ihren eigenen Wert hat.

var data = [];
 
for (var k = 0; k < 3; k++) {
  data[k] = function () {
    alert(k);
  };
}
 
data[0](); // 3, 而不是0
data[1](); // 3, 而不是1
data[2](); // 3, 而不是2

Das obige Beispiel beweist, dass im selben Kontext erstellte Abschlüsse ein [[Scope]]-Attribut gemeinsam haben. Daher kann die Variable „k“ im oberen Kontext leicht geändert werden.

activeContext.Scope = [
  ... // 其它变量对象
  {data: [...], k: 3} // 活动对象
];
 
data[0].[[Scope]] === Scope;
data[1].[[Scope]] === Scope;
data[2].[[Scope]] === Scope;

Auf diese Weise wird bei Aktivierung der Funktion das letzte verwendete k zu 3. Wie unten gezeigt, kann das Erstellen eines Abschlusses dieses Problem lösen:

var data = [];
 
for (var k = 0; k < 3; k++) {
  data[k] = (function _helper(x) {
    return function () {
      alert(x);
    };
  })(k); // 传入"k"值
}
 
// 现在结果是正确的了
data[0](); // 0
data[1](); // 1
data[2](); // 2

Sehen wir uns an, was im obigen Code passiert? Nachdem die Funktion „_helper“ erstellt wurde, wird sie durch Übergabe des Parameters „k“ aktiviert. Sein Rückgabewert ist ebenfalls eine Funktion, die im entsprechenden Array-Element gespeichert wird. Diese Technik führt zu folgenden Effekten: Wenn die Funktion aktiviert wird, erstellt „_helper“ jedes Mal ein neues Variablenobjekt, das den Parameter „x“ enthält, und der Wert von „x“ ist der übergebene Wert von „k“. Auf diese Weise wird der [[Scope]] der zurückgegebenen Funktion wie folgt:

data[0].[[Scope]] === [
  ... // 其它变量对象
  父级上下文中的活动对象AO: {data: [...], k: 3},
  _helper上下文中的活动对象AO: {x: 0}
];
 
data[1].[[Scope]] === [
  ... // 其它变量对象
  父级上下文中的活动对象AO: {data: [...], k: 3},
  _helper上下文中的活动对象AO: {x: 1}
];
 
data[2].[[Scope]] === [
  ... // 其它变量对象
  父级上下文中的活动对象AO: {data: [...], k: 3},
  _helper上下文中的活动对象AO: {x: 2}
];

Wir sehen, dass das [[Scope]]-Attribut der Funktion das hat, was wir wirklich wollen. Ja, in der richtigen Reihenfolge Um diesen Zweck zu erreichen, müssen wir zusätzliche variable Objekte in [[Scope]] erstellen. Es ist zu beachten, dass der Wert in der zurückgegebenen Funktion immer noch 3 ist, wenn Sie den Wert von „k“ erhalten möchten.

Übrigens glauben viele Artikel, in denen JavaScript vorgestellt wird, dass nur zusätzlich erstellte Funktionen Abschlüsse sind, was falsch ist. In der Praxis ist diese Methode die effektivste. Aus theoretischer Sicht sind jedoch alle Funktionen in ECMAScript Abschlüsse.

Die oben genannten Methoden sind jedoch nicht die einzigen. Der korrekte Wert von „k“ kann auch auf andere Weise ermittelt werden, wie folgt:

var data = [];
 
for (var k = 0; k < 3; k++) {
  (data[k] = function () {
    alert(arguments.callee.x);
  }).x = k; // 将k作为函数的一个属性
}
 
// 结果也是对的
data[0](); // 0
data[1](); // 1
data[2](); // 2

Funarg und Rückkehr

Eine weitere Funktion ist die Rückkehr von einem Abschluss. In ECMAScript gibt eine Return-Anweisung in einem Abschluss den Kontrollfluss an den aufrufenden Kontext (den Aufrufer) zurück. In anderen Sprachen wie Ruby gibt es viele Formen von Schließungen, und die entsprechenden Schließungsrückgaben sind ebenfalls unterschiedlich. Die folgenden Methoden sind möglich: Sie können direkt an den Aufrufer zurückgegeben werden, oder in einigen Fällen --Exit direkt aus dem Kontext .

Das ECMAScript-Standard-Exit-Verhalten ist wie folgt:

function getElement() {
 
  [1, 2, 3].forEach(function (element) {
 
    if (element % 2 == 0) {
      // 返回给函数"forEach"函数
      // 而不是返回给getElement函数
      alert('found: ' + element); // found: 2
      return element;
    }
 
  });
 
  return null;
}

Der folgende Effekt kann jedoch durch Try Catch in ECMAScript erzielt werden:

var $break = {};
 
function getElement() {
 
  try {
 
    [1, 2, 3].forEach(function (element) {
 
      if (element % 2 == 0) {
        // // 从getElement中"返回"
        alert('found: ' + element); // found: 2
        $break.data = element;
        throw $break;
      }
 
    });
 
  } catch (e) {
    if (e == $break) {
      return $break.data;
    }
  }
 
  return null;
}
 
alert(getElement()); // 2

Theoretische Version

Lassen Sie mich hier erklären, dass Entwickler Abschlüsse oft fälschlicherweise vereinfachen und als Rückgabe interner Funktionen aus dem übergeordneten Kontext verstehen oder sogar verstehen, dass nur anonyme Funktionen Abschlüsse sein können.

Auch hier sind aufgrund der Bereichskette alle Funktionen Abschlüsse (unabhängig vom Funktionstyp: anonyme Funktionen, FE, NFE und FD sind alles Abschlüsse).

Es gibt nur einen Funktionstyp außer der Funktion, die über den Funktionskonstruktor erstellt wurde, da sein [[Geltungsbereich]] nur globale Objekte enthält. Um dieses Problem besser zu klären, geben wir zwei korrekte Versionsdefinitionen von Abschlüssen in ECMAScript an:

In ECMAScript bezieht sich Abschluss auf:

Aus theoretischer Sicht: alle Funktionen. Denn sie alle speichern beim Erstellen die Daten des oberen Kontexts. Dies gilt auch für einfache globale Variablen, da der Zugriff auf globale Variablen in einer Funktion dem Zugriff auf freie Variablen entspricht. Zu diesem Zeitpunkt wird der äußerste Bereich verwendet.

Aus praktischer Sicht gelten die folgenden Funktionen als Abschlüsse:

Sie existiert auch dann noch, wenn der Kontext, in dem sie erstellt wurde, zerstört wurde (z. B. wenn die innere Funktion vom übergeordneten Element zurückkehrt). Funktion)

Im Code wird auf freie Variablen verwiesen

Das Obige ist der zweite Teil des JavaScript-Abschlusses: die Implementierung des Abschlusses Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website ( www.php.cn)!