Adakah es6 mempunyai penutupan?

es6 mempunyai penutupan. Dalam es6, apabila anda mencipta fungsi lain di dalam fungsi, fungsi terbenam dipanggil penutupan, yang boleh mengakses pembolehubah tempatan fungsi luaran secara ringkas, penutupan merujuk kepada fungsi yang mempunyai hak untuk mengakses pembolehubah dalam skop; daripada fungsi lain. Fungsi utama penutupan adalah untuk memperluaskan skop pembolehubah. Memandangkan penutupan akan menyebabkan pembolehubah dalam fungsi disimpan dalam ingatan, yang menggunakan banyak memori, penutupan tidak boleh disalahgunakan, jika tidak, ia akan menyebabkan masalah prestasi pada halaman web dan boleh menyebabkan kebocoran memori dalam IE.

Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript versi 6, komputer Dell G3.

1. Skop pembolehubah

Pembolehubah dibahagikan kepada dua jenis mengikut skopnya: pembolehubah global dan pembolehubah tempatan.

• Pembolehubah global boleh digunakan di dalam fungsi.

• Pembolehubah setempat tidak boleh digunakan di luar fungsi.

• Apabila fungsi selesai melaksanakan, pembolehubah tempatan dalam skop ini akan dimusnahkan.

2. Apakah penutupan?

Dalam es6, penutupan merujuk kepada fungsi yang mempunyai akses kepada pembolehubah dalam skop fungsi lain. Pemahaman mudah: skop boleh mengakses pembolehubah tempatan di dalam fungsi lain.

Penutupan: Cipta fungsi lain di dalam fungsi Fungsi terbenam dipanggil penutupan Ia boleh mengakses pembolehubah tempatan fungsi luaran

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

Penutupan Fungsi utama: meluaskan skop pembolehubah.

	// 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. Senario penggunaan penutupan

(1) Digunakan untuk mengembalikan nilai

//以闭包的形式将 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) Tugasan fungsi: Tentukan ungkapan fungsi di dalam fungsi

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

(3) Gunakan penutupan sebagai parameter fungsi

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) Gunakan penutupan dalam fungsi pelaksanaan segera

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

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

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

(5) Tugasan gelung

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

(6) Bungkus penutupan ke dalam objek

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) Laksanakan lelaran melalui penutupan

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), perbezaan pertama (dengan parameter yang sama, fungsi tidak akan dilaksanakan berulang kali)

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)

Nota

(1) Ketahui siapa fungsi penutupan ialah

(2) Bezakan antara nilai pulangan penutupan dan nilai pulangan fungsi luaran

4. Ringkasan penutupan

• Apakah penutupan: Penutupan ialah fungsi (satu skop boleh mengakses pembolehubah setempat bagi fungsi lain).

• Apakah fungsi penutupan: memperluaskan skop pembolehubah.

Tiada penutupan dijana kerana tiada pembolehubah tempatan, jadi pembolehubah global 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

Penutupan dijana: kerana ini diberikan kepada yang di dalam fungsi, menunjuk ke objek objek.

	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

Nota menggunakan penutupan

1) Memandangkan penutupan akan menyebabkan pembolehubah dalam fungsi disimpan dalam ingatan, penggunaan memori Ia sangat besar, jadi penutupan tidak boleh disalahgunakan, jika tidak, ia akan menyebabkan masalah prestasi pada halaman web dan boleh menyebabkan kebocoran memori dalam IE. Penyelesaiannya adalah untuk memadam semua pembolehubah tempatan yang tidak digunakan sebelum keluar dari fungsi.

2) Penutupan akan menukar nilai pembolehubah di dalam fungsi induk di luar fungsi induk. Oleh itu, jika anda menggunakan fungsi induk sebagai objek, penutupan sebagai kaedah awamnya dan pembolehubah dalaman sebagai nilai peribadinya, anda mesti berhati-hati untuk tidak mengubah nilai pembolehubah di dalam fungsi induk.

[Pembelajaran yang disyorkan:

tutorial video javascript]

Atas ialah kandungan terperinci Adakah es6 mempunyai penutupan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!