JavaScript 선언 호이스팅 소개(예제 포함)

이 글은 JavaScript 선언 개선에 대한 소개를 제공합니다(예제 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

Javascript 선언 승격

선언 승격을 분석하기 전에 다음 두 가지 사항을 알아야 한다고 생각합니다.

1. 엔진이 변수를 쿼리하는 두 가지 방법

엔진이 변수를 쿼리하는 방법은 두 가지로 나눌 수 있습니다. : LHS, RHS 각각 할당 연산의 왼쪽과 오른쪽인 "L"과 "R"을 통해 그 의미를 대략적으로 이해할 수 있습니다. (할당 연산의 형태가 다양하기 때문에 단순히 "="의 왼쪽과 오른쪽으로만 이해할 수는 없습니다.)

이 두 가지 쿼리 방법에 대한 제가 이해한 내용을 간략하게 말씀드리겠습니다.
LHS: 대상은 누구입니까? 할당 작업. (쿼리 변수)
RHS: 할당 연산의 출처는 누구입니까? (변수 값 쿼리)

이것은 약간 이해하기 어려울 수 있습니다. 예:

function foo(a){
    //这里存在一个隐式变量分配，LHS查询变量a，并赋值2.
    //隐式a = 2;
    //左边LHS查询变量b，查询作用域中是否存在b这个变量。
    //右边RHS查询变量a的值，将a赋值给b。
    var b = a;
    //返回a,b是RHS查询变量a的值和变量b的值并使用。
    return a + b;
}
//左边LHS查询变量c，查询作用域中是否存在c这个变量。
//右边RHS引用函数foo，将2作为参数传进去。
var c = foo(2);

2. 예외

예외에 대해 강조할 점은 엄격 모드에 있어야 한다는 것입니다. 비엄격 모드에서는 LHS 쿼리가 최상위 전역 범위에서 쿼리된 변수를 찾을 수 없는 경우 해당 이름의 변수를 생성하여 엔진에 반환하기 때문입니다.

ReferenceError: 범위 결정 실패와 관련이 있습니다. (예: 필요한 변수를 범위에서 찾을 수 없습니다.)
TypeError: 범위 결정에 성공했지만 결과에 대한 연산이 불법이거나 불합리합니다. (예: 함수가 아닌 유형 값에 대한 함수 호출을 시도하거나 null 또는 정의되지 않은 유형 값의 속성을 참조하려고 함)

예:

"strict"
function foo() {
    console.log(a) //undefined
    console.log(b) //ReferenceError
}
var a = 2;

Statement Promotion

1. 자바스크립트 코드를 작성할 때, 코드가 위에서 아래로 실행될 것이라고 느낄 때가 많습니다. 하지만 성명서 홍보에 관해서라면 이 생각은 깨질 것입니다.

예:

a = 2;
var a;
console.log(a);

运行结果为: 2

상식에 따라 하향식으로 실행된다면 예상되는 실행 결과는 정의되지 않아야 하는데 왜 2인가요?

성명홍보 결과입니다.

2. 추가 이해

처음에 문 승격을 이해했을 때 다음 코드를 발견했습니다.

console.log(a);
var a = 2;

运行结果为：undefined

문 승격에 대한 사전 이해를 하고 나면 자연스럽게 문이 승격될 것이라고 생각하게 됩니다. 값을 입력해야 합니다. 변수 값에 도달할 수 없습니다.

사실 위 코드의 실행 단계는 다음과 같이 나눌 수 있습니다:

var a; //声明提升
console.log(a); //打印a的值
a = 2; //对a进行赋值

명령문 승격은 문자 그대로의 명령문 승격이고 나머지 작업(예: 할당 및 기타 논리)은 여전히 ​​그대로 유지됩니다. .

해당 작업을 수행하는 함수를 선언하면 함수 선언 승격 결과를 얻게 됩니다.

변수 및 함수 선언은 다른 코드보다 먼저 승격되고 실행됩니다.

3. 점차적으로 이해하기

여러 번의 실험을 통해 선언 승격이 실제로는 다음과 같다는 것을 점차적으로 이해할 수 있습니다.

변수 및 함수의 선언은 다른 코드(현재 범위) 앞에서 승격되고 실행됩니다.

이 지점에 도달하면 어떤 사람들은 함수 표현이라면 승격됩니까?

답은: 아니요. 또한 이름 식별자가 할당되기 전에는 명명된 함수 표현식도 사용할 수 없습니다.

예:

foo(); //TypeError
bar(); //ReferenceError
var foo = function bar(){};

코드는 다음과 같이 분해됩니다.

var foo; //变量声明提升
foo(); //foo对undefined值进行函数调用导致非法操作，故TypeError
bar(); //bar函数并没有声明，故ReferenceError
foo = function bar(){}; //对foo进行赋值

So:

함수 표현식은 이름 식별자가 할당되기 전에는 사용할 수 없습니다.

참고:

1. 각 범위가 승격됩니다.

(따라서 함수 내부에 형성된 범위도 승격 연산을 갖게 되며 승격 연산은 현재 함수의 내부 범위로 제한됩니다.) 2. 함수와 변수가 승격되면 함수가 먼저 승격됩니다.
3. 일반 블록 내부의 함수 선언은 일반적으로 범위의 맨 위로 승격됩니다.
4. 심층적 이해

"당신이 모르는 Javascript"를 읽고 let을 배우는 과정에서 다음과 같은 메모를 발견할 수 있습니다: let을 사용하여 만든 선언은 해당 범위에서 승격되지 않습니다. 선언된 코드가 실행될 때까지 선언은 존재하지 않습니다.

예:

console.log(a);
let a = 2;

运行结果是：ReferenceError: Cannot access 'a' before initialization. //初始化前无法访问"a"

그런 다음 이전에 실행한 코드로 돌아가서 let을 var로 바꿨습니다. 반환된 결과는 정의되지 않았습니다.

이 둘과 독서의 결합으로 기사를 이해하는 데 두 달이 걸렸고 Let이 개선할 수 있는지에 대한 새로운 이해를 갖게 되었습니다.

저자는 js 변수를

생성, 초기화, 할당

의 세 부분으로 나눕니다. 위 작업의 응답이 다른 이유는 let이 생성되지 않았다는 의미가 아니라 실행되지 않는 초기화 프로세스가 있기 때문입니다. 그리고 초기화 전에

변수를 사용하면

임시 데드존이 형성됩니다. var, let 및 함수를 테스트한 후 다음과 같은 결론을 내릴 수 있습니다.

var 생성 및 초기화가 승격되고 할당이 승격되지 않습니다.

let 생성이 승격되고 초기화 및 할당이 승격되지 않습니다.

함수 생성, 초기화, 할당이 개선됩니다.

이 기사는 여기까지입니다. 더 많은 흥미로운 콘텐츠를 보려면 PHP 중국어 웹사이트의 JavaScript Tutorial Video 칼럼을 주목하세요!

위 내용은 JavaScript 선언 호이스팅 소개(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!