ホームページ > 記事 > ウェブフロントエンド > JS 匿名関数の概念と使い方を共有する

JS 匿名関数の概念と使い方を共有する

小云云オリジナル: 2018-03-19 09:16:481376ブラウズ

この記事では、主に JS 匿名関数と匿名自己実行関数の概念と使用法を紹介し、匿名関数と匿名自己実行関数の概念、関数、アプリケーションシナリオ、および関連する使用スキルを例の形で分析したいと思います。それはすべての人を助けることができます。

1. 匿名関数の一般的なシナリオ

js の匿名関数は非常に一般的な関数タイプであり、より一般的なシナリオは次のとおりです:

<input type="button" value="点击" id="btn">
<script type="text/javascript">
  //匿名函数的第一种情形
  var btn=document.querySelector("#btn");
  btn.onclick=function(){
    // alert("aaaaa");
  }
  //匿名函数的第二种情形
  setInterval(function(){
    // alert("bbbbb");
  }, 1000);
  //匿名函数的第三种情形
  var fun=function(){
    alert("ccccc");
  }
  // fun();
  //匿名函数的第四种情形
  var obj={
    name:"dddd",
    say:function(){
      alert(this.name);
    }
  }
  obj.say();
</script>

上記は、匿名関数の一般的な使用シナリオを示しています。 (注: querySelector は H5 で DOM 要素を検索する新しい方法です)

2. 匿名の自己実行関数

名前が示すように、匿名の自己実行関数は最初は匿名関数ですが、この関数は自動的に他の要素の助けを借りずに実行されます。

<input type="button" value="点击" id="btn">
<script type="text/javascript">
//1，匿名函数的第一种实现方式
(function(data){
  // alert(data);
})("eee");
//2.匿名自执行函数的第二种实现方式
(function(){
  // alert("fff");
}());
//3.匿名自执行函数的第三种实现方式
!function(data){
  // alert(data);
}("hhh");
//4.匿名自执行函数的第四种实现方式
var fun=function(data){
  alert(data);
}("iii");

上記のコードブロックから、匿名の自己実行関数を実装するには通常 4 つの方法があることが要約できます。

3. 匿名自己実行関数の役割

①. 匿名自己実行関数の最も一般的な役割は、クロージャを実装することです。クロージャの概念については、後の記事で詳しく紹介します。ここでクロージャについて簡単に説明します。クロージャ: クロージャは js の機能であり、クロージャによって関数内と関数外の接続を実現し、関数のローカル変数を常にメモリ上に存在させることができます。

②. 匿名の自己実行関数を使用して、js でブロックレベルのスコープの作成をシミュレートすることもできます。つまり、匿名の自己実行関数を使用してコードをラップすると、ブロックの効果を実現できます。 -level スコープを使用してグローバル変数の数を減らすと、匿名の自己実行関数の実行が完了した後に変数がメモリから解放され、メモリが節約されます。

4. 匿名関数と匿名自己実行関数の概要

匿名関数は、単純に名前のない関数として理解できます。一般的なシナリオは合計 4 つあります。

匿名自己実行関数は、単に自分自身で実行できる匿名関数として理解できます。匿名自己実行関数を実装するには 4 つの方法があります。

匿名の自己実行関数の役割は、クロージャを使用し、独立した名前空間を作成することです。

JS 匿名関数の概念と使い方を共有する

関連記事