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

関数は、特定のタスクを実行し (特定の機能を持つ)、再利用できるコード ブロックのセットです。組み込み関数を使用するだけでなく、独自の関数 (カスタム関数) を作成し、必要に応じてその関数を呼び出すこともできるため、コードの繰り返しの記述を避けるだけでなく、後のコードのメンテナンスも容易になります。

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

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

1. Function ステートメント

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

function funName([args]) {
    statements
}

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は作成した関数の関数構造文、その間は本体ステートメントはセミコロンで区切ります。

例 1

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

var f = new Function ("a", "b", "return a+b");  //通过构造函数来克隆函数结构

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

function f(a, b) {  //使用function语句定义函数结构
    return a + b;
}

例 2

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

var f = new Function();  //定义空函数

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

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

関数リテラルは匿名関数とも呼ばれ、関数には関数名がありません。関数キーワード、パラメータ、関数本体のみが含まれます。具体的な使用法は次のとおりです。

function ([args]) {
    statements
}

例 1

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

function (a, b) {  //函数直接量
    return a + b;
}

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

例 2

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

//把函数作为一个值直接赋值给变量 f
var f = function (a, b) {
    return a + b;
};

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

console.log(f(1,2));  //返回值3

例 3

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

console.log(  //把函数作为一个操作数进行调用
    (function (a,b) {
        return a + b;
    })(1, 2));  //返回数值3

4. アロー関数

アロー関数は、es6 の関数の略称です。アロー関数自体の this は持たず、定義時に this が決定され、その値は前の層の this になります。

//箭头函数
const sayName = ()=>{
    console.log("箭头函数")
}

二：调用函数

一旦定义好了一个函数，我们就可以在当前文档的任意位置来调用它。调用函数非常简单，只需要函数名后面加上一个括号即可，例如 alert()、write()。注意，如果在定义函数时函数名后面的括号中指定了参数，那么在调用函数时也需要在括号中提供对应的参数。

示例代码如下：

function sayHello(name){
    document.write("Hello " + name);
}
// 调用 sayHello() 函数
sayHello('PHP中文网');

提示：JavaScript 对于大小写敏感，所以在定义函数时 function 关键字一定要使用小写，而且调用函数时必须使用与声明时相同的大小写来调用函数。

【相关推荐：javascript学习教程】

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