자바스크립트의 이해_13_실행 모델의 상세한 설명_자바스크립트 기술

함수 실행 환경
간단 코드:

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

function say(msg,other){
var str = "nobody say:";
this.name = '바보의 좌우명'
function method(){};// var method = function(){};
alert(str msg)
}
say('hello world')
alert(name); // 바보의 좌우명 >
say 메소드를 호출할 때 첫 번째 단계는 실행 환경을 생성하는 것입니다. 실행 환경을 생성하는 과정에서 정의된 순서에 따라 일련의 작업이 완료됩니다.

1. 활성 개체''(활성화 개체)가 생성됩니다. 활성 개체는 사양에 지정된 또 다른 메커니즘입니다. 접근 가능한 명명된 속성이 있기 때문에 객체라고 부르지만 일반 객체와 같은 프로토타입이 없고(적어도 미리 정의된 프로토타입은 아님) 활성 객체를 JavaScript 코드를 통해 직접 참조할 수 없습니다.
2. 함수 호출을 위한 실행 환경을 만드는 다음 단계는 함수 호출 시 전달된 매개변수를 정수 인덱스와 일대일로 저장하는 배열형 객체인 인수 객체를 만드는 것입니다. 배열 멤버. 이 개체에는 길이 및 호출 수신자 속성도 있습니다(자세한 내용은 "Javascript_14_Function 매개변수 및 인수 이해" 참조). 그런 다음 이전에 만든 인수 개체를 참조하는 활성 개체에 대해 "인수"라는 속성이 만들어집니다.
3. 다음으로 실행 환경에 범위를 할당합니다. 범위는 객체 목록(체인)으로 구성됩니다. (더 복잡합니다. "Javascript_15_Scope 할당 및 변수 액세스 규칙 이해 및 클로저 보내기"를 참조하세요.)
4. 이후 ECMA 262의 소위 '활성 객체'에 의해 완료된 '변수 인스턴스화'가 발생합니다( 변수 설치) 프로세스. 이때, 함수의 형식 매개변수는 변수 객체의 명명된 속성으로 생성됩니다. 함수 호출 시 전달된 매개변수가 형식 매개변수와 일치하면 해당 매개변수의 값이 이러한 명명된 속성에 할당됩니다. 속성(그렇지 않으면 명명된 속성에 정의되지 않은 값이 할당됩니다). 정의된 내부 함수의 경우 선언된 이름으로 변경 가능한 객체에 동일한 이름의 속성이 생성되고 해당 내부 함수가 함수 객체로 생성되어 해당 속성에 할당됩니다. 변수 인스턴스화의 마지막 단계는 함수 내부에 선언된 모든 지역 변수를 변경 가능한 개체의 명명된 속성으로 만드는 것입니다. 참고: 이 과정에서 값이 있는 실제 매개변수와 함수 정의를 제외한 나머지는 모두 정의되지 않은 값으로 '사전 구문 분석'됩니다.
5. 마지막으로 this 키워드를 사용하려면 값을 할당해야 합니다. . (이때 전역 객체, 즉 윈도우를 가리킨다)

실행 환경이 성공적으로 생성된 후 2단계인 함수 몸체에서 위에서 아래로 코드를 실행한다.
1. var str='nobody say'가 실행되면 '계산 할당 표현식'이라는 프로세스가 발생합니다. 이때 활성 객체의 키 str 값이 undefine에서 'nobody say'로 설정됩니다. '.
2. this.name='Idiot's motto'를 실행하면 속성 이름이 this로 객체에 추가되고 'Idiot's motto'로 값이 할당됩니다.
3. 그런 다음 function innerMethod(); 마지막으로 'alert(str msg)를 실행하고 'nobody say:hello world'를 출력합니다.


function method(){}와 var method = function(){}
간단한 코드:

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

function say(){

method01();//method01
method02();//오류
function method01(){
alert('method01')
}
var method02 = function( ) {
alert('method02');
}
}
say();
method01 메소드를 호출하면 정상적으로 실행되는데, method02 메소드를 호출하면 오류가 보고되는 이유는 무엇입니까?
먼저 method01은 함수 객체이고, method02는 다른 함수 객체를 가리키는 변수라는 점을 분명히 알아야 합니다. 앞 절의 내용에 따르면 'Active Object'에 의해 완료된 'Variable Instatiation' 과정에서 method01 함수는 일반적으로 'pre-parsing'되고, method02 변수는 입력되면 정의되지 않은 값으로 해석된다. 코드 실행과 관련이 있습니다. 함수 표현식을 계산하기 전에 method02가 호출되기 때문에 undefed를 메서드 호출로 사용하면 필연적으로 오류가 보고됩니다. 해결책은 상대적으로 간단합니다. method02() 호출 앞에 var method02=function(){...} 을 넣거나 함수 선언 (function method(){...}) 형식으로 함수를 정의하면 됩니다.
참고: 함수 표현식을 계산한다는 것은 var method02 = function(){...}이 될 때까지 프로그램이 실행된다는 의미입니다. method02는 실제로 이 시점에서 함수 객체를 가리킵니다. 왜냐하면 '사전 구문 분석' 중에 method02는 정의되지 않음

전역 실행 환경(이미 "실행 모델 분석"에서 논의되었으며 자세한 내용은 없음)
페이지에서 , 전역 실행 환경은 JS 코드가 처음 로드될 때 생성됩니다. 전역 실행 환경의 범위 체인은 실제로 JavaScript 코드 실행을 시작하기 전에 하나의 객체인 전역 객체(창)로 구성됩니다. 엔진은 이 범위 체인 구조를 생성합니다. 전역 실행 환경에는 변수 인스턴스화 프로세스도 있으며 내부 함수는 대부분의 JavaScript 코드를 포함하는 일반적인 최상위 함수 선언입니다. 더욱이, 전역 객체는 변수 인스턴스화 중에 변경 가능한 객체입니다. 이것이 전역적으로 선언된 함수가 전역 객체 속성인 이유입니다. 전역적으로 선언된 변수의 경우에도 마찬가지입니다. 전역 실행 환경은 전역 객체를 참조하기 위해 this 객체를 사용합니다.

참고: '함수 실행 환경'의 활성화 개체와 전역 실행 환경의 변수 개체를 구별합니다. 변수 개체는 활성화 개체라고도 합니다. (차이가 있기 때문에 새로운 이름이 부여됩니다.) 스펙에서는 차이점을 보여주기 위해 전역 실행 환경/평가 실행 환경에서는 Variable Object라고 하고, 함수 실행 환경에서는 Activation Object라고 합니다.

Eval 실행 환경
Eval 실행 환경 구축 시 변수 객체(Variable Object)는 eval이 호출될 때 현재 실행 컨텍스트의 변수 객체(Variable Object)입니다. 전역 실행 환경에서 eval 함수가 호출되면 해당 변수 객체(Variable Object)가 전역 객체가 됩니다. 함수에서 eval이 호출되면 해당 변수 객체(Variable Object)는 함수의 활성화 객체(Activation Object)가 됩니다.

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

//FF2.0, IE7에서 전달 , Opera9.25, Safari3.0.4
function fn(arg){
var innerVar = "함수 내 변수";
eval(' ​​​​
var evalVar = "평가 내 변수";
document.write (arg "
");
document.write(innerVar "
")
')
document.write(evalVar) ;
}
fn("arguments for function");

출력 결과는 다음과 같습니다.
함수에 대한 인수
🎜>eval의 변수
참고: fn 함수의 매개변수와 지역 변수는 eval 호출에서 액세스할 수 있습니다. eval에 정의된 지역 변수는 변수 개체가 동일한 객체이기 때문에 fn 함수에서도 액세스할 수 있습니다. .
Eval Code 실행에 들어가면 새로운 Scope Chain이 생성되며, 그 내용은 현재 실행 컨텍스트의 Scope Chain과 정확히 동일합니다.


마지막 예시
코드는 다음과 같습니다.

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

var externalVar1="전역 코드의 변수";
function fn1(arg1, arg2){
var innerVar1="함수 코드의 변수"; >function fn2() { return externalVar1 " - " innerVar1 " - " " - " (arg1 arg2) }
return fn2()
}
var externalVar2=fn1(10, 20); 🎜>

실행과정은 대략 다음과 같습니다.
1. 윈도우 객체인 Global 객체와 윈도우 객체 자체인 Variable 객체를 초기화합니다. 창 개체만 포함하는 범위_1이라고 가정하고 범위 체인 개체를 만듭니다.
2. JS 소스 코드를 스캔하고(소스 코드를 읽으면 어휘 및 구문 분석 과정이 있을 수 있음) 결과에서 정의된 변수 이름과 함수 객체를 얻을 수 있습니다. 스캔 순서에 따라:
2.1 변수 externalVar1을 발견하고, window 객체에 externalVar1 속성을 추가합니다. 값은 정의되지 않습니다.
2.2 함수 fn1의 정의를 발견하고, 이 정의를 사용하여 함수 객체를 생성합니다. 생성 프로세스에 전달된 범위 체인은 range_1 입니다. 이름이 fn1이고 값이 반환된 함수 객체인 window 속성에 결과를 추가합니다. fn1의 내부 [[Scope]]는scope_1입니다. 또한 생성 과정에서는 함수 본문에 있는 JS 코드에 대해 특별한 처리를 수행하지 않는다는 점에 유의하세요. 이는 함수 본문에 있는 JS 코드의 스캔 결과만 함수 개체의 내부 속성에 저장하는 것으로 이해될 수 있습니다. 함수가 실행될 때 처리합니다. 이는 함수 코드, 특히 중첩된 함수 정의의 변수 인스턴스화를 이해하는 데 중요합니다.
2.3 변수 externalVar2를 발견하고 window 객체에 externalVar2 속성을 추가하면 값이 정의되지 않습니다.
3. 값을 "전역 코드의 변수"로 할당합니다.
4. fn1 함수를 실행하고 반환 값을 가져옵니다.
4.1 활성화 개체를 생성합니다(활성화_1이라고 가정). 범위 체인을 생성하고 범위_2의 첫 번째 개체는 활성화_1입니다. 객체는 창 객체입니다(fn1의 [[Scope]], 즉
4.2 프로세스 매개변수 목록에서 가져옴). 활성화_1에 arg1 및 arg2 속성을 각각 값 10과 20으로 설정합니다. 인수 객체를 생성하고 설정한 후 인수를 활성화_1의 속성으로 설정합니다.
4.3 fn1의 함수 본문에서 2단계와 유사한 프로세스를 수행합니다.
4.3.1 변수 innerVar1을 검색하고 innerVar1 속성을 추가합니다. 활성화_1 객체, 값은 정의되지 않았습니다.
4.3.2 함수 fn2의 정의를 발견하고 이 정의를 사용하여 함수 객체를 생성하며 생성 프로세스에 전달된 범위 체인은 범위_2입니다(함수 fn1의 범위 체인은 다음과 같습니다). 현재 실행 컨텍스트의 내용). fn2라는 이름과 반환된 함수 객체의 값을 사용하여 활성화_1의 속성에 결과를 추가합니다. fn2의 내부 [[Scope]]는scope_2입니다.
4.4 innerVar1 할당문을 실행하고 "함수 코드의 변수"에 값을 할당합니다.
4.5 fn2 실행:
4.5.1 활성화 개체를 생성합니다(활성화_2라고 가정). 범위_3의 첫 번째 개체는 활성화_2이고 다음 개체는 활성화_1 및 창이라고 가정합니다. .객체(fn2의 [[Scope]], 즉scope_2에서 가져옴);
4.5.2 프로세스 매개변수 목록. fn2에는 매개변수가 없으므로 인수 객체를 생성하고 이를 활성화_2의 속성으로 설정하면 됩니다.
4.5.3 fn2의 함수 본문에 대해 2단계와 유사한 프로세스를 수행하면 변수 정의 및 함수 선언이 발견되지 않습니다.
4.5.4 함수 본문을 실행합니다. 변수 참조의 경우 범위_3에서 검색합니다. 이 예에서는 innerVar1, arg1 및 arg2가 활성화_1에서 발견됩니다.
4.5.5 범위_3 및 활성화_2를 삭제합니다(가비지 수집 가능함을 의미).
4.5.6 fn2의 반환 값을 반환합니다.
4.6 활성화_1과 범위_2를 삭제합니다.
4.7 결과 반환.
5. 결과를 externalVar2에 할당합니다.

참조:
http://www.cnblogs.com/RicCC/archive/2008/02/15/JavaScript-Object-Model-Execution-Model.html
http://www .cn-cuckoo.com/2007/08/01/understand-javascript-closures-72.html