ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScriptの匿名関数とは何ですか?アプリケーションシナリオの簡単な分析

JavaScriptの匿名関数とは何ですか?アプリケーションシナリオの簡単な分析

青灯夜游
リリース: 2022-08-04 13:10:36
転載
2393 人が閲覧しました

匿名関数とはその名の通り、名前のない関数のことで、実際の開発でよく使われる関数であり、JSをしっかり学ぶ上でも注目の関数です。 JavaScript の匿名関数については、次の記事で詳しく紹介していますので、お役に立てれば幸いです。

JavaScriptの匿名関数とは何ですか?アプリケーションシナリオの簡単な分析

匿名関数: 実際の名前のない関数。

最初に通常の関数を宣言します:

//声明一个普通函数,函数的名字叫fn
function fn(){
    console.log("web-chubby");
}
ログイン後にコピー

次に、関数の名前を削除して匿名関数になります:

//匿名函数,咦,运行时,你会发现报错啦!
function (){
    console.log("web-chubby");
}
ログイン後にコピー

この時点で、匿名関数を単独で実行すると、構文要件を満たしていないため、エラーが報告されます。

JavaScriptの匿名関数とは何ですか?アプリケーションシナリオの簡単な分析

解決策: 匿名関数を括弧で囲んで式にします:

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

匿名関数の実行方法と使用方法機能?

1. 匿名関数の実行

匿名関数を実行する必要がある場合は、匿名関数の後に括弧を追加するだけです。つまり、関数をすぐに実行します

  • 括弧は匿名関数のみをラップし、その後に実行括弧が続きます (一般的に使用されます)


  • (function () {
          alert('匿名函数执行方式一')
    })();
    ログイン後にコピー
  • 括弧匿名になります 匿名関数を実行する関数と括弧は一緒にラップされて式を形成します

2. 匿名関数パラメータの受け渡し

は他の通常のパラメータと同じですパラメータを括弧内に直接記述するだけです:

 (function (m) {
      alert(m)
    }('这是匿名函数传进来的参数'));
ログイン後にコピー

匿名関数の適用

  • イベントをバインドするときメソッド

  • <input type="button" value="点我啊!" id="sub">
    <script>
        //获得按钮元素
        var sub=document.querySelector("#sub");
        //给按钮增加点击事件。
        sub.onclick=function(){
            alert("当点击按钮时会执行到我哦!");
        }
    </script>
    ログイン後にコピー
    #関数式は、匿名関数を変数に代入します
  • ##

    //将匿名函数赋值给变量fn。
    var fn=function(){
        return "我是一只小小小小留下,怎么飞也飞不高!"
    }
    //调用方式与调用普通函数一样
    console.log(fn());//我是一只小小小小留下,怎么飞也飞不高!
    ログイン後にコピー

  • #オブジェクト 関数の属性inside
  • var obj={
        name:"web-chubby",
        age:18,
        fn:function(){
            return "我叫"+this.name+"今年"+this.age+"岁了!";
        }
    };
    console.log(obj.fn());//我叫web-chubby今年18岁了!
    ログイン後にコピー

  • はコールバック関数であり、匿名関数をパラメータの 1 つとして受け取ります
  •  //过滤出值为9的值
        let numArr = [1, 5, 9, 10]
        let newArr = numArr.filter(function (item) {
          if (item !== 9) {
            return item
          }
        });
    ログイン後にコピー

  • 関数の戻り値、つまり関数が戻り値として使用されます
  • //将匿名函数作为返回值
    function fn(){
        //返回匿名函数
        return function(){
            return "web-chubby";
        }
    }
    //调用匿名函数
    console.log(fn()());//web-chubby
    //或
    var box=fn();
    console.log(box());//web-chubby
    ログイン後にコピー

  • ブロックレベルのスコープを模倣します

ブロック レベル スコープ。プライベート スコープとも呼ばれます。 JavaScript にはブロックレベルのスコープがありません。たとえば、

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(){} などには独自のスコープがありません。独自のスコープ外に出ると、宣言された変数は直ちに破棄されます。ただし、匿名関数を使用してブロック レベルのスコープをシミュレートできます:

(function(){
    //这里是我们的块级作用域(私有作用域)
})();
ログイン後にコピー

ブロック レベルのスコープを試してください:

function fn(){
    (function(){
        var la="啦啦啦!";
    })();
    console.log(la);//报错---la is not defined
}
fn();
ログイン後にコピー

匿名関数の役割:

1. クロージャは匿名関数で実現可能 クロージャについては以下の記事で解説します。ここで簡単に説明します。クロージャは、関数スコープ内で定義された変数にアクセスできる関数です。クロージャを作成するには、多くの場合、匿名関数を使用する必要があります。 2. ブロックレベルのスコープをシミュレートし、グローバル変数を削減します。無名関数の実行後、メモリに保存されている対応する変数が破棄されるため、メモリが節約されます。さらに、大規模な複数人による開発プロジェクトでは、ブロックレベルのスコープを使用すると、名前の競合の問題が大幅に軽減され、致命的な結果が回避されます。開発者は、グローバル スコープが台無しになることを心配する必要がなくなりました。

[関連する推奨事項:

JavaScript 学習チュートリアル

]

以上がJavaScriptの匿名関数とは何ですか?アプリケーションシナリオの簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:csdn.net
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート