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

不言
풀어 주다: 2018-08-01 16:13:32
원래의
1983명이 탐색했습니다.

이 글에서는 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 객체 지향 프로그래밍 분석에 캡슐화됨

jQuery의 자체 호출 익명 함수는 어떻게 호출되나요?

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿