JavaScript_javascript 팁의 식별자 승격 문제

JS에는 다양한 프로모션이 있습니다. 이 디자인은 실제로 좋지 않거나 언어 구현의 부작용입니다. 선언 없이 변수에 액세스하거나 나중에 선언하고 먼저 사용할 수 있습니다. 이로 인해 초보자들은 혼란스러워하고, JS를 오랫동안 사용해 온 많은 베테랑들조차 혼란스러워합니다. 그러나 ES6에 let/const가 추가된 이후 Hoisting 변수는 더 이상 존재하지 않습니다.

1. 변수가 선언되지 않았으니 직접 사용하세요

function test() {
  alert(notDefined);
}
test(); // ?

오류를 신고하는 것은 당연합니다

2. 마지막에 변수 선언

function test() {
  alert(declaredButNotAssigned); // undefined
  var declaredButNotAssigned;
}
test();

정의되지 않은 출력, 위의 예에 비해 결과가 개선되고 오류가 보고되지 않으며 코드가 실행될 수 있지만 변수 값이 프로그래머가 예상한 것과 다를 수 있습니다.

3. 마지막에 변수를 선언하고 동시에 변수에 값을 할당합니다

function test() {
  alert(declaredAndAssigned); // undefined
  var declaredAndAssigned = 1;
}
test();

결과는 2개와 같습니다. 당연히 할당만으로 1이 출력되지는 않습니다.

2개와 3개 모두 가변 호이스팅(Hoisting)을 갖고 있으며, 간단히 정의하면

변수 승격: 지정된 범위에서 코드 순서상 변수를 먼저 사용한 후 선언하지만 런타임 시 변수의 "접근성"이 현재 범위의 최상위로 승격되고 해당 값이 정의되지 않습니다. , "가용성"이 없습니다.

우리가 작성하는 코드는 대부분 순차적으로 실행되기 때문에 여기서 강조점은 '코드 순서'와 '실행 순서'입니다. 즉, '코드 순서'와 '실행 순서'가 일치합니다. 이는 인간 두뇌의 사고 과정과도 일치합니다. 예를 들어 C 언어 경험이 있는 프로그래머

#include <stdio.h>
int main() {
  int x = 1;
  printf("%d, ", x); // 1
}

두 줄의 코드, 먼저 정수형 x를 선언한 후 출력합니다. 코드 순서와 실행 순서가 일관됩니다. 즉, 정상 작동입니다.

순서가 반대인 경우

#include <stdio.h>
int main() {
  printf("%d, ", x); // error
  int x = 1;
}

이 시점에서는 편집을 통과할 수 없습니다. 하지만 JS에서는 반대로 작성할 수 있습니다. 2와 3을 참조하세요.

따라서 C와 같은 언어를 사용해본 경험이 있는 프로그래머라면 변수를 먼저 선언한 다음 사용해야 하고, 그렇지 않으면 오류가 보고된다는 것을 알고 있습니다. JS에서는 변수 승격 현상이 있는데, 이를 먼저 사용한 후 선언하면 됩니다. C의 경험이 JS에서 사용되면서 혼란이 발생합니다.

4. 함수 표현식에도 변수 승격이 있습니다

function test() {
  alert(func); // undefined
  var func = function() {};
}
test();

하지만 이 기능을 사용하고 싶다면 불가능합니다

function test() {
  alert(func); // undefined
  func(); // 报异常
  var func = function() {};
}
test();

결과 func는 정의되지 않았으며 func를 호출하면 예외가 보고됩니다. 접근성과 가용성은 위의 정의에서 언급되었으며 다음 설명에 해당합니다.

접근성: 경고(func), 출력이 정의되지 않음, 실행 가능, func에 액세스 가능.

가용성: func()가 예외를 보고하고 func를 정상적으로 호출할 수 없어 가용성이 없음을 나타냅니다.

두 번째, 세 번째, 네 번째는 모두 var를 사용하여 선언된 변수입니다. JS의 함수 선언도 개선될 예정이지만 이 "변수"는 함수 유형입니다(함수, 메서드 또는 생성자로 사용할 수 있음). . 해당 이름(식별자)도 현재 범위의 최상위로 끌어올려집니다.

5. 함수 선언의 이름도 현재 범위의 최상위로 승격됩니다

function test() {
  alert(f1); // function
  f1(); // "called"
  function f1() {
    alert('called');
  }
}
test();

f1이 코드 끝에서 선언되고 f1이 먼저 사용되는 것을 볼 수 있습니다. 경보(f1)와 f1()이 모두 정상적으로 실행되어 접근성과 유용성이 모두 있음을 나타냅니다.

앞서 언급했듯이 변수 호이스팅은 아무 소용이 없습니다. "먼저 선언하고 사용하는" 것이 좋은 습관입니다. 이 기능은 대기업 면접 질문에도 많이 등장할 예정입니다

질문 1:

// 写出以下代码的运行结果
var a = 1;
function fn() {
  if (!a) {
    var a = 2;
  }
  alert(a); // ?
}
fn();

질문 2:

// 写出以下代码的运行结果
var a = 1;
function fn() {
  a = 2;
  return;
  function a() {}
}
fn();
alert(a); // ?

그러나 이 모든 것은 ES6에 let/const가 도입되면서 끝났습니다. 전역 변수를 제외하고 ES의 다른 모든 항목은 let/const를 사용합니다. var를 let으로 바꾼 후에는 변수 승격이 더 이상 존재하지 않습니다.

function test() {
  alert(declaredButNotAssigned1); // 报异常
  alert(declaredButNotAssigned2); // 报异常
  alert(func); // 报异常
 
  let declaredButNotAssigned1;
  let declaredButNotAssigned2 = true;
  let func = function() {};
}
test();

이렇게 하면 프로그래머는 좋은 습관을 기르게 됩니다. 변수는 "먼저 선언한 다음 사용해야" 합니다. 그렇지 않으면 오류가 보고됩니다.

다음은 MDN의 let이 발생하지 않는 경우 변수 승격 설명에서 발췌

코드 복사 코드는 다음과 같습니다.

ECMAScript 6에서 let은 변수를 블록의 맨 위로 끌어올리지 않습니다. 해당 변수에 대한 let 선언이 발견되기 전에 블록의 변수를 참조하면 변수가 "일시적 소멸 상태"에 있기 때문에 ReferenceError가 발생합니다. zone"을 블록 시작부터 선언이 처리될 때까지 실행합니다.

let을 사용하여 변수를 선언한 후에는 typeof가 더 이상 안전하지 않습니다

if (condition) {
  alert(typeof num); // Error!
  let num = 100;
}
 

과거에는 typeof == 'undefine'을 사용하여 jQuery와 같은 특정 lib가 도입되었는지 여부를 확인할 수 있었습니다

// 判断jQuery是否引入了
if (typeof $ !== 'undefined') {
  // do something
}...

jQuery가 도입되지 않았고 $가 선언되지 않았습니다. 이 문장은 오류를 보고하지 않으며 다음 코드의 실행에 영향을 미치지만, let으로 선언하면 오류가 보고됩니다.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.