JavaScript 핵심 실행 컨 텍스트, 역할 도 메 인 체인, 패키지
실행 창고 CS (call stack)
예 를 들 어:
function foo() {
console.log('foo ');
function bar() {
console.log('bar ');
}
bar();
}
foo();코드 가 실 행 될 때 스 택 을 어떻게 변경 합 니까?
G_EC 을 만 들 고 창고 에 들 어 갑 니 다.실행 스 택:
G_EC
foo 의 실행 컨 텍스트 foo_EC 를 만 들 고 스 택 에 들 어 갑 니 다.실행 스 택:
foo_EC
G_EC
console.log 함수, 생 성 console.log 함수 의 실행 상하 문 clg_EC 을 창고 에 넣 습 니 다.실행 스 택:
clg_EC
foo_EC
G_EC
console.log 실행 이 완료 되 었 습 니 다. 'foo 함수 가 실행 되 었 습 니 다' 를 인쇄 하고 소각 clg_EC, 스 택 을 나 갑 니 다.실행 스 택:
foo_EC
G_EC
bar 함수, 생 성 bar 의 실행 컨 텍스트 bar_EC 를 만 들 고 스 택 에 들 어 갑 니 다.실행 스 택:
bar_EC
foo_EC
G_EC
console.log 함수, 생 성 console.log 함수 의 실행 상하 문 clg_EC 을 창고 에 넣 습 니 다.실행 스 택:
clg_EC
bar_EC
foo_EC
G_EC
주의: 여기
clg_EC 는 새로운 문맥 로 이전 과 다 릅 니 다 console.log 실행 이 완료 되 었 습 니 다. 'bar 함수 가 실행 되 었 습 니 다' 를 인쇄 하고 소각 clg_EC, 스 택 을 나 갑 니 다.실행 스 택:
bar_EC
foo_EC
G_EC
bar 함수 집행 완료, 소각 bar_EC, 출고.실행 스 택:
foo_EC
G_EC
foo 함수 집행 완료, 소각 foo_EC, 출고.실행 스 택:
G_EC
G_EC, 출고 되 었 습 니 다.실행 스 택:
비다
상하 문장의 내용 을 실행 하 다
//
EC = {
VO = {...},
SC = [...],
this = [...]
}1. 변수 대상 VO (Varibale Object)
2. 역할 영역 체인 SC (Scope Chain)
3. this
상하 문 이해 에 영향 을 주지 않 고 건 너 뛸 수 있 습 니 다.
this 의 지향 문제:this 지향 window 대상 console.log(this); //windowthis, 지향 window (엄격 한 모드 에서 지향 undefined function foo(){
console.log(this); //window
}
foo();call, apply 호출, this 가리 키 는 call / apply 의 첫 번 째 매개 변수 var obj = {a: 1};
function foo(){
console.log(this); //obj
}
foo.call(obj);
foo.apply(obj);obj.fun 방식 으로 호출, this 지향 obj var obj = {
a: 1,
foo: function(){
//obj.foo()：this obj，
//bar()： ，this window
console.log(this);
}
};
obj.foo();
var bar = obj.foo;
bar();함수 VO 생 성 시 js 엔진 이 하 는 일
예 를 들 어:
function foo(a, b){
console.log(bar); //ƒ bar(){}
console.log(a); //2
function bar(){}
var a = 1;
}
foo(2, 3);생 성 절차 에 따라 foo 함 수 를 생 성 하 는 VO - fooVO
//1. ，
foo_VO = {
arguments: {...}, //arguments
a: undefined,
b: undefined,
}
//2. ， a， VO a ，
foo_VO = {
arguments: {...},
a: undefined,
b: undefined,
}
//3. ， foo(2, 3) 2, 3， a, b
foo_VO = {
arguments: {...},
a: 2,
b: 3,
}
//4. ， foo， foo VO
foo_VO = {
arguments: {...},
a: 2,
b: 3,
foo: function(){}
}그래서 마지막 으로 foo 함수 가 만 든 VO 대상 은 바로...
foo_VO = {
arguments: {...},
a: 2,
b: 3,
foo: function(){}
}VO 생 성 은 함수 가 실행 되 기 전에 함수 가 실 행 될 때 현재 VO 에서 변 수 를 찾 을 수 있 기 때문에 왜 그런 지 설명 합 니 다.
console.log 함수 의 맨 앞 에 놓 아 도 인쇄 할 수 있 습 니 다.a 와foo 의 값.SC 의 내용
SC = 상하 문 창 고 를 이전 단계 에서 실행 하 는 AO + 이전 단계 에서 상하 문 창 고 를 실행 하 는 SC
예 를 들 어:
function foo() {
function bar() {
function baz(){
}
}
}전체 컨 텍스트 를 실행 합 니 다. 처음에는 SC 가 비어 있 었 습 니 다.
g_EC = {
SC: [],
AO: {...},
this: {...},
}foo 함수 가 상하 문 을 실행 합 니 다. 그 중에서 SC = 전역 상하 문 AO + 전역 상하 문 SC
foo_EC = {
SC: [g_EC.AO], //[g_EC.AO, ...g_EC.SC]
AO: {...},
this: {...},
}bar 함수 실행 컨 텍스트, 그 중 SC = foo 함수 실행 컨 텍스트 의 AO + foo 함수 실행 컨 텍스트 의 SC
bar_EC = {
SC: [foo_SC.AO, g_EC.AO], //[foo_SC.AO, ...foo_SC.SC],
AO: {...},
this: {...},
}baz 함수 실행 컨 텍스트, 그 중 SC = bar 함수 실행 컨 텍스트 의 AO + bar 함수 실행 컨 텍스트 의 SC
baz_EC = {
SC: [bar_SC.AO, foo_SC.AO, g_EC.AO], //[bar_SC.AO, ...bar_SC.SC],
AO: {...},
this: {...},
}함수 가 실 행 될 때 변 수 를 찾 으 면 자신의 AO 를 먼저 찾 습 니 다.없 으 면 SC 의 0 번, 1 번 을 차례로 따라... 뒤로 찾 아 보 세 요.SC 의 마지막 항목 을 찾 지 못 하면 오류 가 발생 합 니 다.
Uncaught ReferenceError: xxx is not defined 폐쇄 하 다
함수 의 하위 함수 가 이 함수 의 외부 에 저장 되면 패 킷 이 됩 니 다.
function foo(){
var a = 1;
return function bar(){
return a;
}
}
var baz = foo();
var qux = baz();
console.log(qux); //1foo 운행 중foo_EC = {
SC: [GO],
AO: {
a: 1,
...
},
this: {...},
}foo 실행 이 완료 되면 자신의 실행 컨 텍스트 를 소각 하고 그 중의 AO 도 소각 된다.그러나
bar 은 외부, 즉 baz 에 저장 되 고 bar 의 역할 영역 SC 에는 foo 의 AO 가 있 기 때문에 왜 폐쇄 가 형 성 될 때 외부의 함수 가 함수 내부 의 변 수 를 사용 할 수 있 는 지 설명 한다.baz_EC = {
SC: [foo_EC.AO, GO],
AO: {...},
this: {...},
}... 때문에
bar 함수 가 전역 역할 영역 에 저 장 됩 니 다.foo 의 AO 가 계속 존재 하여 소각 되 지 못 하면 메모리 가 유출 될 수 있다.사용 이 끝 난 후 에는 원래 의 폐쇄 를 제거 해 야 한다.baz = null 폐쇄 적 역할:
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Thymeleaf 의 일반 양식 제출 과 AJAX 제출텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
