JavaScript における apply と call メソッド
この記事では、JavaScript で call() および apply() メソッドを使用する方法について説明します。両方の機能の違いは、いくつかの簡単な例を使用して説明されています。
次の方法とその仕組みを見てみましょう。
JavaScript の call() メソッド
所有者オブジェクトを引数として取るのが call() メソッドです。キーワード this は、関数またはそれが属するオブジェクトの所有者を指します。
メソッドを呼び出して、さまざまなオブジェクトで使用することもできます。これにより、コンマ区切りの引数を使用してメソッドを呼び出すことができます。
JavaScript の call() メソッドの構文
abc_object.object_method.call(object_instance, arguments, ...)
上記のように、call() メソッドは 2つのパラメーターを受け入れます。これについては、以下で説明します。
- 最初のパラメータでは、
object_instanceがオブジェクトのインスタンスを保持します。 - コンマ区切りの引数は 2 番目のパラメーターにあります。
JavaScript の apply() メソッド
apply() は、別のオブジェクトに書き込むために使用されます。配列の形式で値を取ります。
JavaScript の apply() メソッドの構文
abc_object.object_method.apply(object_instance, [arguments_array...])
apply() メソッドは、上記のように 2つのパラメーターを受け入れます。
- 最初のパラメータでは、
object_instanceがオブジェクトのインスタンスを保持します。 - 2 番目のパラメーターでは、引数は配列の形式です。
JavaScript の call() メソッドの例
クリックイベント時に関数をトリガーするシンプルなボタンクリックして表示を作成します。
この関数は call() メソッドを使用し、キーと値のペアとして複数の文字列値を含むオブジェクトを使用して、結合されたテキスト結果を表示します。call() メソッドを使用してパラメータを渡すことにより、指定されたオブジェクトの文字列を単純に結合します。
結果は段落として表示されます。
<!DOCTYPE html>
<html>
<head>
<title>
call() method Example
</title>
</head>
<body style = "text-align:center;">
<h1 >
Click on "Click to display" for display combined Text using call()
</h1>
<button onClick="fun()">
Click to display
</button>
<p id="mypara"></p>
<!-- Script tags to use call() method to call
function -->
<script>
function fun() {
let object_b = {
combinedText: function(text1, text2) {
return this.firstName + " " + this.lastName
+ " " + text1 + " " + text2;
}
}
let object_a = {
firstName:"DelftStack",
lastName: "Technology",
}
let x = object_b.combinedText.call(object_a, "is", "Best");
document.getElementById("mypara").innerHTML = x;
}
</script>
</body>
</html>
上記の HTML ページソースでは、関数 fun() を呼び出す単純なボタン Click to display を見ることができます。
fun() では、本体は object_b の別の combinedText メソッドで初期化されます。渡されたパラメータの連結文字列を返します。
call() パラメータ (object_a,"is","best") を使用してキー値として複数の文字列を含む別の初期化されたオブジェクト object_a。両方とも文字列で連結し、結果を返します。
結果は getElementById() によって表示されます。
apply() メソッドを使用する別の方法
apply() メソッドでも同じ結果が得られます。apply() メソッドを使用するには、カンマ区切りの引数 object_b.combinedText.apply(object_a, ["is", "Best"]) の代わりに引数の配列を渡します。
<script>
function fun() {
let p = {
combinedText: function(text1, text2) {
return this.firstName + " " + this.lastName
+ ", " + text1 + ", " + text2;
}
}
let object_a = {
firstName:"DelftStack",
lastName: "Technology",
}
let x = p.combinedText.apply(object_a, ["Is", "Best"]);
document.getElementById("mypara").innerHTML = x;
}
</script>
上記の例では、x = object_b.combinedText.apply() メソッドがパラメーター(object_a,[array_arguments]) で使用されています。
次のステップでは、結果変数を段落 ID mypara に追加して、HTML ページに値を表示する必要があります。