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

簡単な例を使用して 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. バインドメソッド

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

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 値をより詳細に制御したい場合に便利です。

以上が簡単な例を使用して JavaScript の呼び出し、適用、バインドを理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。