JavaScript 범위 체인 파트 2: 함수 수명 주기

함수의 생명주기는 생성단계와 활성화단계(호출시)로 나누어지는데, 자세히 알아보겠습니다.

함수 생성

우리 모두 알고 있듯이 함수 선언은 컨텍스트에 들어갈 때 변수/활동(VO/AO) 개체에 배치됩니다. 전역 컨텍스트에서 변수 및 함수 선언을 살펴보겠습니다(여기서 변수 개체는 전역 개체 자체입니다. 기억하시나요?)

var x = 10;
  
function foo() {
  var y = 20;
  alert(x + y);
}
  
foo(); // 30

함수 활성화 시 올바른(예상) 결과를 얻습니다. 결과 - 30. 그러나 매우 중요한 기능이 하나 있습니다.

이전에는 현재 컨텍스트와 관련된 변수 객체에 대해서만 이야기했습니다. 여기서 변수 "y"는 함수 "foo"에 정의되어 있지만(즉, foo 컨텍스트의 AO에 있음을 의미) 변수 "x"는 "foo" 컨텍스트에 정의되어 있지 않습니다. "foo"의 AO에 추가되지 않습니다. 언뜻 보기에 변수 "x"는 "foo" 함수와 관련하여 전혀 존재하지 않지만 아래에서 볼 수 있듯이 "한 눈에" 볼 때 "foo" 컨텍스트의 활성 객체에는 다음과 같은 항목만 포함되어 있음을 알 수 있습니다. 하나의 속성 - "y".

fooContext.AO = {
  y: undefined // undefined – 进入上下文的时候是20 – at activation
};

"foo" 함수는 어떻게 변수 "x"에 액세스하나요? 이론적으로 함수는 상위 수준 컨텍스트의 변수 개체에 액세스할 수 있어야 합니다. 실제로 이 메커니즘은 함수 내부의 [[scope]] 속성을 통해 구현됩니다.

[[scope]]는 현재 함수 컨텍스트 위에 있는 모든 상위 변수 개체의 계층적 체인이며 함수가 생성될 때 여기에 저장됩니다.

이 중요한 점에 유의하세요. [[scope]]는 함수가 생성될 때 저장됩니다. 함수가 소멸될 때까지 영원히 정적(불변)입니다. 즉, 함수를 호출할 수 없지만 [[scope]] 속성이 함수 개체에 작성되어 저장되었습니다.

또 고려해야 할 점은 스코프 체인과 달리 [[scope]]는 컨텍스트가 아닌 함수의 속성이라는 것입니다. 위의 예를 고려하면 "foo" 함수의 [[scope]]는 다음과 같습니다.

foo.[[Scope]] = [
  globalContext.VO // === Global
];

예를 들어 일반적인 ECMAScript 배열을 사용하여 범위와 [[scope]]를 나타냅니다.

계속해서 함수가 호출되면 컨텍스트가 입력되는 것을 알 수 있으며, 이때 활성 객체가 생성되고 이것과 범위(범위 체인)가 결정됩니다. 이 순간을 자세히 살펴 보겠습니다.

함수 활성화

정의에서 언급한 바와 같이 AO/VO를 생성하기 위해 context를 입력한 후 해당 context(변수 검색을 위한 범위 체인)의 Scope 속성을 다음과 같이 정의합니다. 🎜>

Scope = AO|VO + [[Scope]]

위 코드의 의미는 활성 개체가 범위 배열의 첫 번째 개체, 즉 범위의 프런트 엔드에 추가된다는 것입니다.

Scope = [AO].concat([[Scope]]);

이 기능은 식별자 구문 분석 처리에 중요합니다. 식별자 확인은 변수(또는 함수 선언)가 어떤 변수 개체에 속하는지 확인하는 프로세스입니다.

이 알고리즘의 반환 값에는 항상 참조 유형이 있고 기본 구성 요소는 해당 변수 개체(또는 찾을 수 없는 경우 null)이며 속성 이름 구성 요소는 참조 유형이 될 식별자의 이름입니다. 올려다보았다. 참조 유형에 대한 자세한 내용은 나중에 설명합니다.

식별자 확인 프로세스는 변수 이름에 해당하는 속성의 조회, 즉 가장 깊은 컨텍스트에서 시작하여 범위 체인을 우회하여 최상위까지 범위 내 변수 개체의 지속적인 조회로 구성됩니다. .

이런 방식으로 상향 검색에서는 컨텍스트의 지역 변수가 상위 범위의 변수보다 우선순위가 높습니다. 두 변수가 이름은 같지만 범위가 다른 경우, 가장 먼저 발견된 변수는 가장 깊은 범위에 있습니다.

위에서 언급한 내용을 설명하기 위해 조금 더 복잡한 예를 사용합니다.

var x = 10;
  
function foo() {
  var y = 20;
  
  function bar() {
    var z = 30;
    alert(x +  y + z);
  }
  
  bar();
}
  
foo(); // 60

이를 위해 다음과 같은 변수/활동, 함수의 [[scope]] 속성 및 컨텍스트의 범위 체인이 있습니다.

전역의 변수 개체 컨텍스트는 다음과 같습니다.

globalContext.VO === Global = {
  x: 10
  foo: <reference to function>
};

"foo"가 생성되면 "foo"의 [[scope]] 속성은 다음과 같습니다.

foo.[[Scope]] = [
  globalContext.VO
];

"foo"가 활성화되면(컨텍스트 입력) ), "foo" "컨텍스트의 활성 개체는

fooContext.AO = {
  y: 20,
  bar: <reference to function>
};

"foo" 컨텍스트의 범위 체인은 다음과 같습니다.

fooContext.Scope = fooContext.AO + foo.[[Scope]] // i.e.:
  
fooContext.Scope = [
  fooContext.AO,
  globalContext.VO
];

내부 함수 "bar" 생성되면 해당 [[scope]]는 다음과 같습니다.

bar.[[Scope]] = [
  fooContext.AO,
  globalContext.VO
];

"bar"가 활성화되면 "bar" 컨텍스트의 활성 개체는 다음과 같습니다.

barContext.AO = {
  z: 30
};

범위 체인 "bar" 컨텍스트는 다음과 같습니다.

barContext.Scope = barContext.AO + bar.[[Scope]] // i.e.:
  
barContext.Scope = [
  barContext.AO,
  fooContext.AO,
  globalContext.VO
];

"x", "y" 및 "z"의 식별자는 다음과 같이 구문 분석됩니다.

- "x"
-- barContext.AO // not found
-- fooContext.AO // not found
-- globalContext.VO // found - 10
 
- "y"
-- barContext.AO // not found
-- fooContext.AO // found - 20
 
- "z"
-- barContext.AO // found - 30

위는 JavaScript 범위 체인의 두 번째 부분: 함수 수명 주기 내용, 관련 내용은 PHP 중국어 웹사이트(www.php.cn)를 참고하세요!