Javascript 실행 상하문 순서에 대한 깊이 있는 설명

컨텍스트를 실행하면?
1 실행 컨텍스트는 무엇입니까?
실행 상하문은 현재의 자바스크립트 코드가 해석되고 실행될 때 있는 환경의 추상적인 개념으로 자바스크립트에서 실행되는 모든 코드는 실행 상하문에서 실행된다.
2 실행 컨텍스트의 유형
실행 컨텍스트는 다음과 같은 세 가지 유형으로 나뉩니다.
전역 실행 상하문: 하나입니다. 이것은 기본적이고 기초적인 실행 상하문입니다.(어떤 함수에도 없는 코드는 전역 실행 상하문이다) 그는 두 가지 역할을 한다. 하나는 전역 변수, 즉 윈도우즈 아래의 변수를 가리키는 것이고, 다른 하나는this를 전역으로 가리키는 것이다.
함수 실행 상하문: 무수히 많고, 모든 함수는 자신의 실행 상하문을 가지고 있지만, 함수가 호출될 때만 만들어지고, 호출될 때마다 이 함수를 위해 새로운 실행 상하문을 만듭니다...
Eval 함수 실행 상하문: eval 함수에서 실행되는 코드를 가리키며 거의 사용되지 않으며 사용을 권장하지 않습니다.
2 실행 컨텍스트의 라이프 사이클
1. 작성 단계
실행 상하문의 생명주기는 세 가지 단계가 있다. 창설 단계 C 집행 단계 - 회수 단계 (주로 창설 단계)
함수가 호출되지만 내부 코드가 실행되지 않으면 다음 세 단계를 확인합니다.
1) 변수 대상 만들기: 우선 함수의 매개 변수arguments를 초기화하고 함수 성명과 변수 성명을 향상시킨다
2) 역할 체인 만들기: 실행 기간 컨텍스트의 작성 단계에서 역할 체인은 변수 대상 이후에 생성됩니다.역할 영역 체인 자체는 변수 대상을 포함한다.
역할 영역 체인은 변수를 해석하는 데 사용됩니다.변수 확인을 요청할 때 JavaScript는 코드가 중첩된 맨 안쪽부터 시작하며, 맨 안쪽이 없으면
변수를 찾으면 해당 변수를 찾을 때까지 상위 상위 도메인으로 이동합니다.
3) 이 지향점을 확인: 여러 가지 상황이 있다.
2. 실행 단계
변수 할당, 코드 실행 실행
3. 회수 단계
실행 컨텍스트 아웃바운드 VM 회수 실행 컨텍스트 대기
셋.변수 승급과this의 지향
1. 변수 성명 승급:
대부분의 프로그래밍 언어는 변수를 먼저 선언하고 사용하지만, JS에서는 약간 다르다.

console.log(a); // undefined
var a = 10;

상기 코드는 오류를 보고하지 않고 undefined를 정상적으로 출력합니다. Uncaught ReferenceError: a is not defined, 이것은 성명이 향상되었기 때문입니다.
다음과 같습니다.

var a; //   undefined “ ”
console.log(a);
a = 10; // 

2. 함수 성명 향상
함수를 만드는 방법은 두 가지가 있는데, 하나는 함수를 통해functionaa () {}
다른 하나는 함수 표현식 var aa=function () {}를 통해 이 두 가지는 함수 향상에 어떤 차이가 있습니까?

console.log(f1); // function f1(){}
function f1() {} //  
console.log(f2); // undefined
var f2 = function() {}; //  

다음으로 우리는 하나의 예를 통해 이 문제를 설명한다.

function test() {
 aa(); // Uncaught TypeError "aa is not a function"
 bar(); // "this will run!"
 var aa = function() {
  // function expression assigned to local variable 'aa'
  alert("this won't run!");
 };
 function bar() {
  // function declaration, given the name 'bar'
  alert("this will run!");
 }
}
test();

위의 예에서 aa()가 호출되었을 때 잘못 보고되었고bar는 정상적으로 호출될 수 있습니다.
앞에서 말했듯이 변수와 함수는 모두 상승합니다. 함수 표현식varaa=function () {} 을 만났을 때 먼저 varaa를 함수체의 맨 위로 상승시킵니다. 그러나 이때의 aa의 값은undefined이기 때문에 aa() 오류를 실행합니다.
함수 bar () 는 전체 함수를 향상시켰기 때문에 bar () 가 순조롭게 실행될 수 있습니다.
세부 사항은 반드시 주의해야 한다. 함수와 변수가 이름이 같고 모두 향상되는 경우 함수 성명 우선순위가 비교적 높기 때문에 변수 성명은 함수 성명에 덮어쓰지만 값을 다시 부여할 수 있다.

alert(a); // ：function a(){ alert(' ') }
function a() {
 alert(" ");
} //
var a = " ";
alert(a); // ：' '

function 성명의 우선순위가 var 성명보다 높다는 것은 두 개의 같은 변수가 function과 var 성명에 동시에 포함될 때function 성명이 var 성명을 덮어쓴다는 것을 의미한다
이 코드는 다음과 같습니다.

function a() {
 alert(" ");
}
var a; //hoisting
alert(a); // ：function a(){ alert(' ') }
a = " "; // 
alert(a); // ：' '

3. 이 방향을 정한다

//  1
function foo() {
 console.log(this.a) //1
}
var a = 1
foo() // this->window
//  2
function fn(){
 console.log(this);
}
var obj={fn:fn};
obj.fn(); //this->obj

//  3
function CreateJsPerson(name,age){
//this p1
this.name=name; //=>p1.name=name
this.age=age; //=>p1.age=age
}
var p1=new CreateJsPerson(" ",48);

//  4
function add(c, d){
 return this.a + this.b + c + d;
}
var o = {a:1, b:3};
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34

//  5
<button id="btn1"> this</button>
<script type="text/javascript">
 let btn1 = document.getElementById('btn1');
 let obj = {
  name: 'kobe',
  age: 39,
  getName: function () {
   btn1.onclick = () => {
    console.log(this);//obj
   };
  }
 };
 obj.getName();
</script>

결과:
1this는 윈도우를 가리킨다.
2 누가 함수를 호출했는지, 누구가this이기 때문에 이 장면에서foo함수 중의this는obj대상
3 구조 함수에서this는 현재 클래스의 실례이다
4call, apply,bind:this가 첫 번째 매개 변수입니다.
5 화살표 함수this 지향: 화살표 함수는 자신의this가 없습니다. 그 바깥쪽에 함수가 있는지 확인하십시오. 만약에 있다면 바깥쪽 함수의this는 내부 화살표 함수의this이고 없으면this는 윈도우입니다.
자바스크립트 실행 상하문 순서에 대한 이 글을 소개합니다. 자바스크립트 실행 상하문 순서에 대한 더 많은 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!