'스코프 체인에 대한 심층적인 이해' 소개 꼭 알아야 할 자바스크립트 지식 포인트_자바스크립트 기술

WBOY
풀어 주다: 2016-05-16 17:35:48
원래의
788명이 탐색했습니다.

샘플 코드:

코드 복사 코드는 다음과 같습니다.

var xxxVar1 = 1;
var external = function(){
var xxxVar2 = 2;

var results = [];

for(var i = 0; i< 3; i )
{
var inner = function(){
var xxxVar3 = 3;
return xxxVar3 xxxVar2 xxxVar1 i;
}
결과 .push(inner);
}

결과 반환;
}

var xxxVar1 = 100;
var xxxVar2 = 200;
var xxxVar3 = 300;
var results = external();
결과[0 ]();
결과[1]();
결과[2]();

실행 결과

무슨 일이 일어났나요? 위 예시의 실행 결과는 많은 분들이 알고 계시겠지만 저를 포함한 모든 분들이 왜 이런 결과가 나오는지 이해하지 못하고 있습니다. 명사 설명 활성 개체: 함수 호출 시작 시 JavaScript 인터프리터는 함수 본문의 모든 지역 변수(var 형식으로 선언된 변수)를 수집하고 이러한 지역 변수를 "활성 개체"라는 개체에 저장합니다. 변수는 처음에는 정의되지 않았습니다.
코드 예시
코드 복사 코드는 다음과 같습니다.

var fun = function (){
경고(이름);
var name = 'Duan Guangwei';
}

이 함수(fun())를 실행할 때 함수 본문은 현재 활성 개체는 [{ 이름: 정의되지 않음 }]이므로 fun() 실행 결과는 다음과 같습니다.

  • 함수의 [scope] 속성: 각 함수는 정의될 때(함수 인스턴스 생성 시) 현재 "범위 체인"을 가리키는 [scope] 속성이 할당됩니다. 이 속성은 개발자가 액세스할 수 없으며 자바스크립트만 액세스할 수 있습니다.
  • 범위 체인: 함수가 호출되면 JavaScript 엔진은 이 호출에 대한 범위 체인을 유지합니다. 이 범위 체인은 함수 호출 시 함수의 [scope]와 활성 개체가 가리키는 범위 체인입니다. [활성 객체, 함수 정의 시 범위 체인]과 같은 형태로 나타납니다.
    코드 예시
    코드 복사 코드는 다음과 같습니다.

    var a = 1 ;
    //1단계: [ { a: 1, 외부: 정의되지 않음 } ]

    var external = function(){
    //3단계: [ { b: 정의되지 않음, 내부: 정의되지 않음 } ,{ a: 1, 외부: 함수 } ]
    var b = 2;
    var inner = function(){
    //5단계: [ {}, { b: 2, 내부: 함수 } ,{ a: 1, 외부: 기능 } ]
                                                                           > > }

    //2단계: [ { a: 1, 외부: 함수 } ]
    외부();



    스코프 체인 규칙 규칙 1

    Javascript는 일반적으로 특정 호스트에서 실행됩니다. 각 호스트는 "전역 개체" 또는 "전역 활성 개체"를 제공합니다. 이 전역 개체는 모든 범위 체인의 루트 노드입니다.

    규칙 2 "값 연산"(예: 경고(xxxVar))에 대한 규칙은 범위 체인을 따라 "xxxVar"라는 변수를 검색하고, 발견된 첫 번째 값을 반환하고, 찾을 수 없으면 예외를 발생시키는 것입니다(

    ReferenceError : xxxVar이 정의되지 않았습니다

    ). 규칙 3

    "할당 작업"(예: xxxVar = 'Duan Guangwei')의 규칙은 범위 체인을 따라 "xxxVar"라는 변수를 검색하고 첫 번째 발견된 값을 덮어쓰는 것입니다. 전역 개체에. 참고: "클로저" 개념은 "범위 체인"을 통해 구현되는 반면 C#은 컴파일러를 통해 구현되며 .NET에서는 이를 지원하지 않습니다.

  • 관련 라벨:
    원천:php.cn
    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    인기 튜토리얼
    더>
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿