JavaScript 클로저 파트 2: 클로저 구현

이론적인 부분을 논의한 후 ECMAScript에서 클로저가 어떻게 구현되는지 소개하겠습니다. 여기서 다시 강조할 가치가 있습니다. ECMAScript는 정적(어휘적) 범위만 사용합니다(Perl과 같은 언어는 변수 선언에 정적 범위와 동적 범위를 모두 사용할 수 있습니다).

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

기술적으로 말하면 함수를 생성한 상위 컨텍스트의 데이터는 함수의 내부 속성 [[Scope]]에 저장됩니다. [[범위]]가 무엇인지 모른다면, [[범위]]에 대해 매우 자세하게 소개되어 있는 이전 장을 먼저 읽어 보시기 바랍니다. [[Scope]] 및 범위 체인 지식을 완전히 이해했다면 클로저도 완전히 이해할 것입니다.

함수 생성 알고리즘에 따르면 ECMAScript에서 모든 함수는 생성 시 상위 컨텍스트의 범위 체인을 저장하기 때문에 클로저임을 알 수 있습니다(예외 제외). 나중에 활성화됨 - [[Scope]]는 함수가 생성될 때 존재합니다.):

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

우리가 말했듯이 최적화 목적으로 함수가 자유 변수를 사용하지 않는 경우 그렇다면 구현이 부작용 도메인 체인에 보관되어야 합니다. 그러나 ECMA-262-3 사양에는 아무 것도 언급되어 있지 않습니다. 따라서 일반적으로 모든 매개변수는 생성 단계에서 [[Scope]] 속성에 저장됩니다.

일부 구현에서는 클로저 범위에 직접 액세스할 수 있습니다. 예를 들어 Rhino의 경우 함수의 [[Scope]] 속성에는 비표준 __parent__ 속성이 있습니다.

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

모든 개체는 [[Scope]]

here 또한 ECMAScript에서는 동일한 상위 컨텍스트에서 생성된 클로저가 [[Scope]] 속성을 공유한다는 점에 유의하세요. 즉, [[Scope]] 변수에 대한 특정 클로저의 수정은 다른 클로저의 변수 읽기에 영향을 미칩니다.

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

즉, 모든 내부 함수는 동일한 부모를 공유합니다. 범위

이 함수에 대해 매우 흔한 오해가 있습니다. 개발자는 루프 문에서 함수를 생성할 때(내부적으로 계산) 종종 예상한 결과를 얻지 못하며, 각 함수에는 고유한 값이 있다고 기대합니다.

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

위의 예는 동일한 컨텍스트에서 생성된 클로저가 [[Scope]] 속성을 공유한다는 것을 증명합니다. 따라서 상위 컨텍스트의 변수 "k"는 쉽게 변경될 수 있습니다.

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

이렇게 기능이 활성화되면 최종적으로 사용되는 k는 3이 됩니다. 아래와 같이 클로저를 생성하면 이 문제를 해결할 수 있습니다.

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

위 코드에서 무슨 일이 일어나는지 볼까요? "_helper" 함수가 생성된 후 매개변수 "k"를 전달하여 활성화됩니다. 반환 값도 함수이며 해당 배열 요소에 저장됩니다. 이 기술은 다음과 같은 효과를 생성합니다. 함수가 활성화되면 "_helper"가 매개변수 "x"를 포함하는 새 변수 개체를 생성할 때마다 "x" 값은 전달된 "k" 값이 됩니다. 이런 식으로 반환된 함수의 [[Scope]]는 다음과 같습니다.

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}
];

함수의 [[Scope]] 속성이 실제로 원하는 것을 순서대로 갖고 있음을 알 수 있습니다. 이 목적을 달성하려면 [[Scope]]에 추가 변수 개체를 만들어야 합니다. 반환된 함수에서 "k" 값을 얻으려는 경우 값은 여전히 ​​3이라는 점에 유의해야 합니다.

그런데 JavaScript를 소개하는 글에서는 추가로 생성된 함수만 클로저라고 생각하는 경우가 많은데 이는 잘못된 것입니다. 실제로는 이 방법이 가장 효과적입니다. 그러나 이론적 관점에서 보면 ECMAScript의 모든 함수는 클로저입니다.

그러나 위에서 언급한 방법만이 전부는 아닙니다. 올바른 "k" 값은 다음과 같은 다른 방법으로도 얻을 수 있습니다.

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 및 return

또 다른 기능은 클로저에서 반환됩니다. ECMAScript에서 클로저의 return 문은 호출 컨텍스트(호출자)로 제어 흐름을 반환합니다. Ruby와 같은 다른 언어에는 다양한 형태의 클로저가 있으며 해당 클로저 반환도 다릅니다. 다음 방법이 가능합니다. 호출자에게 직접 반환되거나 경우에 따라 컨텍스트에서 직접 종료됩니다. .

ECMAScript 표준 종료 동작은 다음과 같습니다.

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

단, ECMAScript에서 try catch를 통해 다음과 같은 효과를 얻을 수 있습니다.

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

이론적 버전

여기서 설명하자면, 개발자는 클로저를 부모 컨텍스트에서 내부 함수를 반환하는 것으로 잘못 단순화하고 이해하거나 심지어 익명 함수만이 클로저가 될 수 있다는 것을 이해하는 경우가 많습니다.

다시 말하지만, 범위 체인으로 인해 모든 함수는 클로저입니다(함수 유형에 관계없이 익명 함수, FE, NFE 및 FD는 모두 클로저입니다).

Function 생성자를 통해 생성된 함수를 제외하고 함수 유형은 한 가지뿐입니다. [[Scope]]에는 전역 개체만 포함되기 때문입니다. 이 문제를 더 명확하게 하기 위해 ECMAScript에서 클로저에 대한 두 가지 올바른 버전 정의를 제공합니다.

ECMAScript에서 클로저는 다음을 의미합니다.

이론적 관점에서: 모든 기능. 왜냐하면 모두 생성 시 상위 컨텍스트의 데이터를 저장하기 때문입니다. 이는 간단한 전역 변수의 경우에도 마찬가지입니다. 함수에서 전역 변수에 액세스하는 것은 자유 변수에 액세스하는 것과 동일하기 때문입니다.

실용적인 관점에서 볼 때 다음 함수는 클로저로 간주됩니다.

생성된 컨텍스트가 파괴되어도 여전히 존재합니다(예를 들어 내부 함수가 상위 함수에서 반환됨). 함수)

코드에서 자유 변수를 참조합니다

위는 JavaScript 클로저의 두 번째 부분인 클로저 구현입니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트( www.php.cn)!