js의 클로저 및 즉시 실행 기능 사용 소개(코드 예시)

이 글은 js의 클로저 및 즉시 실행 기능에 대한 소개를 제공합니다(코드 예제). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

서문: 저는 최근 Javascript Advanced 프로그래밍을 읽고 있는데, 중국어판은 번역이 만족스럽지 못한 부분이 많아서 제가 이해하는 대로 해석하려고 노력합니다. 혹시 잘못된 점이나 누락된 부분이 있으면 지적해 주시면 정말 감사하겠습니다. 이 기사의 내용 대부분은 "JavaScript Advanced 프로그래밍, 제3판"에서 인용되었습니다.

스코프 체인의 이러한 구성 메커니즘은 주목할 만한 부작용을 초래합니다. 즉, 클로저는 포함된 변수의 마지막 값만 얻을 수 있습니다.

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

이 함수는 함수 배열을 반환합니다. 표면적으로는 각 함수가 자체 인덱스 값을 반환해야 하는 것처럼 보입니다. 즉, 위치 0의 함수는 0을 반환하고, 위치 1의 함수는 1을 반환하는 식입니다.

그러나 실제로 각 함수는 10을 반환합니다. createArray의 활성 개체가 각 함수의 범위에 저장되므로 모두 동일한 변수 i를 참조하기 때문입니다.

createArray() 함수가 반환될 때 변수 i의 값은 10입니다. 이때 각 함수는 동일한 변수 i를 참조하므로 i의 값은 10입니다.

// 代码执行过程

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

그럼 이 함수가 예상대로 작동하도록 하려면 어떻게 해야 할까요?

즉시 실행 기능도 적용되는 또 다른 익명 함수를 생성하여 클로저가 예상대로 작동하도록 강제할 수 있습니다.

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

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

foo(); // "hi"

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

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


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

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

즉시 실행 기능을 사용하면 클로저가 예상대로 작동하도록 강제할 수 있습니다.

rreee

위 내용은 js의 클로저 및 즉시 실행 기능 사용 소개(코드 예시)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!