Es6 a-t-il des fermetures ?

es6 a des fermetures. Dans es6, lorsque vous créez une autre fonction à l'intérieur d'une fonction, la fonction intégrée est appelée une fermeture, qui peut accéder aux variables locales de la fonction externe ; en termes simples, une fermeture fait référence à une fonction qui a le droit d'accéder aux variables dans la portée ; d'une autre fonction. La fonction principale des fermetures est d'étendre la portée des variables. Étant donné que les fermetures entraîneront le stockage des variables de la fonction en mémoire, ce qui consomme beaucoup de mémoire, les fermetures ne peuvent pas être utilisées de manière abusive, sinon cela entraînerait des problèmes de performances sur la page Web et pourrait entraîner des fuites de mémoire dans IE.

L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 6, ordinateur Dell G3.

1. Portée des variables

Les variables sont divisées en deux types selon leur portée : les variables globales et les variables locales.

• Les variables globales peuvent être utilisées dans les fonctions.

• Les variables locales ne peuvent pas être utilisées en dehors de la fonction.

• Une fois l'exécution de la fonction terminée, les variables locales de cette portée seront détruites.

2. Qu'est-ce que la fermeture ?

Dans es6, la fermeture fait référence à une fonction qui a accès à des variables dans le cadre d'une autre fonction. Compréhension simple : une portée peut accéder à des variables locales dans une autre fonction.

Closure : Créez une autre fonction à l'intérieur d'une fonction. La fonction intégrée est appelée une fermeture. Elle peut accéder aux variables locales de la fonction externe

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

La fonction principale de la fermeture : Étendre la portée de la variable.

	// 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. Scénarios d'utilisation des fermetures

(1) Utilisé pour renvoyer des valeurs

//以闭包的形式将 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) Affectation de fonction : définir des expressions de fonction à l'intérieur de la fonction

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

(3) Fermetures comme paramètres de fonctions

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) Utiliser des fermetures dans les fonctions d'exécution immédiate

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

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

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

(5) Assignation de boucle

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

(6) Encapsuler des fermetures dans des objets

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) Implémenter l'itération par fermeture

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), première distinction (les mêmes paramètres, la fonction ne sera pas exécutée à plusieurs reprises)

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) Découvrez qui est la fonction de fermeture

(2) Distinguer clairement la valeur de retour de la fermeture et la valeur de retour de la fonction externe

4. Résumé de la fermeture

• Qu'est-ce que la fermeture : La fermeture est une fonction (une portée peut accéder à une autre variable locale d'une fonction) .

• Quelle est la fonction de la fermeture : Étendre la portée de la variable.

Aucune fermeture n'est générée car il n'y a pas de variables locales, donc on accède aux variables globales 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

Une fermeture est générée : car celle-ci est assignée à celle à l'intérieur de la fonction, pointant vers l'objet objet.

	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

Remarques sur l'utilisation des fermetures

1) Étant donné que les fermetures entraîneront le stockage des variables de la fonction en mémoire, ce qui consomme beaucoup de mémoire, les fermetures ne peuvent pas être abusées, sinon cela entraînera des problèmes de performances sur le Web page , ce qui peut provoquer des fuites de mémoire dans IE. La solution consiste à supprimer toutes les variables locales inutilisées avant de quitter la fonction.

2) La fermeture modifiera la valeur de la variable à l'intérieur de la fonction parent en dehors de la fonction parent. Par conséquent, si vous utilisez la fonction parent comme objet, la fermeture comme méthode publique et les variables internes comme valeur privée, vous devez faire attention à ne pas modifier librement la valeur de la variable à l'intérieur de la fonction parent.

【Apprentissage recommandé : Tutoriel vidéo javascript】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!