JavaScript의 '실행 컨텍스트'는 정확히 무엇입니까?

JavaScript의 '실행 컨텍스트'는 정확히 무엇입니까?

---

내 제목은 거의 모든 것을 요약합니다.

누구든지 나를 깨달을 수 있습니까?

"JavaScript의 '실행 컨텍스트'는 무엇입니까?"

그리고 그것이 '이것', 호이 스팅, 프로토 타입 체인, 범위 및 가비지 수집과 어떤 관련이 있습니까?

---

밀접하게 관련되지 않은 몇 가지 다른 개념에 대해 질문하고 있습니다. 각각에 대해 간략하게 설명하겠습니다.

---

실행 컨텍스트 는 언어 사양의 개념으로, 일반인의 용어로는 함수가 실행되는 '환경'과 대략 동일합니다. 즉, 변수 범위 (및 범위 체인 , 외부 범위의 클로저에있는 변수), 함수 인수 및 this개체 값입니다 .

호출 스택 실행 콘텍스트의 집합이다.

참조 이 답변 하고 이 문서를 .

---

범위 는 말 그대로 변수에 액세스 할 수있는 범위입니다. 간단하게 :

var x;

function a() {
    var y;
}

x어디서나 액세스 할 수 있습니다. a이 호출 되면 x외부 범위에 있습니다. ( 스코프 체인에 저장됩니다 .)

반대로 의 범위로 제한 y되어 a()있기 때문에 코드 내에서만 액세스 할 수 있습니다 a. 이것은 var키워드가하는 일입니다 : 변수를 지역 범위로 제한합니다. 생략 우리가하면 var, y에 끝날 것이다 글로벌 범위 , 일반적으로 나쁜 일이 생각했다.

---

게양 을 컴파일 시간 에 가깝다고 생각하십시오 . JavaScript에서 함수 선언 은 해당 범위의 맨 위로 "게재"됩니다. 즉, 다른 코드 보다 먼저 구문 분석되고 평가 됩니다. (이는 인라인으로 평가되는 함수 표현식 과 반대 입니다.) 다음을 고려하십시오.

a();
b();

function a() { }
var b = function() { }

a()선언이 맨 위로 올라 갔기 때문에에 대한 호출 은 성공할 것입니다. a프로그램 실행이 시작되기 전에 자동으로 할당되었습니다. 를 호출 b()실패합니다 TypeError때문에이 b라인 4까지 정의되지 않습니다.

---

당신은 너무 많은 개념을 요구했지만 하나씩 선택하고 이해합시다.

코드가 실행되는 환경은 Execution context. 코드가 실행될 때 생성됩니다.

Execution Context (Global), JS Engine에서 만든에는 다음과 같은 3 가지 중요한 사항이 포함되어 있습니다.

1. 전역 개체- window
2. 특수 개체 this
3. 외부 환경 참조

이해하기위한 간단한 예를 살펴 보겠습니다 Global Execution Context.

var a = "Hello World";

function b(){

}

JS 엔진이 위의 코드를 실행하면 다음과 같은 실행 컨텍스트가 생성됩니다 (이미지에 표시됨). Global Execution Context

---

이제 JS 엔진이 어떻게 생성되는지 살펴 보겠습니다 Execution Context(그런 다음 호이 스팅을 파고 이해하게됩니다). 다음 시나리오를 고려하십시오.

b();
console.log(a);

var a = "Hello World!";
function b(){
    console.log("Called b!");
}

b()나중에 선언해도 함수를 호출 할 수 있습니다 . 이것은 내 코드가 실행되기 전에 JS Engine이 무언가를하고 있음을 의미합니다.

JS Engine은 코드를 실행하는 동안 다음 두 단계를 수행합니다.

생성 단계 :

• JS 엔진 구문 분석-코드를 통해 실행하고 코드로 identifies variables & functions생성 (실행 단계에서 사용됨)
• 변수 및 함수를위한 메모리 공간 설정- "Hoisting"
• Hoisting- 코드가 실행되기 전에 JS Engine은 코드 내에서 사용되는 Var & Func를위한 메모리 공간을 따로 확보합니다. 이러한 변수 및 함수는 실행되는 모든 함수의 실행 컨텍스트를 구성합니다. JS의 모든 변수는 처음에 정의되지 않음으로 설정됩니다.

실행 단계 : 이해하기 매우 간단합니다.

• 코드가 줄 단위로 실행되면 (JS 인터프리터에 의해) 실행 컨텍스트 내에 정의 된 변수에 액세스 할 수 있습니다.
• 변수 할당은이 단계에서 수행됩니다.

함수 호출이있을 때마다 새로운 실행 컨텍스트가 생성됩니다.

실행 컨텍스트 스택 : 함수를 호출하면 어떻게 되나요?

function b(){

}

function a(){
    b();
}

a();

• 이제 먼저 Global Execution Context생성됩니다 (위에서 설명한대로).

• 그런 다음 실행이 시작되고 interpreeter가 만납니다 call to function a().here a new execution context is created pushed on top EC Stack

  따라서 함수를 호출 할 때마다 새 EC가 생성되어 EC 스택 위에 배치됩니다.

• 그래서 지금 EC for a()입니다 CREATED코드 내부를 실행합니다 interpreeter a()줄 단위

• 그런 다음 intrepreeter가 만나면 상단 또는 스택 에 푸시되는 call to function b()다른 항목이 생성됩니다.ECEC

• b()완료 되면 스택이 튀어 나온 다음 a()완료됩니다.Global EC

위 코드 스 니펫은 실행 스택을 참조하십시오.

---

나는 가장 밀접하게 관련된 주제 만 다루었습니다.

실행 컨텍스트는 기존 코드를 둘러싼 래퍼입니다 . 작성하지 않은 코드 가 포함되어 있습니다 . 그러나 JS 엔진에 의해 생성됩니다 .

다음으로 구성됩니다.

1. 전역 개체
2. '이'
3. 외부 환경
4. 귀하의 코드

---

.js 파일 / 앱을 실행할 때마다 실행 컨텍스트가 생성됩니다. 이 생성 단계의 첫 번째 단계는 Hoisting 입니다. JS 엔진 공간을 예약 또는 세트는 메모리이야 에 정의 된 모든 변수와 함수에 대한 당신의 코드입니다. 그런 다음 코드가 한 줄씩 실행될 때 액세스됩니다.

예를 들면 :

b();
console.log(a);
var a = "hi!";
function b() {
    console.log("calling function");
}

Here, the function b() and variable a are both accessed before they are defined, however, due to hoisting the console will not throw any error.

The output will look like - (try it)

calling function
undefined

Notice how the function was executed completely, but we have undefined for the variable. This is because Hoisting is performed differently for functions vs variables. The function as a whole is picked up into the memory, but for the variables, space is reserved as a placeholder with the value of undefined. The actual value is then replaced when the engine executes your code line-by-line.

I hope this clears the concept for you.

---

The "Execution Context" is an umbrella that wraps all of the code to help manage it. It's like a manager that manages any environment. Since there's so many lexical environments because in a JavaScript application you have lots of variables and functions you need a way to manage everything. What comes first, what comes second and so on, and if you did not have an "Execution Context" environment everything goes to hell. So consider the "Execution Context" a wrapper, a manager that manages your code.

---

I would like to address

1. Context
2. this context (relation with context)
3. Scope

1 : Execution Context

JavaScript is a single threaded language, meaning only one task can be executed at a time. When the JavaScript interpreter initially executes code, it first enters into a global execution context by default. Each invocation of a function from this point on will result in the creation of a new execution context.

This is where confusion often sets in, the term execution context is actually for all intents and purposes referring more to scope and not context. It is an unfortunate naming convention, however it is the terminology as defined by the ECMAScript specification, so we’re kinda stuck with it.

Each time a new execution context is created it is appended to the top of the execution stack. The browser will always execute the current execution context that is atop the execution stack. Once completed, it will be removed from the top of the stack and control will return to the execution context below.

An execution context can be divided into a creation and execution phase. In the creation phase, the interpreter will first create a variable object (also called an activation object) that is composed of all the variables, function declarations, and arguments defined inside the execution context. From there the scope chain is initialized next, and the value of this is determined last. Then in the execution phase, code is interpreted and executed.

2 : this Context

What is “this” Context? Context is most often determined by how a function is invoked. When a function is called as a method of an object, this is set to the object the method is called on:

var obj = {
    foo: function() {
        return this;   
    }
};

obj.foo() === obj; // true

The same principle applies when invoking a function with the new operator to create an instance of an object. When invoked in this manner, the value of this within the scope of the function will be set to the newly created instance:

function foo() {
    alert(this);
}

foo() // window
new foo() // foo

When called as an unbound function, this will default to the global context or window object in the browser. However, if the function is executed in strict mode, the context will default to undefined.

3 : Variable scope

A variable can be defined in either local or global scope, which establishes the variables’ accessibility from different scopes during runtime. Any defined global variable, meaning any variable declared outside of a function body will live throughout runtime and can be accessed and altered in any scope. Local variables exist only within the function body of which they are defined and will have a different scope for every call of that function. There it is subject for value assignment, retrieval, and manipulation only within that call and is not accessible outside of that scope.

ECMAScript 6 (ES6/ES2015) introduced the let and const keywords that support the declaration of block scope local variables. This means the variable will be confined to the scope of a block that it is defined in, such as an if statement or for loop and will not be accessible outside of the opening and closing curly braces of the block. This is contrary to var declarations which are accessible outside blocks they are defined in. The difference between let and const is that a const declaration is, as the name implies, constant - a read-only reference to a value. This does not mean the value is immutable, just that the variable identifier cannot be reassigned.

For Other topics: GC : GC Prototyping : Prototyping

---

When you execute a function you create a new execution context comprising a local memory which is called a variable environment and this which is a placeholder, it will refer inside its execution context to whatever is the left of the . where that function is being called upon.

---

I suppose a simple example would explain everything.

Note: function.call(object) calls function function in context of object

// HTML

​<p id="p"></p>​​​​​​​​​​​​​​​​​​​​​​​​

// JavaScript

function helloWorld() {
    alert("HelloWorld: " + this);
}

var p = document.getElementById("p");
helloWorld();                // HelloWorld: [object DOMWindow]
helloWorld.call(window);     // HelloWorld: [object DOMWindow]
​​​​​​helloWorld.call("String");   // HelloWorld: String // Note: "toString()"
helloWorld.call​​​​(p);          // HelloWorld: [object HTMLParagraphElement]
helloWorld.call(new Date());​​​​ // HelloWorld: Tue Feb 21 2012 21:45:17 GMT+0100 (Central Europe Standard Time)

---

Execution Context is a wrapper to help manage the code that is running In your code you will see lot's of lexical environments means areas of the code between {} but which one is currently running is managed via execution contexts.it can contains your code and it also can contains beyond what you've written in your code.

참고URL : https://stackoverflow.com/questions/9384758/what-is-the-execution-context-in-javascript-exactly