그의 해석은 매우 설득력이 있다

자, 오늘 자바스크립트에서 논란이 된 화제 중 하나인 향상을 분석해 보겠습니다.많은 사람들이 승급은 실행 과정에서 변수와 함수를 파일 위로'승급'하는 것이라고 생각한다.만약 내가 다섯 살짜리 아이에게 자바스크립트를 가르쳐야 한다면, 나는 이 정의를 견지할 것이다.
그러나 나는 다섯 살짜리 아이를 가르치는 것이 아니기 때문에, 나는 승진을 자바스크립트 엔진이 실행을 위한 준비 과정이라고 정의하기를 원한다.이 정의도 과장되지만 더 좋은 방법은 자바스크립트 실행의 첫 단계로 보는 것이다.
사용자가 그것을 어떻게 보든지 간에 변수나 함수를 파일의 맨 위로 끌어올리지 않습니다.

JavaScript 코드 실행

JavaScript를 실행할 때는 다음 두 가지를 기억해야 합니다.

JavaScript는 동기화(한 번에 한 줄)

JavaScript는 단일 스레드(특정 순서로 실행)

JavaScript를 실행하면 전체 프로세스가 실행 컨텍스트에서 수행됩니다.
실행 상하문은 실행에 필요한 모든 정보를 저장하는 용기일 뿐입니다.기본적으로 그것은 변수와 함수를 저장한다.
실행 상하문에는 두 개의 구성 요소가 있는데, 각 구성 요소는 실행 자체의 각 단계를 처리한다.

메모리 할당 단계

실행 단계

메모리 할당 단계

이 단계에서 모든 변수와 함수는 상하문을 실행하는 메모리 분배 구성 요소에 저장됩니다.그것들은 키 값 쌍에 저장된다.
변수에 대해 값 undefined을 차지 문자로 제시한다.함수에 대해 전체 코드가 메모리로 복사됩니다.

실행 단계

이 단계에서 코드는 단지 간단하게 집행할 뿐이다.컨텍스트를 실행하는 실행 어셈블리에서 발생합니다.
우선 글로벌 환경을 조성해야 한다.그리고 코드가 실행될 때 함수마다 이 과정을 반복합니다.
우리는 하나의 예를 통해 그것을 더욱 잘 이해할 수 있다.다음 코드를 상상해 보세요.

var x = 2

function double(n) {
  return n * n
}

double(x) // 4

위에서 설명한 대로 글로벌 실행 컨텍스트를 먼저 작성합니다.

그리고 함수 자체를 위한 로컬 실행 상하문을 만듭니다.

현재 코드는 한 줄 한 줄 실행될 것이다.이를 위해 전역과 국부 상하문에 있는 모든 변수에 값을 부여하고 함수가 실행됩니다.

return 문장을 만났을 때 컨트롤을 되돌려주고 함수로 만든 임시 실행 상하문을 삭제합니다.

이 과정은 모든 기능에 대해 중복된다.그래서 실제로는 호출 창고라고 불리는 창고를 형성했다.

전역 컨텍스트는 스택의 아래쪽에 있습니다.그런 다음 각 컨텍스트가 스택됩니다.자바스크립트를 실행할 때, 모든 상하문은 하나하나 삭제되며, 마지막으로 실행이 끝날 때까지 전역 상하문을 삭제합니다.

크레인

자바스크립트 코드가 실행되는 작업 원리를 알았으니, 당신은 이미 향상된 과정을 확정했을 것입니다.그것은 단지 키 값 쌍에서 변수와 함수에 메모리를 분배할 뿐이다.
주의해야 할 점은 실제로 scope에 한 번씩 무게가 실린다는 것이다.먼저 전역 작용역이고, 그 다음에 모든 함수 작용역, 유형 작용역 등이 있다.
만약 향상된 개념을 정확하게 이해하지 못한다면, 결함이 있는 프로그램을 작성하기 쉽다.따라서 우리는 변수, 함수와 클래스를 하나하나 소개할 것이다.

가변 크레인

변수 올리기는 버스트 변수 선언 및 초기화에 사용됩니다.성명은 메모리가 변수에 분배될 때, 초기화는 값을 부여할 때를 가리킨다.
따라서 만약에 우리가 초기화하기 전에 변수를 성명하거나, 만약 우리가 성명하기 전에 변수를 초기화하거나, 우리가 같은 줄에서 즉시 변수를 성명하고 초기화한다면, 우리는 행동이 많든 적든 같을 것이라고 예상할 수 있다.
자바스크립트 엔진은 항상 변수를 미리 설명하기 때문에, 값은 실행할 때만 초기화되며, 완전히 실행 범위에 달려 있습니다.
위의 예에서 우리는 그것이 어떻게 일을 하는지 보았다.그러나 우리는 var 성명을 사용했는데 더욱 현대적인 let과 const 키워드에 비해 그의 행동에 변화가 생겼다.

무공승급

var 성명 변수를 사용하면 승급 기간에 사용치 undefined을 초기화합니다.

var x
x = 10

y = 10
var y

var z = 10

상기 모든 상황에서 변수 x, y과 z의 값은 정의되지 않았다.

우리 같이 해요.

let과 const의 경우 변수는 var과 같이 높아졌지만 기본값으로 초기화되지 않았다.

let x = 10

const y
y = 20

let z = 30

위의 경우 모든 변수가 향상되지만 기본값은 제공되지 않습니다.다른 점은 함수가 이 변수 중 하나를 사용했지만 초기화하기 전에 var을 사용한 변수와 달리 let과 const은 값이 없기 때문에 오류를 던진다는 점이다.

console.log(x) //undefined
var x = 10

위의 예에서 우리는 x을 사용하여 var을 성명했다.이에 따라 승급 과정에서 x은 콘솔에 기록된 undefined의 값을 받게 된다.그리고 값 10으로 x을 초기화합니다.

console.log(x) // ReferenceError
let x = 10

이 예에서, 우리는 let을 사용하여 변수를 성명했기 때문에 인용 오류를 얻었다.변수가 향상되었지만 초기화된 값은 없습니다.이는 const에도 적용된다.
이것이 바로 우리가 let과 const을 사용하는 것이 var이 아닌 이유이다.만약 우리가 공교롭게도 위와 같은 코드가 있다면 함수 다음에 변수를 설명하고 초기화하면 오류가 발생할 수 있기 때문이다.undefined을 값으로 사용하면 오류가 발생하지 않으며, 자신이 오류를 찾아낼 수 있습니다.

기능 향상

예시에서 보듯이 함수도 향상되었습니다.함수 향상은 함수의 코드를 키:value 쌍에 저장할 뿐입니다.키는 함수 이름이 될 것입니다.함수 향상의 부작용은 함수를 정의하기 전에 호출할 수 있다는 것이다.

sayHello() // "Hello"

function sayHello() {
  console.log("Hello")
}

상술한 상황에서 이 함수는 성명하기 전에 호출되었지만, 향상되었기 때문에 여전히 유효하다.이런 상황을 피하기 위해서 실제로는 함수 표현식을 사용할 수 있다.

sayHello() // ReferenceError

const sayHello = function () {
  console.log("Hello")
}

함수 표현식은 함수를 변수에 저장할 뿐이다.그것들은 아직 조립하지 않았기 때문에 설치하기 전에 사용할 수 없다.

학급 향상

자바스크립트에서 class개의 성명도 끊겼다.그러나 함수 증가량과 달리 클래스의 값이 초기화되지 않아 인용 오류가 발생할 수 있습니다.

const p = new Rectangle() //ReferenceError

class Rectangle {
  constructor(height, width) {
    this.height = height
    this.width = width
  }
}

함수 표현식과 마찬가지로 클래스 표현식도 클래스를 변수에 부여하여 생성할 수 있다.그러나 클래스 성명과 클래스 표현식은 모두 같은 방식으로 향상되었기 때문에 행위 변화가 없다.

조립 착오를 피하다

하면, 만약, 만약...

변수 사용 전에 변수

선언 및 초기화

함수나 클래스를 사용하기 전에

은 let과 const이 아닌 var을 고수합니다.

또한 모든 함수의 전역 상하문과 국부 상하문을 항상 이해해야 합니다.값이 실행될 때만 분배되기 때문에 모든 이런 분배는 함수가 호출되기 전에 해야 한다는 점이 중요하다.자바스크립트는 동기화되고 단일 라인이라는 것을 기억하십시오.그래서 모든 일은 특정한 순서에 따라 한 줄 한 줄 집행된다.프로그램을 작성할 때 이러한 실행 순서를 최대한 형상화하면 크레인과 관련된 문제를 감소/해결하는 데 도움이 될 것이다.