ホーム>Web デザインのチュートリアル>JavaScript チュートリアル

JSカスタム関数の宣言と呼び出しの詳細な分析

著者：Eve Cole 更新時間：2022-08-04 09:02:18
関数は、特定のタスクを実行する (特定の機能を持つ) 再利用可能なコード ブロックのセットです。組み込み関数の使用に加えて、独自の関数 (カスタム関数) を作成し、必要に応じてこの関数を呼び出すこともできます。これにより、コードの繰り返しの記述が回避されるだけでなく、後のコードのメンテナンスも容易になります。

1: 関数を宣言するいくつかの方法

JavaScript でカスタム関数を宣言するには 3 つの方法があります。つまり、関数ステートメントを使用する方法、Function() コンストラクターを使用する方法、および関数リテラルを定義する方法です。

1. Function ステートメント

JavaScript では、Function ステートメントを使用して関数を宣言できます。具体的な使用方法は次のとおりです。

function funName([args]) {
    ステートメント
funName

は関数名であり、変数名と同様に、有効な JavaScript 識別子である必要があります。関数名の後には、括弧で囲まれ、カンマで区切られたパラメータのリストが続きます。パラメータはオプションであり、数に制限はありません。

識別子として、パラメーターは関数本体内でのみアクセスされます。パラメーターは関数スコープのプライベート メンバーです。関数を呼び出すときは、関数に値を渡し、パラメータを使用して外部から渡された値を取得し、関数本体内で関数の実行に介入します。

括弧の後には中括弧があり、中括弧内に含まれるステートメントが関数本体構造の主な内容になります。関数本体では中括弧が必須です。中括弧がないと、JavaScript は構文エラーをスローします。

関数ステートメントの

例には、

関数名、括弧、および中括弧が含まれている必要があります。その他のコードは省略できるため、最も単純な関数本体は空の関数です。

function funName() {} //空の関数

匿名関数を使用する場合は、関数名を省略できます。

function () {} //匿名の空の関数

var ステートメントと function ステートメントは両方とも宣言ステートメントであり、宣言された変数と関数は JavaScript のプリコンパイル時に解析されます (変数プロモーションおよび関数プロモーションとも呼ばれます)。プリコンパイル期間中、JavaScript エンジンは各関数のコンテキストを作成し、変数オブジェクトを定義し、関数内のすべての仮パラメーター、プライベート変数、および入れ子関数を変数オブジェクトの属性として登録します。

2. Function() コンストラクター

Function() コンストラクターを使用して、関数をすばやく生成します。具体的な使い方は以下の通りです:

var funName = new Function(p1, p2, ..., pn, body);

Function()のパラメータの型はすべて文字列で、p1~pnは作成した関数のパラメータ名のリストを表します。 body は作成された関数の関数構造ステートメントを表し、body ステートメントの間はセミコロンで区切られます。

例 1 では、

すべてのパラメーターを省略し、関数本体を表す文字列のみを渡すことができます。

var f = new Function ("a", "b", "return a+b"); // コンストラクターを通じて関数構造を複製します。

上記のコードでは、f は作成された関数の名前です。同じ関数を定義し、同じ構造の関数を function ステートメントを使用して設計できます。

function f(a, b) { //関数ステートメントを使用して関数構造を定義します return a + b;

例 2

では、

Function() コンストラクターを使用して、パラメーターを指定せずに空の関数構造体を作成します。

var f = new Function(); //空の関数を定義します。Function

() コンストラクターを使用して、関数ステートメントによって事前に宣言された関数本体にユーザーを制限しません。 Function() コンストラクターを使用すると、関数を構造体としてではなく式として使用できるため、より柔軟に使用できます。欠点は、Function() コンストラクターが実行中にコンパイルされるため、実行効率が非常に低く、通常はその使用が推奨されないことです。

3. 匿名関数 (関数リテラル)

関数リテラルは匿名関数とも呼ばれます。つまり、この関数は関数名を持たず、関数キーワード、パラメーター、および関数本体のみを含みます。具体的な使用方法は次のとおりです。

function ([args]) {
    ステートメント
例

1

次のコードは関数リテラルを定義します。

function (a, b) { //関数リテラル return a + b;
上記の
コード

では、関数リテラルは基本的に関数ステートメントを使用して関数構造を定義するのと同じであり、その構造は固定されています。ただし、関数リテラルは関数名を指定せず、キーワード function を直接使用して関数の構造を表現します。この種の関数は匿名関数とも呼ばれます。

例 2

無名関数は式、つまり関数式であり、関数構造のステートメントではありません。次に、無名関数を値として変数 f に代入します。

//関数を値として変数 f に直接代入します。
var f = 関数 (a, b) {
    a + b を返します。
関数構造体が値として
変数

に割り当てられている場合、変数は関数として呼び出すことができ、変数は匿名関数を指します。

console.log(f(1,2)); //戻り値 3

1.png

例 3

匿名関数は値として機能し、より複雑な式操作に参加できます。上記の例では、次のコードを使用して、関数の定義と呼び出しの統合操作を完了できます。

console.log( //関数をオペランドとして呼び出します (function (a,b) {
        a + b を返します。
    })(1, 2)); //戻り値 3

2.png

2: 関数の呼び出し

関数を定義したら、現在のドキュメント内のどこからでも呼び出すことができます。関数の呼び出しは非常に簡単で、alert()、write() のように関数名の後に括弧を追加するだけです。関数を定義するときに関数名の後のかっこ内にパラメータを指定した場合、関数を呼び出すときに対応するパラメータをかっこ内に指定する必要があることに注意してください。

サンプルコードは次のとおりです。

function SayHello(name){
    document.write("Hello " + 名前);
}
//sayHello() 関数を呼び出します。sayHello('PHP 中国語 Web サイト');

3.png

ヒント: JavaScript では大文字と小文字が区別されるため、関数を定義するときは関数キーワードを小文字にする必要があり、関数は宣言時と同じ大文字と小文字で呼び出す必要があります。

上記は、JS カスタム関数の宣言と呼び出しの詳細な分析です。詳細については、PHP 中国語 Web サイトの他の関連記事に注目してください。
関連記事