Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【JavaScript ECMAScript】Function::Function.prototype.applyインスタンスメソッドの使い方

Function.prototype.apply()インスタンスメソッドの使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

Function.prototype.apply()メソッドは、指定されたthis値と、配列(または配列に似たオブジェクト)として提供される引数を使って、関数を実行するメソッドです。

このメソッドは、関数を呼び出す際に、その関数内でthisキーワードが参照する値を明示的に指定することができます。これにより、関数の実行コンテキストを柔軟に制御することが可能になります。例えば、あるオブジェクトのメソッドを、別のオブジェクトが所有しているかのように実行したい場合に利用できます。

apply()メソッドに渡す最初の引数thisArgは、関数が実行される際のthisの値となります。2番目の引数argsArrayは、実行される関数に渡される引数を含んだ配列、またはargumentsオブジェクトのような配列に似たオブジェクトです。この引数の渡し方は、Function.prototype.call()メソッドが引数を個別にカンマ区切りで受け取るのと対照的で、特に引数の数が事前に決まっていない場合や、引数がすでに配列として準備されている場合に非常に便利です。

apply()メソッドは、呼び出された関数が返した値をそのまま戻り値として返します。この機能は、特に動的に引数を渡して関数を実行したい場合や、別のオブジェクトのメソッドを借用して現在のオブジェクトに適用したい場合など、JavaScriptにおける関数の柔軟な利用を強力にサポートします。

公式リファレンス: Function.prototype.apply()

構文(syntax)

1function targetFunction(param1, param2) {
2  // この関数は、this の値として thisArgObject を参照し、
3  // param1 に 'argumentValue1'、param2 に 'argumentValue2' を受け取ります。
4}
5
6const thisArgObject = {
7  // targetFunction 内部で this が参照するオブジェクト
8};
9
10const argsArray = [
11  'argumentValue1', // targetFunction の param1 に対応
12  'argumentValue2'  // targetFunction の param2 に対応
13];
14
15targetFunction.apply(thisArgObject, argsArray);

引数(parameters)

thisArg, argsArray

  • thisArg: 関数を呼び出す際に this として設定される値
  • argsArray: 関数に渡す引数の配列または配列風オブジェクト

戻り値(return)

any

指定された関数に、指定された引数リストで実行させた結果を返します。

関連コンテンツ