es6에는 클로저가 있나요?

es6에는 폐쇄가 있습니다. es6에서는 함수 내부에 또 다른 함수를 생성할 때 내장된 함수를 클로저라고 부르며, 간단히 말해서 외부 함수의 지역 변수에 액세스할 수 있습니다. 클로저는 범위 내 변수에 액세스할 수 있는 권한이 있는 함수를 나타냅니다. 다른 기능의. 클로저의 주요 기능은 변수의 범위를 확장하는 것입니다. 클로저를 사용하면 함수의 변수가 메모리에 저장되어 많은 메모리를 소비하므로 클로저를 남용할 수 없습니다. 그렇지 않으면 웹 페이지에서 성능 문제가 발생하고 IE에서 메모리 누수가 발생할 수 있습니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.

1. 변수 범위

변수는 범위에 따라 전역 변수와 지역 변수 두 가지 유형으로 나뉩니다.

• 전역 변수는 함수 내에서 사용할 수 있습니다.

• 로컬 변수는 함수 외부에서 사용할 수 없습니다.

• 함수 실행이 완료되면 이 범위의 지역 변수가 삭제됩니다.

2. 클로저란 무엇인가요?

es6에서 클로저(closure)는 다른 함수의 범위에 있는 변수에 접근할 수 있는 함수를 의미합니다. 간단한 이해: 범위는 다른 함수 내의 지역 변수에 액세스할 수 있습니다.

클로저: 함수 내부에 또 다른 함수를 만듭니다. 내장된 함수를 클로저라고 합니다. 이는 외부 함수의 로컬 변수에 액세스할 수 있습니다.

	// fun 这个函数作用域 访问了另外一个函数 fn 里面的局部变量 num
    function fn(){
        let num = 10
        function fun(){
            console.log(num)
        }
        fun()
    }
    fn() //10

클로저의 주요 함수: 변수의 범위를 확장합니다.

	// fn 外面的作用域可以访问fn 内部的局部变量
    function fn(){
        let num = 10
        // 方法一: 先定义再返回函数
        function fun(){
            console.log(num)
        }
        return fun //返回 fun函数
    }
    let f = fn()
    f() //10

	// fn 外面的作用域可以访问fn 内部的局部变量
    function fn(){
        let num = 10
        // 方法二: 直接返回函数
        return function(){
            console.log(num)
        }
    }
    let f = fn()
    f() //10

3. 클로저의 사용 시나리오

(1) 값을 반환하는 데 사용 ​​

//以闭包的形式将 name 返回
function fun(){
    let name = 'woniu'

    //定义闭包
    return function f1(){
        return name
    }
}

let ft = fun() //因为fun函数的返回值是f1函数，ft实质是一个函数

let na = ft()  //调用ft函数，实际调用的就是f1函数
console.log(na); //woniu

(2) 함수 할당: 함수 내부에 함수 표현식 정의

var f2
function fn(){
    let name = '曹操'
    f2 = function(){ //闭包，将外部函数的name变量作为闭包的返回值
        return name
    }
}
fn() //必须先调用fn函数，否则f2不是一个函数
console.log(f2());  //曹操

(3) 클로저 함수의 매개변수로

function fn(){
    let name = '蜗牛学苑'

    //定义闭包
    return function callback(){
        return name
    }
}

let f1 = fn() //将fn函数的返回值callback赋给f1
function f2(temp){
    console.log(temp()) //输出temp函数的返回值,实际调用了闭包callback
}
//调用f2函数：将f1作为实参传递给temp
f2(f1)

(4) 즉시 실행 함수에 클로저 사용

//立即执行函数
(function(){
    let name = '蜗牛学苑'
    let f1 = function(){
        return name
    }

    fn2(f1) //调用fn2函数，将闭包f1作为实参传递给fn2函数
})()

function fn2(temp){  //temp是一个形参，接收f1
    console.log(temp()); //对temp的调用，实际调用的是闭包f1
}

(5) 루프 할당

(function(){
    for (let i = 1; i <= 10; i++) {
        (
            function(j){
                setTimeout(function(){
                    console.log(j);
                },j*1000)
            }
        )(i)
    }
})()

(6) 클로저를 객체로 캡슐화

function fun(){
    let name = '蜗牛学苑'
    setName = function(na){ //setName是闭包，用来设置外部函数的变量值
        name = na
    }
    getName = function(){ //getName是闭包，用来返回外部函数的变量值
        return name 
    }

    //外部fun函数的返回值，将闭包封装到对象中返回
    return {
        setUserName:setName,
        getUserName:getName
    }
}
let obj =fun() //将fun函数返回值（对象）赋给obj
console.log('用户名：',obj.getUserName()) //蜗牛学苑
obj.setUserName('石油学苑')
console.log('用户名：',obj.getUserName()) //石油学苑

(7) 반복 구현 클로저를 통해

let arr = ['aa','bb','cc']
function fn(temp){ //外部函数的返回值是闭包
    let i = 0
    //定义闭包：迭代获取数组元素并返回
    return function(){
        return temp[i++] || '数组已经遍历结束'
    }
}

let f1 = fn(arr)
console.log(f1()) //aa
console.log(f1()) //bb
console.log(f1()) //cc
console.log(f1()) //数组已经遍历结束

(8), 첫 번째 구별(동일한 매개변수이면 함수가 반복적으로 실행되지 않음)

var fn = (function(){
    var arr = [] //用来缓存的数组
    return function(val){
        if(arr.indexOf(val) == -1){ //缓存中没有则表示需要执行
            arr.push(val) //将参数push到缓存数组中
            console.log('函数被执行了',arr);  //这里写想要执行的函数
        } else {
            console.log('此次函数不需要执行');
        }
        console.log('函数调用完打印一下，方便查看缓存的数组：',arr);
    }
})()

fn(10)
fn(10)
fn(1000)
fn(20)
fn(1000)

Attention

(1) 클로저 함수가 누구인지 알아보세요

(2) 클로저의 반환 값과 외부 함수의 반환 값을 명확하게 구분하세요

4. 클로저 요약

• 클로저란 무엇입니까? 클로저는 함수입니다(하나의 스코프는 다른 스코프에서 함수의 지역 변수에 접근할 수 있습니다). .

• 클로저의 기능은 무엇인가요? 변수의 범위를 확장합니다.

로컬 변수가 없기 때문에 클로저가 생성되지 않으므로 전역 변수에 액세스합니다. The Window

let name = 'The Window'
    let object = {
        name: 'My Object',
        getNameFunc(){
            return function(){
                return this.name
            }
        }
    }
    let f = object.getNameFunc()
    console.log(f()) //The Window

클로저가 생성됩니다. 이는 객체 객체를 가리키는 함수 내부에 할당되기 때문입니다.

	let name = 'The Window'
    let object = {
        name: 'My Object',
        getNameFunc(){
            let that = this
            return function(){
               return that.name
            }
        }
    }
    let f = object.getNameFunc()
    console.log(f()) //My Object

클로저 사용 시 주의사항

1) 클로저를 사용하면 함수의 변수가 메모리에 저장되어 많은 메모리를 소모하므로 클로저를 남용할 수 없습니다. 그렇지 않으면 웹에서 성능 문제가 발생합니다. page. IE에서 메모리 누수가 발생할 수 있습니다. 해결책은 함수를 종료하기 전에 사용되지 않는 모든 지역 변수를 삭제하는 것입니다.

2) 클로저는 상위 함수 외부의 상위 함수 내부 변수 값을 변경합니다. 따라서 부모 함수를 객체로, 클로저를 퍼블릭 메소드로, 내부 변수를 프라이빗 값으로 사용하는 경우 부모 함수 내부의 변수 값을 임의로 변경하지 않도록 주의해야 합니다.

【추천 학습: javascript 비디오 튜토리얼】

위 내용은 es6에는 클로저가 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!