Présentation des portées et des fermetures JavaScript

Recommandations d'apprentissage gratuites : tutoriel vidéo javascript

Portée et fermeture JavaScript

En JavaScript, si vous n'êtes pas clair sur la portée et la fermeture, il y aura de nombreux problèmes lors de l'écriture du code. Aujourd'hui, je vais faire un résumé de la portée et de la fermeture.

Portée

La portée est principalement divisée en portée globale et portée locale, où la portée locale est divisée en portée de fonction et en portée au niveau du bloc.

Portée globale

Si vous définissez une variable en dehors des accolades ({}) ou une fonction, alors c'est une variable globale et sa fonction Domaine est la portée globale .

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

La variable a est définie dans la couche la plus externe et peut être utilisée n'importe où dans le monde.
Il est à noter que dans le même niveau de portée, lors de l'utilisation de let ou const pour déclarer une variable du même nom, une erreur sera signalée pour la seconde, et lors de l'utilisation de var pour déclarer une variable, la variable précédente sera écrasé ;

Portée locale

Si vous définissez une variable dans une fonction ou des accolades ({}), c'est une variable de portée locale, et elle peut être utilisé dans n'importe quelle portée de niveau inférieur à ce niveau de portée utilisé.

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 ne peut être utilisé qu'à l'intérieur de la fonction fun1, y compris les fonctions internes. Une fois qu'elle sort de la portée de fun1, la variable ne peut plus être utilisée.

Recherche de variables libres

Une variable qui n'est pas définie dans le scope actuel mais qui est utilisée est une variable libre. Quelles sont ses règles d’exécution ?
Les variables libres sont recherchées jusqu'au périmètre supérieur, couche par couche, jusqu'à ce qu'elles soient trouvées. Si aucune portée globale n'est trouvée, l'erreur xx n'est pas définie sera signalée.

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

Comme le montre le code ci-dessus, dans la fonction fun3, a, a1 et a2 ne sont pas définis, mais ils sont utilisés. Une fois exécutés, il recherchera dans la portée de niveau supérieur pour trouver leur valeur. . Il convient de noter que nous avons défini a à la fois dans la portée globale et dans la fonction de fun2, mais la valeur définie dans fun2 utilisée dans fun3 est la valeur de la portée globale utilisée à l'extérieur, c'est-à-dire qu'elle va lorsque le supérieur recherche , il arrêtera la recherche dès qu'il sera trouvé et utilisera celui le plus proche. Les oscilloscopes n'interféreront pas les uns avec les autres. (Pour la promotion variable et la promotion de fonction qui y existent, vous pouvez consulter mon autre blog pour un résumé spécial)

Fermeture

La clôture est appliquée par portée En spécial Dans certains cas, il existe deux manifestations principales : (1) La fonction est passée en paramètre. (2) La fonction est renvoyée comme valeur de retour.

/**
 * 函数作为返回值
 */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

Le code ci-dessus démontre deux performances de la fonction. Il est à noter que : dans la fermeture, la recherche de variables libres se fait à l'endroit où la fonction est définie, et la recherche se fait dans le domaine supérieur. , pas sur le lieu d'exécution !

Scénarios d'application pratiques des fermetures

(1) Masquage des données, comme la création d'un simple outil de cache
(2) Fonction anti-tremblement et limitation

Recommandations d'apprentissage gratuites associées : javascript(vidéo)

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!