VUE3.0을 빠르게 시작하는 방법: 학습 시작
관련 권장 사항: JavaScript 자습서
우리는 "실행 환경", "범위", "프로토타입(체인)", "실행 컨텍스트" 등을 자주 듣습니다. 무엇을 설명합니까?
우리는 js가 약한 유형의 언어이고 변수 유형이 런타임에만 결정된다는 것을 알고 있습니다. js 엔진은 js 코드를 실행할 때 어휘 분석 , 구문 분석 , 의미 분석 및 기타 처리를 위에서 아래로 수행하고 코드 분석이 완료된 후 AST(추상 구문 트리)를 생성하고 최종적으로 기계어 코드를 생성합니다. CPU가 AST를 기반으로 실행하고 실행할 수 있다는 것입니다.
또한 JS 엔진은 코드를 실행할 때 다른 처리도 수행합니다. 예를 들어 V8에는 두 가지 단계가 있습니다.
이는 다음과 같이 이어집니다. 두 가지 개념: "실행 컨텍스트"와 "범위 체인".
위에서 우리는 js 코드가 실행 가능한 코드를 실행할 때 해당 실행 컨텍스트가 생성된다는 것을 알 수 있습니다.
우선, js에서 실행 가능한 코드에 해당하는 개념이 있습니다: "실행 환경" - 전역 환경, 함수 환경 및 eval .
둘째, 각 실행 컨텍스트에는 세 가지 중요한 속성이 있습니다
두 가지 코드를 살펴보겠습니다
.varscope="globalscope";
var 범위="로컬 범위";
함수 f(){
반환 범위;
}
return f();}checkscope(); var 범위="전역 범위";function checkscope(){
var 범위="로컬 범위";
함수 f(){
반환 범위;
}
return f;}checkscope()(); 무엇을 인쇄할까요?
왜? 대답은 실행 컨텍스트 스택이 다르다는 것입니다!
"실행 컨텍스트 스택"이란 무엇입니까?
실행 가능한 코드를 실행할 때, 여기서의 "준비"를 전문적으로는 "실행 컨텍스트"라고 합니다. 그런데 함수 등 실행 가능한 코드가 늘어나는데, 이렇게 많은 실행 컨텍스트를 어떻게 관리해야 할까요? 그래서 JS 엔진은 실행 컨텍스트 스택이라는 개념을 만들었습니다.
우리는 배열을 완전히 사용하여 동작을 시뮬레이션할 수 있습니다(스택 맨 아래에는 항상 전역 실행 컨텍스트 globalContext가 있습니다).
먼저
EStack=[globalContext];
코드의 첫 번째 부분을 시뮬레이션합니다
. push(<checkscope> functionContext); EStack.push(<f> functionContext);EStack.pop();EStack.pop();
그리고 두 번째 코드 부분은 다음과 같습니다:
EStack.push(<checkscope> functionContext); EStack.pop();EStack.push (<f> functionContext);EStack.pop();
그 이유는 먼저 "클로저" 개념을 공부해야 할 수도 있기 때문입니다!
그런데 "프론트 엔드 모듈화"에서 "장기적인 데이터 절약"을 달성하는 방법은 무엇입니까?
은닉처? 아니요. 폐쇄!
우선 범위는 프로그램에서 변수가 정의되는 영역을 나타냅니다. 범위는 변수를 찾는 방법을 지정하며, 이는 현재 실행 중인 코드의 변수에 대한 액세스 권한을 결정합니다.
범위에는 정적 범위 와 동적 범위 의 두 가지 유형이 있습니다.
JS에서 사용하는 정적 범위를 "어휘 범위"라고도 합니다. 함수의 범위는 함수가 정의될 때 결정됩니다.
위에서부터 어휘 범위의 변수는 컴파일 프로세스 중에 특정 범위를 갖습니다. 이 범위는 "현재 실행 컨텍스트"입니다. ES5 이후에는 실행 컨텍스트를 설명하기 위해 범위 대신 "어휘적 환경"을 사용합니다. 어휘 환경은 두 가지 구성원으로 구성됩니다.
예를 살펴보겠습니다.
var value=1 ;함수 foo(){
console.log(값);}함수 bar(){
var 값=2;
foo();}bar(); 위의 정의를 다시 보면 무엇을 인쇄해야 할까요?
실행 프로세스를 분석해 보겠습니다.
foo() 함수를 실행하고 먼저 foo 함수 내에서 검색하여 지역 변수 값이 있는지 확인합니다. 그렇지 않은 경우 정의된 위치, 즉 value=1을 기준으로 상위 레이어의 코드를 찾으면 결과가 1로 인쇄됩니다.
물론 이는 그리 간단하지 않으며 실행 컨텍스트의 관점에서 요약할 수 있습니다.
위에서 우리는 어휘 환경(범위)의 두 가지 구성 요소에 대해 이야기했습니다. 실행 컨텍스트와 결합하면 외부 어휘 환경의 참조를 통해 스택 레이어를 따라 범위가 확장되어 현재 환경에서 외부로 확장되는 체인 구조를 구축할 수 있음을 어렵지 않게 찾을 수 있습니다.
또 다른 예를 살펴보겠습니다:
function foo(){
console.dir(bar);
var a=1;
함수 바(){
a=2;
}}console.dir(foo);foo(); 정적 범위에서 전역 함수 foo는 자체 [[scope]]
foo[[scope]]=[globalContext];의 [[scope]] 속성을 생성합니다
. ( )에도 foo 함수의 정의 기간과 실행 기간이 차례로 들어갑니다.
foo 함수 정의 기간 동안 함수 bar의 [[scope]]에는 foobar[[scope]]=[fooContext,globalContext]
의
[[scope]] 범위와 전역 내장 범위가 포함됩니다
이 점은 다음과 같습니다. "JS는 변수 객체의 범위 체인을 생성하는 데 외부 어휘 환경 참조를 사용하여 실행 환경이 액세스할 수 있는 변수 및 함수에 대한 순서화된 액세스를 보장합니다."
실행 컨텍스트의 질문으로 돌아가 보겠습니다. 앞서 말했듯이 "로컬 범위"를 같은 방식으로 인쇄하는 이유에 대해 이야기해 보겠습니다. "JS는 어휘 범위를 사용하며 함수의 범위는 함수가 생성되는 위치에 따라 다릅니다." ” - JS 함수 실행 함수 정의 시 생성되는 스코프 체인을 사용합니다. 중첩 함수 f()는 이 범위 체인에 정의되어 있으며, 그 안의 변수 범위는 f()가 실행되는 시기와 장소에 관계없이 f()가 실행될 때 여전히 유효합니다.
자신의 어휘 환경 레코드에서 변수를 찾을 수 없는 경우 가장 바깥쪽 어휘 환경의 외부 어휘 환경 참조가 null 이 될 때까지 외부 어휘 환경 참조를 기반으로 외부 계층으로 검색할 수 있습니다.
이와 유사한 것은 "객체의 프로토타입 체인을 기반으로 한 검색"입니다.
__proto__ is null)차이점도 분명합니다. 프로토타입 체인은 프로토타입 속성을 통해 객체 상속을 설정하는 링크인 반면, 범위 체인은 내부 함수가 외부 함수에 액세스할 수 있도록 하는 클로저를 나타냅니다. 직접적이든 간접적이든 모든 함수 범위 체인은 궁극적으로 전역 컨텍스트에 연결됩니다.
관련 권장사항: JavaScript 학습 튜토리얼
위는 JavaScript 엔진이 JS 코드를 실행하는 방법에 대한 심층적인 이해입니다. 자세한 내용은 PHP 중국어 웹사이트의 다른 관련 기사를 참조하세요.
