JavaScript での呼び出し、適用、バインドについて理解する-jsチュートリアル-php.cn

JavaScript での呼び出し、適用、バインドについて理解する

Mary-Kate Olsen

リリース： 2024-11-21 05:42:10

オリジナル

588 人が閲覧しました

JavaScript では、メソッド call、apply、bind は関数のコンテキスト (this) を制御するために不可欠です。これらは、特にオブジェクトやメソッドを操作する場合、何を参照するかを明示的に定義する必要があるシナリオで頻繁に使用されます。

このブログでは、これらのメソッドとその構文を詳しく調べ、いつ、どのように使用するかを理解するための例を含むユースケースを説明します。

1.問題: JavaScript でのこれ

JavaScript では、this の値は関数の呼び出し方法によって異なります。例:

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

person.greet(); // Output: Hello, my name is Alice

const greet = person.greet;
greet(); // Output: Hello, my name is undefined

ログイン後にコピー

ここで、関数が新しい変数に代入されると、greet() の this の値が変化します。ここで、call、apply、bind が役に立ちます。これらを使用すると、何を参照するかを制御できるようになります。

2. call() メソッド

call() メソッドを使用すると、関数をすぐに呼び出して、このコンテキストを明示的に設定できます。引数は個別に渡されます。

構文:

functionName.call(thisArg, arg1, arg2, ...);

ログイン後にコピー

例:

const person = {
  name: "Alice",
};

function greet(greeting) {
  console.log(`${greeting}, my name is ${this.name}`);
}

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

ログイン後にコピー

この例では、call() を使用してこれを person オブジェクトに設定しました。

3. apply() メソッド

apply() メソッドは call() に似ていますが、引数の受け渡し方法が異なります。引数を個別に渡すのではなく、配列として渡します。

構文:

functionName.apply(thisArg, [arg1, arg2, ...]);

ログイン後にコピー

例:

const person = {
  name: "Alice",
};

function greet(greeting, punctuation) {
  console.log(`${greeting}, my name is ${this.name}${punctuation}`);
}

greet.apply(person, ["Hello", "!"]); // Output: Hello, my name is Alice!

ログイン後にコピー

ここでの主な違いは、引数が配列として渡されるため、動的に構築された引数リストを扱うときに apply() が便利になることです。

4. bind() メソッド

bind() メソッドは関数をすぐには呼び出しません。代わりに、指定されたこのコンテキストを使用して新しい関数を作成して返します。これは、再利用可能な関数やイベントハンドラーを作成する場合に特に役立ちます。

構文:

const boundFunction = functionName.bind(thisArg, arg1, arg2, ...);

ログイン後にコピー

例:

const person = {
  name: "Alice",
};

function greet(greeting) {
  console.log(`${greeting}, my name is ${this.name}`);
}

const boundGreet = greet.bind(person);
boundGreet("Hi"); // Output: Hi, my name is Alice

ログイン後にコピー

ここでは、greet 関数は person オブジェクトにバインドされており、boundGreet が呼び出されるたびに常に person を参照します。

5. call、apply、bind の比較

Understanding call, apply, and bind in JavaScript

6.実際の使用例

例 1: オブジェクトからメソッドを借用する

const person1 = { name: "Alice" };
const person2 = { name: "Bob" };

function introduce() {
  console.log(`Hi, I'm ${this.name}`);
}

introduce.call(person1); // Output: Hi, I'm Alice
introduce.call(person2); // Output: Hi, I'm Bob

ログイン後にコピー

例 2: apply を数学演算に使用する

const numbers = [5, 10, 15, 20];

console.log(Math.max.apply(null, numbers)); // Output: 20
console.log(Math.min.apply(null, numbers)); // Output: 5

ログイン後にコピー

ここで、apply() は配列を Math.max と Math.min に渡すのに役立ちます。

例 3: イベントハンドラーのバインディング

const button = document.getElementById("myButton");
const person = {
  name: "Alice",
  sayName: function () {
    console.log(`Hi, my name is ${this.name}`);
  },
};

button.addEventListener("click", person.sayName.bind(person));

ログイン後にコピー

bind を使用しない場合、sayName 内の this の値は person オブジェクトではなく button 要素を参照します。

結論

call、apply、bind メソッドは、JavaScript でこれを制御するための強力なツールです。これらは、特に動的コンテキストで関数やオブジェクトを操作する場合、柔軟で再利用可能なコードを作成するために不可欠です。

簡単にまとめます: