JavaScript 범위 및 클로저 소개

무료 학습 추천: javascript 동영상 튜토리얼

JavaScript 범위 및 클로저

자바스크립트에서는 범위와 클로저에 대해 명확하지 않으면 코드 작성이 어렵습니다. 오늘은 범위와 종결에 대해 요약하겠습니다.

Scope

Scope는 크게 전역 범위와 로컬 범위로 나뉘며, 로컬 범위는 함수 범위와 블록 수준 범위로 구분됩니다.

전역 범위

중괄호({}) 또는 함수 외부에 변수를 정의하면 해당 변수는 전역 변수이고 해당 범위는 전역 범위입니다.

let a = 1function fun1 () {
	console.log(a) // 结果：1
	function fun2 () {
		console.log(a) // 结果：1
	}
	fun2()}fun1()console.log(a) // 结果：1

변수 a는 가장 바깥쪽 레이어에 정의되어 있으며 전 세계 어디에서나 사용할 수 있습니다.
동일한 레벨 범위에서 let 또는 const를 사용하여 동일한 이름의 변수를 선언하면 두 번째 변수에 대해 오류가 보고되고, var를 사용하여 변수를 선언하면 이전 변수가

로컬 범위

함수나 중괄호({}) 내에서 변수를 정의하면 이는 로컬 범위 변수이며 이 범위 수준의 모든 하위 수준 범위에서 사용할 수 있습니다.

function fun1() {
    let a = 100
    console.log(a) // 结果: 100
    function fun2 () {
		console.log(a) // 结果：100
	}
	fun2()}fun1()console.log(a) // 结果: a is not defined

a는 내부 함수를 포함하여 fun1 함수 내에서만 사용할 수 있습니다. fun1의 범위를 벗어나면 변수를 사용할 수 없습니다.

자유변수 검색

현재 범위에 정의되지 않았지만 사용되는 변수는 자유변수입니다. 실행 규칙은 무엇입니까?
자유 변수에 대한 검색은 발견될 때까지 계층별로 상위 범위에 달려 있습니다. 전역 범위가 발견되지 않으면 오류 xx가 정의되지 않음이 보고됩니다.

let a = 100function fun1 () {
    let a1 = 2

    function fun2 () {
        let a2 = 3
        let a = 0

        function fun3 () {
            let a3 = 4
            a++
            console.log(a + a1 + a2 + a3) // 结果: 10
        }

        fun3()
    }

    fun2()}fun1()console.log(a) // 结果: 100

위 코드에서 볼 수 있듯이 fun3 함수에는 a, a1, a2가 정의되어 있지 않지만 실행되면 해당 값을 찾기 위해 상위 범위에서 검색합니다. a를 전역 범위와 fun2의 함수 모두에 정의했다는 점은 주목할 만하지만 fun3에서 사용된 fun2에 정의된 값은 외부에서 사용되는 전역 범위의 값, 즉 상사가 검색할 때 , 발견되는 즉시 검색을 중단하고 가장 가까운 것을 사용합니다. 스코프는 서로 간섭하지 않습니다. (그 안에 존재하는 변수 승격 및 함수 승격에 대한 특별 요약은 내 다른 블로그에서 확인할 수 있습니다.)

클로저

클로저는 범위 적용의 특별한 경우이며 주로 두 가지 표현이 있습니다. (1) 함수 매개변수로 전달됩니다. (2) 함수가 반환값으로 반환됩니다.

/**
 * 函数作为返回值
 */function create () {
    const a1 = 100
    return function () {
        console.log(a1)
    }}const fn = create()const a1 = 200fn() // 结果: 100/**
 * 函数作为参数
 */function print (fn) {
    const a2 = 300
    fn()}const a2 = 400function fn1 () {
    console.log(a2)}print(fn1) // 结果: 400

위 코드는 함수의 두 가지 성능을 보여줍니다. 클로저에서 자유 변수 검색은 함수가 정의된 위치에서 이루어지며 검색은 상위 범위에서 이루어집니다. 처형 장소!

클로저의 실제 적용 시나리오

(1) 간단한 캐시 도구 만들기 등 데이터 숨기기
(2) 흔들림 방지 및 조절 기능

관련 무료 학습 추천: javascript (동영상)

위 내용은 JavaScript 범위 및 클로저 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!