JavaScript での呼び出し、適用、バインドの簡素化

JavaScript では、call、apply、bind を使用して関数のコンテキスト (この値) を変更できます。これらの方法は最初は難しく思えるかもしれませんが、いくつかの簡単な例と実際の例を使用すると、コツを掴むことができます。それらを詳しく見てみましょう。

呼び出しメソッド

呼び出しは、あるオブジェクトからメソッドを借用し、それを別のオブジェクトで使用する方法と考えてください。

現実のアナロジー

スケジュールをチェックするスマートフォン アプリがあると想像してください。あなたの友人も同じアプリを使っていますが、スケジュールを設定していません。アプリの構成を一時的に友人に貸して、友人のスケジュールに合わせてどのように機能するかを確認することができます。

例

const person1 = {
  firstName: 'John',
  lastName: 'Doe',
  fullName: function() {
    console.log(this.firstName + ' ' + this.lastName);
  }
};

const person2 = {
  firstName: 'Jane',
  lastName: 'Smith'
};

person1.fullName.call(person2); // Outputs: Jane Smith

ここで、person1 にはフルネームを出力するメソッドがあります。 call を使用すると、person2 はこのメソッドを借用し、自分のフルネームを出力できます。

apply メソッド

apply は call に似ていますが、引数を配列として受け取ります。

現実のアナロジー

あなたがレストランで食べ物を注文していると想像してください。ウェイターに各品目を個別に伝える代わりに、品目のリストをウェイターに渡します。

例

function sum(a, b) {
  console.log(a + b);
}

sum.apply(null, [5, 10]); // Outputs: 15

この例では、apply は配列として指定された引数 5 と 10 を使用して sum 関数を呼び出します。

バインドメソッド

bind は、呼び出されたときに this 値が指定された値に設定される新しい関数を作成します。これは、アプリの構成を友達に永久に貸して、いつでも好きなときに使えるようにするようなものです。

現実のアナロジー

テレビでのみ動作する特別なテレビリモコンがあるとします。友達のテレビで永続的に動作する複製リモコンを作成できます。

例

const module = {
  x: 42,
  getX: function() {
    return this.x;
  }
};

const retrieveX = module.getX;
console.log(retrieveX()); // Outputs: undefined (because 'this' is not module)

const boundGetX = retrieveX.bind(module);
console.log(boundGetX()); // Outputs: 42

この例では、bind は常に module を this 値として使用する新しい関数boundGetX を作成します。

実際の使用例

1. 借入方法

呼び出しを使用して、他のオブジェクトからメソッドを借用できます。

const person = {
  name: 'Alice',
  greet: function() {
    console.log('Hello, ' + this.name);
  }
};

const anotherPerson = {
  name: 'Bob'
};

person.greet.call(anotherPerson); // Outputs: Hello, Bob

2. 数学関数に apply を使用する

apply は、配列を Math.max などの関数に渡すのに役立ちます。

const numbers = [5, 6, 2, 3, 7];
const max = Math.max.apply(null, numbers); 
console.log(max); // Outputs: 7

3. 関数の引数の事前設定

bind を使用すると、事前設定された引数を持つ関数を作成できます。

function multiply(a, b) {
  return a * b;
}

const double = multiply.bind(null, 2);
console.log(double(5)); // Outputs: 10

ここで、bind は a が常に 2 である新しい関数 double を作成し、任意の数値を簡単に 2 倍にします。

結論

呼び出し、適用、バインドを理解すると、JavaScript での関数の実行方法を制御するのに役立ちます。これにより、この値と事前設定された引数を変更できるようになり、コードがより柔軟で再利用可能になります。これらの方法をマスターすると、よりクリーンで効率的な JavaScript コードを作成できます。

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