JavaScript 클로저 - 클로저의 변수 및 이 객체

JavaScript의 범위 연결 메커니즘은 몇 가지 부작용을 일으킬 수 있습니다. 클로저는 포함된 함수에 있는 모든 변수의 마지막 값만 얻을 수 있습니다. 클로저를 사용할 때 변수 값에 주의를 기울여야 합니다. 여기서 실수가 자주 발생하기 때문입니다.

아래에서는 이 문제를 설명하기 위해 매우 극단적인 예를 사용합니다. 실제 개발에서는 일반적으로 이와 같은 코드를 작성하지 않습니다. 이 예제의 코드는 다음과 같습니다.

function fn1(){
  var arr = new Array();
  //变量i保存在fn1作用域中
  for(var i = 0; i < 10;i++){
    arr[i] = function(){
      return i;
    }
  }
  return arr;
}
 
var values = fn1();
for(var i = 0; i < values.length;i++){
  //此时通过闭包来调用所有的函数，当输出i的时候会到上一级的作用域中查找，此时i的值是10，所以输出的都是10
  document.write(values[i]()+"<br>");
}

위 코드를 실행하면 페이지에 0-9가 인쇄될 것으로 예상했지만 실제로는 10개의 10이 인쇄됩니다. 이 코드를 분석해 보겠습니다. 구현 코드에서 함수 fn1이 생성되고, 함수에서 배열 개체가 생성되고, for 루프를 통해 배열에 값이 할당되며, 루프는 10번 반복되며, 매번 익명 함수가 생성됩니다. 배열에 채워져 값을 반환하고 마지막으로 배열 객체를 반환합니다. 그런 다음 fn1 함수에 대한 참조를 가져온 다음 루프를 통해 페이지의 배열에 값을 출력합니다.

위 프로그램의 스코프 체인 메모리 모델은 아래 그림과 같습니다.

그림에서 우리는 fn1 함수에서 매번 이를 볼 수 있습니다. 루프는 익명 함수를 생성하며 자체 범위 체인을 갖습니다. 범위 체인의 상위 비트는 전역 범위를 가리키고, 중간 비트는 외부 fn1 범위를 가리키며, 하위 비트는 자체 범위를 가리킵니다.

fn1 함수가 실행된 후 fn1 범위의 i 속성 값은 10입니다. 이때 GC는 fn1을 재활용하기 시작하지만 해당 범위를 가리키는 익명 함수가 있음을 발견합니다. fn1의 범위이므로 fn1의 범위는 재활용되지 않습니다.

익명 함수가 실행되면 자신의 공간에서 i 속성을 검색하지만 찾지 못하므로 상위 fn1 범위로 이동하여 이때 i 값을 찾습니다. fn1 범위는 10이므로 모든 익명 함수는 동일한 i 값인 10을 얻습니다.

이 문제를 해결하는 방법은 익명 함수에 익명 함수를 반환하고 현재 값을 변수를 통해 저장하는 것입니다. 코드는 다음과 같습니다.

function fn1(){
  var arr = new Array();
   
  for(var i = 0; i < 10;i++){
    arr[i] = function(num){
      return function(){
        return num;
      }
    }(i);
     
  }
  return arr;
}
 
var values = fn1();
for(var i = 0; i < values.length;i++){
  //每一个fs都是在不同的作用域链中，num也是保存在不同的作用域中，所以输出0-9
  document.write(values[i]()+"<br>");
}

이때 num의 값은 각 익명 함수의 범위에 저장되며, 그 값은 각 루프의 인덱스 값과 정확히 같습니다. 이런 식으로 익명 함수가 호출될 때마다 자신의 공간에서 num 속성을 찾고, 이 num의 값은 동시에 다른 공간에서 i 속성을 찾지 않습니다. fn1 함수 범위.

위 코드는 20개의 익명 함수 범위를 생성합니다. 코드가 단순한 반환 값이 아니고 좀 더 복잡한 작업인 경우 많은 메모리 공간을 차지하게 됩니다.

이 객체를 클로저에 사용

이 객체를 클로저에 사용하면 예상치 못한 문제가 발생할 수도 있습니다. this 개체는 함수의 실행 환경에 따라 런타임에 바인딩됩니다. 전역 함수의 경우 이 개체는 창이고 함수가 개체의 메서드로 호출되는 경우 해당 개체입니다. 익명 함수에서 이 개체는 일반적으로 창을 가리킵니다. 다음 예를 살펴보자:

var name = "window";
var person = {
  name : "Leon",
  age:22,
  say:function(){
    return function(){
      return this.name;
    }
  }
}
console.info(person.say()()); //控制台输出：window

위 코드에서 person 객체의 say() 메소드를 호출하면 person 객체의 이름이 아닌 전역 이름 "window"가 출력됩니다. ". person.say()가 완료된 후 함수 호출이 완료됩니다. 함수 호출이 끝나기 전에는 person을 가리키지만 익명 함수가 호출되면 this는 window를 가리키므로 결과는 "window"입니다.

이 문제를 해결하는 방법은 이 참조를 say() 메서드의 임시 변수에 할당하는 것입니다. 코드는 다음과 같습니다.

var name = "window";
var person = {
  name : "Leon",
  age:22,
  say:function(){
    var that = this;
    return function(){
      return that.name;
    }
  }
}
console.info(person.say()()); //控制台输出：Leon

위는 JavaScript 클로저입니다. 클로저에 포함된 변수와 이 개체의 내용에 대한 자세한 내용은 PHP 중국어 웹사이트(www.php.php)를 참고하세요. CN)!