Qu'est-ce qu'une fonction anonyme en JavaScript ? Brève analyse des scénarios d'application

Les fonctions anonymes, comme leur nom l'indique, font référence à des fonctions sans nom. Elles sont très fréquemment utilisées dans le développement réel et font également l'objet d'un bon apprentissage de JS. L'article suivant vous donnera une introduction détaillée aux fonctions anonymes en JavaScript. J'espère qu'il vous sera utile !

Fonction anonyme : une fonction sans nom réel.

Nous déclarons d'abord une fonction normale :

//声明一个普通函数，函数的名字叫fn
function fn(){
    console.log("web-chubby");
}

Ensuite, supprimons le nom de la fonction pour devenir une fonction anonyme :

//匿名函数，咦，运行时，你会发现报错啦！
function (){
    console.log("web-chubby");
}

À ce stade, vous constaterez que l'exécution d'une fonction anonyme seule signalera une erreur car elle le fait ne répond pas aux exigences grammaticales !

Solution : Mettez simplement la fonction anonyme entre parenthèses pour en faire une expression :

//匿名函数在其它应用场景括号可以省略
(function (){
    //由于没有执行该匿名函数，所以不会执行匿名函数体内的语句。
    console.log("web-chubby");
})

Comment exécuter et utiliser des fonctions anonymes ?

1. Exécuter une fonction anonyme

Si vous devez exécuter une fonction anonyme, ajoutez simplement des parenthèses après la fonction anonyme, c'est-à-dire exécutez la fonction immédiatement

• Les parenthèses enveloppent uniquement la fonction anonyme et suivent le Parenthèses d'exécution (couramment utilisées)
  

(function () {
      alert('匿名函数执行方式一')
})();

• Les parenthèses enveloppent les fonctions anonymes et les parenthèses qui exécutent des fonctions anonymes pour former une expression globale

2. Passage de paramètres de fonction anonyme

et autres passages de paramètres ordinaires. pareil, écrivez simplement les paramètres directement entre parenthèses :

 (function (m) {
      alert(m)
    }('这是匿名函数传进来的参数'));

Application de la fonction anonyme

• Méthode de liaison des événements

<input type="button" value="点我啊！" id="sub">
<script>
    //获得按钮元素
    var sub=document.querySelector("#sub");
    //给按钮增加点击事件。
    sub.onclick=function(){
        alert("当点击按钮时会执行到我哦！");
    }
</script>

• L'expression de fonction attribue la fonction anonyme à un attribut de fonction dans un variable

//将匿名函数赋值给变量fn。
var fn=function(){
    return "我是一只小小小小留下，怎么飞也飞不高！"
}
//调用方式与调用普通函数一样
console.log(fn());//我是一只小小小小留下，怎么飞也飞不高！

• object

var obj={
    name:"web-chubby",
    age:18,
    fn:function(){
        return "我叫"+this.name+"今年"+this.age+"岁了！";
    }
};
console.log(obj.fn());//我叫web-chubby今年18岁了！

• fonction de rappel, prenant la fonction anonyme comme l'un des paramètres

 //过滤出值为9的值
    let numArr = [1, 5, 9, 10]
    let newArr = numArr.filter(function (item) {
      if (item !== 9) {
        return item
      }
    });

• La fonction renvoie la valeur, c'est-à-dire que la fonction est utilisée comme un valeur de retour

//将匿名函数作为返回值
function fn(){
    //返回匿名函数
    return function(){
        return "web-chubby";
    }
}
//调用匿名函数
console.log(fn()());//web-chubby
//或
var box=fn();
console.log(box());//web-chubby

Imite la portée au niveau du bloc

la portée au niveau du bloc, qui est appelée portée privée à certains endroits. Il n'y a pas de portée au niveau du bloc en JavaScript. Par exemple :

if(1==1){//条件成立，执行if代码块语句。
    var a=12;//a为全局变量
}
console.log(a);//12
for(var i=0;i<3;i++){
    console.log(i);
}
console.log(i);//4

if(){}for(){}, etc. n'ont pas leur propre portée. Si elle sort de sa propre portée, la variable déclarée sera immédiatement détruite. Mais nous pouvons simuler la portée au niveau du bloc grâce à des fonctions anonymes :

(function(){
    //这里是我们的块级作用域（私有作用域）
})();

Essayez la portée au niveau du bloc :

function fn(){
    (function(){
        var la="啦啦啦！";
    })();
    console.log(la);//报错---la is not defined
}
fn();

Le rôle des fonctions anonymes :

1 Les fermetures peuvent être implémentées via des fonctions anonymes plus tard. concentrez-vous sur l’explication. Une introduction rapide ici : une fermeture est une fonction qui peut accéder aux variables définies dans la portée de la fonction. Pour créer une fermeture, vous devez souvent utiliser une fonction anonyme.

2. Simulez la portée au niveau du bloc et réduisez les variables globales. Après avoir exécuté la fonction anonyme, les variables correspondantes stockées en mémoire seront détruites, économisant ainsi de la mémoire. De plus, dans les projets de développement à grande échelle impliquant plusieurs personnes, l'utilisation d'une portée au niveau des blocs réduira considérablement le problème des conflits de noms, évitant ainsi des conséquences catastrophiques. Les développeurs n’ont plus à craindre de gâcher la portée mondiale.

【Recommandations associées : Tutoriel d'apprentissage 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!