簡単な例を使用して JavaScript での呼び出し、適用、バインドを理解する

JavaScript を使用する場合、call、apply、bind という 3 つの強力なメソッドに遭遇することがあります。これらのメソッドは、関数内で this の値を制御するために使用され、オブジェクトの操作が容易になります。各メソッドがどのように機能するかを理解するために、簡単な例を使用して各メソッドを分析してみましょう。

1. メソッド呼び出し

call メソッドを使用すると、特定の this 値を使用して関数を呼び出し、引数を 1 つずつ渡すことができます。

const person = {
  name: 'Alice',
  greet: function(greeting) {
    console.log(`${greeting}, my name is ${this.name}`);
  }
};

const anotherPerson = { name: 'Bob' };

person.greet.call(anotherPerson, 'Hello');
// Output: "Hello, my name is Bob"

この例では、call によって this の値が person から anotherperson に変更されるため、greet 関数は「こんにちは、私の名前はボブです」と出力します。

2. メソッドを適用

apply メソッドは call に似ていますが、引数を 1 つずつではなく配列として受け取ります。

const person = {
  name: 'Alice',
  greet: function(greeting, punctuation) {
    console.log(`${greeting}, my name is ${this.name}${punctuation}`);
  }
};

const anotherPerson = { name: 'Charlie' };

person.greet.apply(anotherPerson, ['Hi', '!']);
// Output: "Hi, my name is Charlie!"

ここで、apply を使用すると、this 値が anotherperson に変更され、複数の引数を配列として渡すことができます。

3. バインドメソッド

バインド メソッドは関数をすぐには呼び出しません。代わりに、この値がバインドされた新しい関数が返され、後で呼び出すことができます。

const person = {
  name: 'Alice',
  greet: function() {
    console.log(`Hi, my name is ${this.name}`);
  }
};

const anotherPerson = { name: 'Diana' };

const greetDiana = person.greet.bind(anotherPerson);

greetDiana();
// Output: "Hi, my name is Diana"

この例では、bind は新しい関数greetDianaを作成し、これをanotherpersonにバインドします。 welcomeDiana に電話をかけると、「こんにちは、私の名前は Diana です」と出力されます。

まとめ

• call: 特定の this 値と 1 つずつ渡される引数を使用して関数を即座に呼び出します。
• apply: 特定の this 値と配列として渡された引数を使用して関数を直ちに呼び出します。
• bind: 特定の this 値を持つ新しい関数を返します。後で呼び出すことができます。

これらのメソッドは、あるオブジェクトからメソッドを借用して別のオブジェクトで使用する必要がある場合、または関数内の this 値をより詳細に制御したい場合に便利です。