자바스크립트 변수 호이스팅에 대한 자세한 소개(코드 예시)

이 글은 JavaScript 변수 승격에 대한 자세한 소개(코드 예제)를 제공합니다. 참고할 만한 가치가 있는 친구들이 참고할 수 있기를 바랍니다.

Introduction

"변수 호이스팅(Variable hoisting)"이란 변수와 함수의 선언을 물리적으로 코드 앞으로 옮기는 것을 의미하지만 이는 정확하지 않습니다.
실제로 코드에서 변수 및 함수 선언 위치는 변경되지 않지만 컴파일 단계에서 메모리에 배치됩니다.

변수 선언 방법

var, let, const
위 키워드 없이 직접 할당된 변수는 Windows 환경에서 마운트됩니다.

let a=9
const a=1
var a=6
c=5

함수 선언 방법

JavaScript에서 함수를 선언하는 방법은 두 가지가 있습니다. function 선언 및 함수 표현식.

//函数声明
function say(){
    console.log('hello') 
}

//函数表达式
var say=function (){
    console.log('hello') 
}

Boost

JavaScript의 이점 코드가 실행되기 전에 함수 선언을 메모리에 배치하면 함수를 선언하기 전에 사용할 수 있다는 이점이 있습니다.

/*** 正确的方式：先声明函数，再调用函数 (最佳实践)*/
function catName(name) {
    console.log("我的猫名叫 " + name);
}
catName("Tigger");
/*以上代码的执行结果是: "我的猫名叫 Tigger"*/


/*** 不推荐的方式：先调用函数，再声明函数 */
catName("Chloe");
function catName(name) {
    console.log("我的猫名叫 " + name);
}
/*代码执行的结果是: "我的猫名叫 Chloe"*/

승격 규칙

var 선언된 변수는 승격 중에만 선언되고 값이 할당되지 않으며 기본값은 정의되지 않습니다. 키워드 없이 직접 할당된 변수는 승격되지 않습니다. (demo1)

함수 승격은 함수 본문과 함께 승격됩니다. 실행되지 않습니다 ;(deom2)

사전 구문 분석 순서는 위에서 아래로입니다.(demo4)

함수는 변수보다 우선순위가 높으며 함수 선언은 현재 범위의 맨 위로 올라갑니다.(deom3 )

동일한 이름을 가진 변수는 승격되면 반복적으로 정의되지 않습니다. 실행 단계에서 나중에 할당된 값은 이전 할당을 덮어씁니다. (demo4)

함수는 동일한 이름을 가지며 이후의 함수는 이전 것들은 승격될 때; (demo5)

함수와 변수는 동일한 이름을 가지며, 함수가 승격되면 변수는 나중에 실행 단계에서 할당된 값을 덮어쓰지 않습니다. (demo8)

함수 표현식으로 함수를 선언하는 것은 변수 선언 규칙에 따라 승격됩니다. (deom6)

함수가 실행되면 함수 내의 변수 선언과 함수 선언도 승격됩니다. 위의 규칙을 준수합니다. (deom7)

let 및 const에는 승격이 없습니다. (demo9, 데모10)

/**demo1**/
console.log('a=',a) //a=undefined
console.log('b=',b) // Uncaught ReferenceError: b is not defined
var a=1
b=6


/**deom2**/
console.log('a=',a)  // a=function  a() {console.log("func a()")}
function  a() {
console.log("func a()")
}

/**deom3**/
console.log('a=',a) // a=function  a() {console.log("fun a")}
var a=3
var a=4

function a(){
console.log("fun a")
}
var a=5
var a=6
console.log("a=",a) // a=6



/**deom4**/
console.log('a=',a)  // a=undefined
var a =2
console.log('a=',a) //
var a =3
var a =4
console.log('a=',a) // a=4
console.log('b=',b) //b= undefined
var b='b1'


/**deom5**/
console.log('a=',a) // a=function  a() {console.log("a2")}
function a(){
console.log("a1")
}
function a(){
console.log("a2")
}
console.log('a=',a) // a=function  a() {console.log("a2")}


/**deom6**/
console.log('a=',a) // a=undefined
var a=function(){console.log('a1')}
var a=3
var a=4
var a=5
console.log(a)
var a=function(){console.log('a2')}
console.log('a=',a) // a= ƒ (){console.log('a2')}


/**deom7**/
console.log('b=',b)
var a=3
function b(i){
    console.log('a=',a)
    var a=4
    function a(){
        console.log('fun a')
    }
    console.log('a=',a)
}
b()


/**demo8**/
console.log('a=',a) //a= function a(){ console.log('fun a')}
var a=2
function a(){
    console.log('fun a')
}
console.log('a=',a) // a=2
var a=3
var a=4
var a=5
console.log('a=',a) // a=5


/**demo9**/
console.log('a=',a) //Uncaught ReferenceError: a is not defined
let a=4


/****/
<!--demo10-->
console.log('b=',b) // Uncaught ReferenceError: b is not defined
const b=5

위 내용은 자바스크립트 변수 호이스팅에 대한 자세한 소개(코드 예시)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!