JavaScript의 함수 범위와 블록 수준 범위에 대한 간략한 설명

이 글에서는 JavaScript의 함수 범위와 블록 수준 범위에 대해 간략하게 설명합니다. 참고할 만한 내용이 있으니 참고하시면 도움이 될 것입니다.

1. 함수 수준 범위

먼저 코드를 살펴보겠습니다.

var a = true;

function hoisting(){
    if(!a){
        var a = 2;
    }
    console.log(a)
}

hoisting();
// 最终结果：2

이 코드의 논리는

1. 이 먼저 현재 函数域에서 변수를 찾는다는 것입니다.

2. 변수 헤더가 있으면 먼저 변수 헤더를 선언하고, 존재하지 않으면 찾을 때까지 상위

3. 에서 다시 검색하세요.

그런 다음

var a; // 变量声明 
a = true; // 变量定义

function hoisting(){
    var a; // 变量声明
    if(!a){
        a = 2; //变量定义
    }
    console.log(a) // 先从自身函数域开始查找，找不到再去父作用域
}

hoisting();

Javascript 변수가 함수 범위로 존재하며 로컬에서 찾을 수 없는 경우 상위 수준으로 이동하여 찾습니다.

2. 솔루션: 클로저 IIFE

는 이 기사와 별로 관련이 없을 수도 있습니다~~, 가장 중요한 것은 클로저가 새로운 기능 도메인을 구성한다는 것입니다.

즉시 호출되는 함수 표현

그의 역할은 변수가 호출되기 전에 변수에 값을 할당하는 것입니다

var a = (function(){
    var a = 3
    return a
}())

3. 해결 방법: let, const

let과 const의 주요 기능은 javascript에 원래 함수를 가르치는 것입니다. -레벨 범위가 블록 레벨 범위로 조정되었습니다

let a = 2;

function block(){
    if(!a){
        let a =1
    }
    console.log(a)
}

block() // 2

이때, 함수의 범위는 블록 레벨을 기준으로 더 작은 단위로 나누어집니다.

코드를 세 개의 블록으로 나눌 수 있습니다

• if block

• block block

• window block

자, 이제 함수를 다시 작성하면 어떻게 될까요

let a = 0;

function block(){
    if(!a){
        let a =1
    }
    console.log(a)
}

block() // 0

최종 결과는 0입니다. , 현재 블록에서 a를 찾을 수 없으면 상위 블록으로 이동하여 검색하며 최종 값은 0

그리고 if 블록의 변수는 블록 내에서만 유효합니다

추천 관련 기사:

JS 객체 지향 프로그래밍 분석에 캡슐화됨

위 내용은 JavaScript의 함수 범위와 블록 수준 범위에 대한 간략한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!