JavaScriptのカスタム関数とは何ですか?-フロントエンドQ&A-php.cn

JavaScriptのカスタム関数とは何ですか?

青灯夜游

リリース： 2022-03-28 20:07:03

オリジナル

2389 人が閲覧しました

カスタム関数には次のものが含まれます: 1. 名前付き関数、構文 "関数 function name(){}"; 2. 匿名関数、構文 "var 変数名=function(){};"; 3. オブジェクト関数、構文は「var 変数名=Function();」です; 4. 関数の定義と呼び出しを一緒に実装するセルフチューニング関数。

JavaScriptのカスタム関数とは何ですか?

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

関数は、イベントによってトリガーしたり、他のスクリプトで呼び出したりできる一連の遅延アクションです。

JavaScript の 2 種類の関数: 事前定義関数とカスタム関数

事前定義関数
- [parseInt / parseFloat]string to int/float
- ##【isNaN / isFinite】パラメータが数値以外/無限数かどうかを検出
- 【escape / unescape 】文字列のエンコード/デコード
- 【eval】JavaScriptスクリプトの実行
- 【アラート/確認/プロンプト】3つの警告ボックス
- function funcName(){}
- var x=function(){};
  #【オブジェクト関数】
- 【自己調整機能】

定義済み関数に加えて、JavaScript ではカスタム関数も使用できます。 関数をカスタマイズする場合、関数のパラメーターの型や関数の戻り値の型を宣言する必要はありません。

JavaScript は現在、次のカスタマイズ方法をサポートしています:

名前付き関数

匿名関数
#オブジェクト関数
セルフチューニング関数
1. 名前付き関数

名前付き関数は、関数キーワード、その後に関数名と括弧 () が続くことで定義されます。関数の定義が完了した後、関数は自動的に実行されず、イベントまたはスクリプトを通じて呼び出された場合にのみ実行されます。

別の <script></script> タグでは、関数の定義を関数の呼び出しの前に置く必要があります。そうでない場合、呼び出しは無効になります。
形式は次のとおりです:

function funcName([parameters]){
  statements;
  [return 表达式;]
}

ログイン後にコピー

2. 無名関数

無名関数の定義形式は、基本的に次のとおりです。名前付き関数の場合と同じですが、関数の名前が指定されておらず、最後にセミコロンが必要である点が異なります。関数名がないため、後続の関数呼び出しを容易にするために変数を使用して匿名関数を受け入れる必要があります。名前付き関数は初心者にとって簡単に始めることができますが、可読性は低くなります。匿名関数は比較的使いやすく、読みやすいため、現在、一般的な JavaScript フレームワークのほとんどは、基本的に関数の定義に匿名関数を使用します。

形式は次のとおりです:

var x=function([parameters]){
  statements;
  [return 表达式;]
};

ログイン後にコピー

3. オブジェクト関数

JavaScript は、関数を定義するための Function クラスを提供します。形式は次のとおりです。

var func1=new Function([parameters],statements;);

ログイン後にコピー

Function は関数を定義するために使用されるキーワードであり、最初の文字は大文字にする必要があります。

parameters は関数パラメータであり、オプションです。パラメータが複数ある場合はカンマで区切って指定します。

4. 自己呼び出し関数

通常、関数自体は自動的には実行されず、呼び出されたときにのみ実行されます。したがって、JavaScript では、関数の定義と呼び出しを一緒に実装する自己呼び出し関数が提供されます。形式は次のとおりです。

(function([parameters]){
  statements;
  [return 表达式;]
})([params]);

ログイン後にコピー

括弧 () を使用してセルフチューニング関数を囲み、セミコロンで終わる必要があります。

パラメータは仮パラメータであり、オプションです。パラメータはカンマで区切られます。

コード例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>test</title>
</head>
<body>
  <input id="btn1" type="button" onclick="button1Event()" value="button1" />
  <input id="btn2" type="button" onclick="button2Event()" value="button2" /><br />
  <input id="a" type="text"/><input id="b" type="text"/><br />
  <input id="sumBtn" type="button" value="x+y" onclick="sum()"/>
  
  <script type="text/javascript">
    function button1Event(){/* 命名函数 */
        alert("命名函数：按钮1被点击！");
    }
    var x=function(){/* 匿名函数 */
        alert("匿名函数：按钮2被点击！");
    }
    button2Event=x;
    
    var y=new Function("a", "b", "return a+b");/* 对象函数 */
    sum=function(){
        var aValue=parseInt(document.getElementById("a").value,10);
        var bValue=parseInt(document.getElementById("b").value,10);
        alert("对象函数："+y(aValue,bValue));
    }
    
    var tema=2;var temb=2;
    (function(a,b){/* 自调函数 */
        alert("自调函数："+(a+b));
    })(tema,temb);
  </script>
</body>
</html>

ログイン後にコピー