JavaScript apply() メソッド

概要: このチュートリアルでは、JavaScript の Function 型の apply() メソッドとその効果的な使用方法について学習します。

JavaScript apply() メソッド入門

Function.prototype.apply() メソッドを使用すると、指定された this 値と 配列 として提供される引数を使用して 関数 を呼び出すことができます。 apply() メソッドの構文は次のとおりです。

fn.apply(thisArg, [args]);
Code language: JavaScript (javascript)

apply() メソッドは2つの引数を受け取ります。

• thisArg は、関数 fn の呼び出しに提供される this の値です。
• args 引数は、関数 fn の引数を指定する配列です。ES5 以降、args 引数は配列のようなオブジェクトまたは配列オブジェクトにすることができます。

apply() メソッドは、個々の引数ではなく配列として関数の引数を受け取ることを除いて、call() メソッドと似ています。

JavaScript apply() メソッドの例

apply() メソッドの使用例をいくつか見てみましょう。

1) JavaScript apply() メソッドの簡単な例

person オブジェクトがあるとします。

const person = {
    firstName: 'John',
    lastName: 'Doe'
}
Code language: JavaScript (javascript)

...そして、次のような greet() という名前の関数があるとします。

function greet(greeting, message) {
    return `${greeting} ${this.firstName}. ${message}`;
}
Code language: JavaScript (javascript)

greet() 関数は、greeting と message の2つのパラメーターを受け取ります。 greet() 関数内では、firstName プロパティを持つオブジェクトを参照します。

次の例は、apply() メソッドを使用して、this を person オブジェクトに設定して greet() 関数を呼び出す方法を示しています。

let result = greet.apply(person, ['Hello', 'How are you?']);

console.log(result);
Code language: JavaScript (javascript)

出力

Hello John. How are you?
Code language: JavaScript (javascript)

この例では、関数内の this 値を person オブジェクトに設定しました。 greet() 関数の引数は、配列として apply() メソッドに渡されました。

apply() メソッドは、this 値を person オブジェクトに設定し、引数を配列 ['Hello', 'How are you?'] として greet() 関数を呼び出しました。

call() メソッドを使用する場合、greet() 関数の引数を次のように個別に渡す必要があります。

let result = greet.call(person, Hello', 'How are you?');
Code language: JavaScript (javascript)

2) 関数の借用

apply() メソッドを使用すると、オブジェクトはコードを複製することなく別のオブジェクトのメソッドを借用できます。

次の computer オブジェクトがあるとします。

const computer = {
    name: 'MacBook',
    isOn: false,
    turnOn() {
        this.isOn = true;
        return `The ${this.name} is On`;
    },
    turnOff() {
        this.isOn = false;
        return `The ${this.name} is Off`;
    }
};
Code language: JavaScript (javascript)

...そして、次の server オブジェクトがあるとします。

const server = {
    name: 'Dell PowerEdge T30',
    isOn: false
};
Code language: JavaScript (javascript)

server オブジェクトには、turnOn() メソッドと turnOff() メソッドがありません。

computer オブジェクトの turnOn() メソッドを server オブジェクトで実行するには、次のように apply() メソッドを使用できます。

let result = computer.turnOn.apply(server);

console.log(result);
Code language: JavaScript (javascript)

出力

The Dell PowerEdge T30 is On
Code language: JavaScript (javascript)

この例では、server オブジェクトは computer オブジェクトの turnOn() メソッドを借用しています。

同様に、computer オブジェクトの turnOff() メソッドを server オブジェクトで呼び出すことができます。

let result = computer.turnOff.apply(server);
console.log(result);Code language: JavaScript (javascript)

出力

The Dell PowerEdge T30 is OffCode language: JavaScript (javascript)

3) apply() メソッドを使用して配列を別の配列に追加する

apply() メソッドを使用すると、配列の要素を別の配列に追加できます。

let arr = [1, 2, 3];
let numbers = [4, 5, 6];

arr.push.apply(arr, numbers);

console.log(arr); 
Code language: JavaScript (javascript)

この例では、apply() メソッドは元の配列 arr を変更します。 Array.prototype.concat() メソッドも同じ結果を提供しますが、元の配列を変更する代わりに新しい配列を返す点が異なります。

まとめ

• apply() メソッドは、指定された this 値と配列として提供される引数を使用して関数を呼び出します。
• apply() メソッドは、個々の引数ではなく配列として関数の引数を受け取ることを除いて、call() メソッドと似ています。