Einführung in die Verwendung von Abschlüssen und sofortigen Ausführungsfunktionen in js (Codebeispiel)

Dieser Artikel bietet Ihnen eine Einführung in die Verwendung von Abschlüssen und sofortigen Ausführungsfunktionen in js. Ich hoffe, dass er für Sie hilfreich ist.

Vorwort: Ich habe kürzlich „Javascript Advanced Programming“ gelesen. Für mich sind die Übersetzungen der chinesischen Version des Buches an vielen Stellen unbefriedigend, daher versuche ich, es mit dem zu interpretieren, was ich verstehe. Sollten Fehler oder Auslassungen vorliegen, sind wir Ihnen sehr dankbar, wenn Sie uns darauf hinweisen. Der Großteil des Inhalts dieses Artikels stammt aus „JavaScript Advanced Programming, Third Edition“.

Dieser Konfigurationsmechanismus der Bereichskette führt zu einem bemerkenswerten Nebeneffekt, nämlich dass der Abschluss nur den letzten Wert jeder darin enthaltenen Variablen erhalten kann.

function createArray(){
    var result = new Array();
    for(var i = 0; i < 10; i++) {
        result[i] = function() {
            return i;
        }
    }
    return result;
}

Diese Funktion gibt ein Array von Funktionen zurück. Oberflächlich betrachtet scheint es, dass jede Funktion ihren eigenen Indexwert zurückgeben sollte, das heißt, die Funktion an Position 0 gibt 0 zurück, die Funktion an Position 1 gibt 1 zurück und so weiter.

Aber tatsächlich gibt jede Funktion 10 zurück, da das aktive Objekt von createArray im Gültigkeitsbereich jeder Funktion gespeichert ist, sodass sie alle auf dieselbe Variable i verweisen.

Wenn die Funktion createArray() zurückkehrt, ist der Wert der Variablen i 10. Zu diesem Zeitpunkt bezieht sich jede Funktion auf dieselbe Variable i, sodass der Wert von i 10 ist.

// 代码执行过程

createArray();

/*
createArray() {
    var result = new Array();

    var i; // 0,1,2,3,4,5,6,7,8,9,10

    for ( i = 0; i < 10 ; i ++) {
        result[i] = function() {
            return i; 
            // 注意 函数的执行时机，你只有调用函数的时候，才会产生执行环境，沿着作用域链，找到活动对象
            // 这里有个闭包，还记得闭包的概念吗？ 有权访问到另外一个函数作用域的变量的函数
        }
    }
    
    /*
    result[0] = function(){
        return i
    }
    result[1] = function(){
        return i
    }
    result[2] = function(){
        return i
    }
    ....
    */
    return result;
}

result = [function(){return i}, function(){return i}....];

*/

createArray()[1](); // 10

Wie sorgen wir also dafür, dass sich diese Funktion wie erwartet verhält?

Sie können erzwingen, dass sich der Abschluss wie erwartet verhält, indem Sie eine weitere anonyme Funktion erstellen, bei der auch die Funktion zur sofortigen Ausführung angewendet wird.

//立即执行函数
//我们平时写函数然后调用是这么写的。
//声明函数，调用执行。

function foo(){
    console.log("hi");
}

foo(); // "hi"

//那么，我们可不可以声明调用写一块呢？ 这就是申明函数立刻执行。
//好像不可以，控制台报错

function foo(){
    console.log("hi");
}(); //Uncaught SyntaxError: Unexpected token )


//那么如果用括号包裹呢？

(function foo(){
    console.log("hi");
}()); // "hi"， 可以了。 这就是立即执行函数！

Mit der Funktion zur sofortigen Ausführung können wir erzwingen, dass sich der Abschluss wie erwartet verhält.

//改写代码
function createArray() {

    var result = new Array();

    for( var i = 0; i < 10; i ++ ) {
        result[i] = (function(i) { 
            return function(){
                return i;
            }
        }(i));
    }
    return result;
}
createArray()[0](); // 0
createArray()[1](); // 1
createArray()[2](); // 2 
// 这里不只有一种方法，其他方法在此不表。

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung von Abschlüssen und sofortigen Ausführungsfunktionen in js (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!