실행 스택이라고 들어봤어요?만약 당신의 답이 부정적이라면, 당신은 이 블로그를 따라갈 수 있고, 그렇다면, 실행 상하문과 실행 창고를 되돌아볼 수 있습니다.JS 엔진은 어떻게 작동합니까?JS의 작업 메커니즘을 함께 알아보겠습니다.우리는 아래의 내용과 그것들이 어떻게 일을 하는지 알아야 한다.

실행 컨텍스트

스택 실행

글로벌 실행 컨텍스트

함수 실행 상하문

조립

평가 실행 컨텍스트

따라서 우리는 상술한 모든 주제를 상세하게 연구할 것이다.시작합시다...

1. 실행 언어 환경

실행 컨텍스트는 특정 유형의 JavaScript 코드를 실행하는 환경 또는 환경입니다.JS 코드의 실행은 컨텍스트의 변화에 따라 달라집니다.모든 실행에는 특정한 속성이 있고, 그것들도 비슷한 속성을 공유한다.실행 컨텍스트에는 세 가지 유형이 있습니다.

글로벌 실행 컨텍스트

함수 실행 상하문

평가 실행 컨텍스트

각 실행 컨텍스트는 실행 스택에서 JavaScript 객체로 저장됩니다.위의 그림에서 모든 실행 상하문을 볼 수 있습니다. 외부의 노란색 상자는 전체 실행 상하문을 나타냅니다.분홍색은 함수 집행 상하문이고, test() 함수 내의 연녹색은 eval 집행 상하문이다.걱정하지 마세요. 우리는 잠시 후에 이런 서로 다른 배경을 토론할 것입니다.따라와.좋다🦾🐱‍👤

2, 실행 스택

알다시피 컴퓨터 과학의 한 무더기는 책, 접시, 도넛과 같다🍩 위의 표지 사진에서책더미는 후진선출(LIFO)이다. 즉, 네가 방금 push 책더미 속의 책은 책더미 밑에 있고, 네가 마지막으로 책더미 속에 넣은 책은 책더미에서 쉽게 꺼낸 다음에 책더미 밑에서 꺼낸다.따라서 이런 성질은 컴퓨터 과학에도 마찬가지다.실행 창고에서, 창고는books가 아닌 전역 상하문, 함수 상하문, eval 상하문을 포함합니다.스택은 JavaScript 엔진이나 모든 컴파일러 또는 해석기가 실행하는 현재 명령을 추적합니다.우선, 창고의 전역 상하문은 창고의 밑부분까지 저장되고, 나머지 함수나 eval 상하문은 JS 코드의 순서에 따라 창고에서 서로 발생합니다.JS 엔진이 모든 함수나 eval을 실행할 때 창고에서 함수나 eval 상하문pop을 꺼냅니다.push 및 pop 은 일부 프로그래밍 언어에서 자주 사용하는 명령으로 창고에서 데이터를 배치하거나 가져오는 데 사용된다.

3. 글로벌 실행 컨텍스트

위의 그림에서 보듯이 모든 실행 창고는 전역 실행 상하문만 포함합니다.글로벌 환경에서 어떤 종류의 코드를 실행합니까?물론 어떤 함수에도 없는 코드입니다.JavaScript 프로그램을 실행할 때 글로벌 컨텍스트는 첫 번째로 실행 스택으로 전송되는 컨텍스트입니다.

let myName = `Vijay`;
let hobby = `painting`;

function display(myName,hobby) {
    console.log(`My name is ${myName} and My hobby is ${hobby}.`);
}

/*
 * Anything outside the functions which represent function execution context are 
 * all inside global execution context.
 */

4. 기능 실행 컨텍스트

JavaScript 프로그램에서 함수를 실행할 때 함수를 나타내는 객체가 실행 스택으로 전송됩니다.푸시 함수 실행 상하문 대상은 두 단계가 있다.구체적으로 다음과 같습니다.

작성 단계

실행 단계

상기 두 단계가 막후에서 어떻게 일을 하는지 봅시다.

작성 단계

작성 단계에서 함수를 작성하여 컨텍스트 객체를 실행합니다.만약 우리가 더욱 깊이 있게 집행 대상을 한다면 우리는 그것을 두 가지 환경으로 나눌 수 있다.

어휘 환경

가변 환경

시간을 낭비하지 말고 그것들이 무엇인지 봅시다.

어휘 환경

어휘 환경은 표지부(변수 또는 함수 이름)와 변수 자체의 표시 또는 구성으로 특정 구조에서 원어 값이나 대상에 대한 인용이다.이 환경에는 부모 어휘 환경에 대한 인용도 포함되어 있다.우리는 더욱 깊은 방향으로 발전하고 있다.걱정하지 마세요. 제가 마지막으로 전체 문장을 정리할 것입니다. 이것은 우리가 주목하는 마지막 세부 사항이 될 것입니다.따라서 우리는 어휘 환경을 세 부분으로 나눌 수 있다.

변수 객체(VO) 또는 환경 레코드 - 함수에 전달되는 매개변수에 대해 매개변수 객체라고 하는 새 객체를 만듭니다.함수에 전달되는 매개 변수가 얼마나 되는지 모르면argument 대상을 사용할 수 있습니다.그리고 JS 엔진은 이 함수를 철저히 확인하여 이 함수를 가리키는 속성을 만듭니다.함수 내의 모든 국부 변수에 대해 undefined 속성을 생성합니다.

Please notice this place, we will reference later to this point in the HOISTING section of this article.

역할 영역 및 역할 영역 체인 - 각 함수 선언은 범위 또는 영역과 같은 역할 영역을 생성합니다.함수에 전달되는 모든 매개 변수와 함수 내에서 성명된 변수는 이 함수의 범위에 잠겨 있다.전역 변수는 코드의 어느 곳에서든 접근할 수 있는 유일한 변수입니다.국부 변수는 함수 범위 내에서 성명된 변수이다.이러한 로컬 변수는 글로벌 또는 상위 범위에서 액세스할 수 없습니다.만약 당신이 전체와 국부 변수를 더 많이 알고 싶다면, 나는 문장의 링크를 제공할 것이다.코드가 국부 변수를 전역적으로 액세스하려고 하면 JS 엔진에서 오류가 발생합니다.하나 이상의 함수가 다른 함수에 중첩되면 이 중첩은 범위 체인을 생성합니다.예를 들어 한 함수가 다른 함수를 끼워 넣으면그런 다음 중첩 함수의 범위 체인은 다음과 같습니다.

let myName = `Vijay`;
let hobby = `painting`;

const greet = `Hello`;

function display(myName,hobby,birthYear) {
    function age(birthYear){
       return 2020-birthYear;
    }
    console.log(`${greet}! My name is ${myName} and My hobby is ${hobby}.`);
}

/*
 * Anything outside the functions which represent function execution context are 
 * all inside global execution context.
 */

함수 연령에 대해 그 범위 체인은 국부 범위, 그 부 함수의 범위display와 전역 함수 범위를 포함한다.만약 이 함수가 전역 범위 내의 변수(예를 들어 greet에 접근해야 한다면, 그 부분 범위 내에서 greet 변수를 찾을 것이다.변수를 찾지 못하면 상위 함수 범위에서 상위 레벨을 검색합니다.만약 그것이 그곳에서도 찾지 못한다면, 그것은 전 세계로 옮겨질 것이다.이것은 범위 체인이라고 불린다.

이런 귀속 - 대부분의 초보 프로그래머들은 this 키워드에 헷갈린다.아래의 코드 문장을 보십시오.

//this.(method or function or property);

실제로 코드에서 this. 을 찾았을 때, this 는 통상적으로 그 작용역을 호출하는 대상을 가리킨다.함수에서 this 키워드를 사용하면 this 브라우저에서 전역 창 객체에 표시됩니다.만약 어떤 방법이나 속성을 사용해서 그것을 호출한다면, 그것은 이 방법을 호출하는 특정한 대상에 속한다.this 키워드가 있는 함수를 호출하기 전에는 값을 지정하지 않습니다.

class People(){
  constructor(name,age){
    this.name = name;
    this.age = age;
  }

  display(){
    // 'this' inside this method is not referencing to any object yet. It will 
    // reference to an object when it is invoked.
    console.log(`My name is ${this.name} and I am &{this.age} years old`);
  }
}

const vijay = new People('Vijay',19);
// Here, `this` from the display function reference to the vijay 
// object
vijay.display(); 

function getThis(){
  // 'this' in the statement point to the browser's window object which is in 
  // global  scope
  console.log(this); 
}
/*
 * Anything outside the functions which represent function execution context are 
 * all inside global execution context.
 */

가변 환경

변수 환경과 어휘 환경은 거의 같다.변수 환경은 변수 대상(VO), 범위, 범위 체인과this 귀속도 가지고 있다.ES6 이후의 차이점은 하나입니다.함수let와 const를 저장하는 어법 환경에 사용되며, 그 중에서 변수 환경은 var에 사용된다.

실행 단계

이 단계에서 코드를 실행합니다.변수는 적당한 값을 부여하고 함수는 그 작업을 완성한다.창고로 보내는 모든 함수는 선착순으로 실행됩니다.함수를 실행할 때, 함수 실행 상하문은 실행 창고에서 삭제됩니다.

5、조립

모든javascript 개발자들은 향상의 개념을 알아야 한다.이것은 ES2015와 함께 탄생한 새로운 명사다.실제 개념은 우리가 자바스크립트에서 변수나 함수를 설명할 때 설명하기 전에 사용할 수 있다는 것이다.코드로 설명해 드릴게요.우리는 이 블로그에서 변수 대상(VO) 부분을 언급할 것이다.

// Hoisting with a variable.

console.log(name); 

/* 
 *The console output will be "undefined" because of the hoisting enables the 
 *variable available at the interpreting time.
 */

var name; // Declaration
name = "Vijay"; // Initialization
console.log(name); // Output will be "Vijay"

// Hoisting with function

age(1999,2020);

/*
 * In the case of a function, the output will be "21" instead of "undefined" 
 *because the function performed its operation during interpretation.
 */

function age(birthYear,currentYear){
  console.log(currentYear - birthYear);
}

age(2000,2020); // Output will be "20"

위의 코드와 VO 부분에서 인용한 바와 같이, 우리는 변수를 설명할 때, 설명 기간에 향상되기 때문에, 변수가 분배될 것이라는 것을 알고 있다undefined.변수가 하나의 값으로 초기화되면 향상으로 인해 아무런 영향을 미치지 않습니다.그 중에서 함수 성명은 프로그램이 코드의 성명 문장 앞에서 함수를 사용할 수 있도록 한다.이것들은 모두 향상된 효과다.기술 용어에서 해석 과정에서 메모리에 있는 이 변수에 대해 변수 성명을 하는데 이것은 함수와 같다.이것이 바로 우리가 변수와 함수를 설명하기 전에 그것들에 접근할 수 있는 이유이다.

6. Eval 실행 컨텍스트

마지막으로 가장 중요하지 않은 것은 eval이 상하문을 실행하는 것이 아니다.대부분의 프로그래머들이 그것을 사용하지 않기 때문에, 우리는 eval 실행 상하문에 대해 상세하게 토론할 생각은 없다.그것은 이미 유행이 지났다.이것은 브라우저가 eval을 여전히 지원하지만, 곧 시작될 새로운 프로젝트에서 eval을 사용하지 않는 것이 가장 좋다는 것을 의미한다.실제 기능은 실행 문자열일 뿐,javascript 코드일 뿐입니다.

// Eval execution context
console.log(eval(`2+2`)); // the console output will be "4"
console.log(eval('2 + 2') === eval(new String('2 + 2'))); //  the console output will be "false"

우리 블로그는 여기서 끝냅니다.나는 내가 가능한 한 많은 JS에 관한 지식을 제공하기를 바란다. 너는 아래의 문장을 읽을 수 있고, 이 문장들은 더욱 상세하게 설명할 것이다.
한층 더 읽다
The Ultimate Guide to Hoisting, Scopes, and Closures in JavaScript
eval() and eval execution context
Understanding Execution Context and Execution Stack in Javascript
Cover Photo by Sharon McCutcheon from Pexels