JavaScript 의 역할 도 메 인 체인 을 전면적으로 이해 합 니 다.

JavaScript 의 역할 영역 체인
이것 은 매우 중요 한 지식 포인트 입 니 다.자바 스 크 립 트 의 역할 도 메 인 체인 을 이해 하면 우리 가 많은'이상'문 제 를 이해 하 는 데 도움 을 줄 수 있 습 니 다.
앞에서 내 가 말 한 성명 이 앞 당 겨 진 작은 예 를 살 펴 보 자.

var name = 'Skylor.min';
 function echo() {
 alert(name);
 var name = 'mm';
 alert(name);
 alert(age);
 }

 echo();

 이 예 에 대해 이런 부분 을 접 해 본 적 이 없 을 때 첫 번 째 반응 은 고민 할 것 입 니 다.이 첫 번 째 name 은 전체 변수의 name 을 호출 하 는 것 입 니까?함수 내부 의 name 을 호출 하 는 것 입 니까?전체 국면 을 호출 하 는 것 입 니까?그러나 함수 내부 도 정의 와 할당 을 사용 합 니 다.함수 내부 의 부분 변 수 를 호출 하면 그의 값 은 mm 입 니까?아니면 전체적인'Skylor.min'을 인용 할 까요?
그래서 이 작은 예 에는 이런 잘못된 답 이 있다.
Skylor.min
mm
[대본 오류]
 
사실은 그렇지 않 습 니 다.함수 안의 미리 설명 을 알 면 이것 이 정확 하지 않다 는 것 을 알 수 있 습 니 다.
    undefined
    mm
    [스 크 립 트 오류]
 
그래 야 한다.그렇다면 왜 이 답 일 까?미리 밝 히 는 것 은 무엇 일 까?모든 것 은 자바 스 크 립 트 의 역할 도 메 인 체인 과 관련된다.
의 원리
먼저 자바 스 크 립 트 의 역할 영역 원리:
자 바스 크 립 트 의 권위 적 인 안내서 에는 자 바스 크 립 트 의 함수 가 정 의 된 역할 영역 에서 실행 되 는 것 이지,실행 되 는 역할 영역 에서 실행 되 는 것 이 아니다.
또한 자바 스 크 립 트 에서 매우 중요 한 개념 이 있 습 니 다.그것 은 바로 자바 스 크 립 트 에서 모든 것 이 대상 이 고 함수 도 마찬가지 입 니 다.
JS 에 서 는 역할 영역의 개념 과 다른 언어 차이 가 많 지 않 습 니 다.한 함 수 를 호출 할 때마다 한 함수 내의 역할 영역 에 들 어 갑 니 다.함수 에서 돌아 온 후에 호출 전의 역할 영역 으로 돌아 갑 니 다.
JS 의 문법 스타일 은 C/C+와 유사 하지만 역할 영역의 실현 은 C/C++와 다 릅 니 다.'스 택'방식 이 아니 라 목록 을 사용 합 니 다.구체 적 인 과정 은 다음 과 같 습 니 다(ECMA 262 에서 말 한 것).

상하 문 을 집행 할 때의 모든 역할 역 은 역할 역 체인(scope chain,뒤에 소개)으로 이 루어 진다

한 함수 가 정 의 될 때 정 의 된 시간의 scope chain 을 이 함수 대상 의[scope]속성

에 연결 합 니 다.

한 함수 대상 이 호출 될 때 하나의 활동 대상(즉 하나의 대상)을 만 든 다음 에 모든 함수 의 형 삼 에 대해 이 활동 대상 의 이름 속성 이 라 고 명명 한 다음 에 이 활동 대상 을 이때 의 역할 도 메 인 체인(scope chain)의 최 전단 으로 하고 이 함수 대상 의[scope]를 scope chain 에 추가 합 니 다.

예 를 들 어 보 자.
var func = function(lps, rps){
        var name = 'Skylor.min';
        ........
    }
    func();
 
func 의 정의 문 구 를 실행 할 때 이 함수 대상 의[scope]속성(내부 속성,JS 엔진 만 접근 할 수 있 지만 FireFox 의 엔진(Spider Monkey 와 Rhino)은 개인 속성 을 제공 합 니 다parent__방문 하여 물 어보 기)이[scope]속성 을 정의 하 는 역할 도 메 인 체인 에 연결 합 니 다.(나중에 자세히 소개 합 니 다)이 때 는 func 가 전체 환경 에 정의 되 어 있 기 때문에 이[scope]는 전체 활동 대상 window active object 만 가리 키 고 있 습 니 다.
func 를 호출 할 때 이벤트 대상 을 만 듭 니 다.이 함수 에 명 시 된 모든 부분 변수 와 함수 정의 에 대해 서 는 이 활동 대상 의 동명 의 이름 속성 입 니 다.
그 다음 에 호출 매개 변 수 를 형 매개 변수 에 부여 하고 부족 한 호출 매개 변 수 는 undefined 입 니 다.
그리고 이 활동 대상 을 scope chain 의 최 전단 으로 하고 func 의[scope]속성 이 가리 키 는 것 을 func 시의 최상 위 활동 대상 을 정의 하여 scope chain 에 추가 합 니 다.
위의 역할 도 메 인 체인 이 있 습 니 다.식별 자 분석 이 발생 할 때 현재 scope chain 목록 의 모든 활동 대상 의 속성 을 역방향 으로 조회 하고 같은 이름 을 찾 으 면 돌아 갑 니 다.찾 을 수 없습니다.바로 이 식별 자가 정의 되 지 않 았 습 니 다.
함수 대상 의[scope]속성 은 함 수 를 정의 할 때 결정 되 는 것 이지 호출 할 때 가 아니 기 때문에 아래 의 예 와 같 습 니 다.

var name = 'Skylor.min';
 function echo() {
 alert(name);
 }

 function env() {
 var name = 'mm';
 echo();
 }

 env();

그의 운행 결 과 는 Skylor.min 이다.
위의 지식 을 결합 하여 다음 의 예 를 살 펴 보 겠 습 니 다.자바 스 크 립 트 권위 지침 의 고전 을 기억 합 니 다.자바 스 크 립 트 의 함 수 는 그들 이 실행 하 는 역할 영역 이 아니 라 정 의 된 역할 영역 에서 실 행 됩 니 다.

function factory() {
 var name = 'Skylor.min';
 var intro = function(){
  alert('I am ' + name);
 }
 return intro;
 }

 function app(para){
 var name = para;
 var func = factory();
 func();
 }

 app('mm');

app 을 호출 할 때 scope chain 은{window 활동 대상(전역)}->{app 의 활동 대상}으로 구성 되 어 있 습 니 다.
app 함수 체 에 처음 들 어 갔 을 때 app 의 활동 대상 은 arguments 속성 이 있 고 다른 두 개의 값 은 undefined 속성 입 니 다.name 과 func.그리고 하나의 값 은'mm'의 속성 para 입 니 다.
이때 scope chain 은 다음 과 같 습 니 다.

[[scope chain]] = [
 {
  para : 'mm',
  name : undefined,
  func : undefined,
  arguments : []
 }, {
  window call object
 }
 ]

 factory 에 들 어 가 는 함수 체 를 호출 할 때 factory 의 scope chain 은 다음 과 같 습 니 다.

[[scope chain]] = [
 {
  name : undefined,
  intor : undefined
 }, {
  window call object
 }
 ]

이 때 역할 도 메 인 체인 에는 app 의 활동 대상 이 포함 되 어 있 지 않 습 니 다.
intro 함 수 를 정의 할 때 intro 함수 의[scope]는:

[[scope chain]] = [
 {
  name : 'Skylor.min',
  intor : undefined
 }, {
  window call object
 }
 ]

factory 함수 에서 돌아 온 후 app 에서 intor 를 호출 할 때 식별 자 해석 이 발생 했 습 니 다.이때 sope chain 은:

[[scope chain]] = [
 {
  intro call object
 }, {
  name : 'Skylor.min',
  intor : undefined
 }, {
  window call object
 }
 ]

 scope chain 에는 factory 활동 대상 이 포함 되 어 있 지 않 기 때문에 name 식별 자 분석 결 과 는 factory 활동 대상 의 name 속성,즉'Skylor.min'이 어야 합 니 다.
그래서 운행 결 과 는:I am Skylor.min
이로써 완전한 실행 프로 세 스 는"JavaScript 의 함 수 는 실행 되 는 역할 영역 이 아니 라 정 의 된 역할 영역 에서 실 행 됩 니 다."라 는 것 을 명확 하 게 읽 을 수 있 습 니 다.이 말 이 뭔 데?
위의 몇 가지 문 제 를 설명 하기 위해 서 는 자바 스 크 립 트 의 사전 컴 파일 도 말 해 야 한다.
JavaScript 의 사전 컴 파일
사전 컴 파일,C 등 을 배 운 우 리 는 모두 알 고 있 습 니 다.그러나 문제 가 생 겼 습 니 다.자 바스 크 립 트 는 스 크 립 트 언어 이 고 자 바스 크 립 트 의 실행 과정 은 번역 이 실행 되 는 과정 입 니 다.자 바스 크 립 트 의 실행 과정 에서 비슷 한 컴 파일 과정 이 있 습 니까?
만약 확실 하지 않다 면,먼저 하나의 예 를 통 해:
alert(typeof fun); //function
    function fun() {
        alert('I am Skylor.min');
    };
 
이때 튀 어 나 온 것 은?내 가 간다.'I am Skylor.min'인 데 왜 그 럴 까?왜 undefined 가 아니 었 을 까?
네,맞습니다.JS 에 서 는 사전 컴 파일 과정 이 있 습 니 다.JS 는 모든 JS 코드 를 실행 하기 전에 var 키워드 와 function 정의 식(함수 정의 식 과 함수 표현 식)을 먼저 처리 합 니 다.
앞에서 말 한 바 와 같이 호출 함수 가 실행 되 기 전에 먼저 활동 대상 을 만 든 다음 에 이 함수 의 국부 변수 정의 와 함수 정 의 를 찾 습 니 다.변수 이름과 함수 이름 을 모두 이 활동 대상 의 동명 속성 으로 합 니 다.국부 변수 에 대한 정 의 는 변수의 값 이 진정 으로 실 행 될 때 만 계산 합 니 다.이 때 는 간단하게 undefined 로 부 여 됩 니 다.
그리고 함수 에 대한 정 의 는 주의해 야 할 부분 입 니 다.

alert(typeof fun); //  :function
 alert(typeof fn); //  :undefined
 function fun() { //     
 alert('I am Skylor.min');
 };
 var fn = function() { //     
 }
 alert(typeof fn); //  :function

이것 이 바로 함수 정의 식 과 함수 표현 식 의 차이 입 니 다.함수 정의 식 에 대해 서 는 함수 정 의 를 앞 당 깁 니 다.함수 표현 식 은 실행 과정 에서 계산 합 니 다.
여기까지 말 하 는 김 에 한 가지 질문 을 하 겠 습 니 다.
    var name = 'Skylor.min';
    age = 25;
 
우 리 는 var 키 워드 를 사용 하지 않 고 정의 하 는 변 수 를 알 고 있 습 니 다.이 는 전체 변수 에 해당 하고 우리 가 방금 알 고 있 는 지식 과 연 결 됩 니 다.
age 를 식별 자 로 해석 할 때 쓰기 동작 이기 때문에 전체 window 활동 대상 을 찾 았 을 때 이 식별 자 를 찾 지 못 했 을 때 window 활동 대상 을 바탕 으로 undefined 의 age 속성 을 되 돌려 줍 니 다.
즉,age 는 최고급 역할 영역 에서 정 의 됩 니 다.
지금,아마도 당신 은 내 가 방금 말 한 것 을 알 고 있 을 것 입 니 다.JS 는 모든 JS 코드 를 실행 하기 전에 var 키워드 와 function 정의 식(함수 정의 식 과 함수 표현 식)을 먼저 처리 합 니 다.
네,다음 의 예 를 보 여 주세요.

<script >
 alert(typeof mm); //  :undefined
 </script >
 <script >
 function mm() {
  alert('I am Skylor.min');
 }
 </script >

이상 은 이 글 의 모든 내용 입 니 다.본 고의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가 치 를 가지 기 를 바 랍 니 다.여러분 의 저희 에 대한 지지 에 감 사 드 립 니 다.