JavaScript の bind()メソッド

JavaScript で関数を呼び出すときはいつでも、関数の参照は常にグローバルオブジェクト、つまりウィンドウオブジェクトを指します。これは通常の関数では問題ありませんが、ネストされた関数やオブジェクト内に存在する関数に関しては、問題が発生します。ここで、内部関数を呼び出すには、オブジェクト名または外部関数名を使用して内部関数を呼び出す必要があるためです。したがって、オブジェクト内に存在する関数、または他の関数内に存在する関数を使用する場合、グローバルコンテキストを指すため、直接使用することはできません。

これを解決するには、内部関数をバインドしてバインド関数内に新しいコンテキストを渡すか、その関数を外部に宣言してから関数をバインドして新しいコンテキストを渡すことができます。bind() は JavaScript の関数であり、関数が存在する他のコンテキストでグローバルコンテキストを変更できます。これは、関数の借用とも呼ばれます。例を使用して、bind メソッドが実際に使用されていることを理解しましょう。

JavaScript で bind() メソッドを使用する

以下のコードには、amazon と tesla の 2つのオブジェクトがあります。これらの各オブジェクトには、name、noOfEmployees、関数 getInfo() などのいくつかのプロパティが含まれています。ここでは、getInfo() 関数を呼び出します。この関数は、amazon オブジェクト名を使用して amazon オブジェクト内に存在し、tesla オブジェクト名を使用して tesla オブジェクト内に存在します。

let amazon = {
  name: 'Amazon',
  noOfEmployees: 100,
  getInfo: function() {
    console.log(`The ${this.name} has ${this.noOfEmployees} employees.`);
  },
} amazon.getInfo();


let tesla = {
  name: 'Tesla',
  noOfEmployees: 150,
  getInfo: function() {
    console.log(`The ${this.name} has ${this.noOfEmployees} employees.`);
  },
} tesla.getInfo();

出力：

The Amazon has 100 employees.
The Tesla has 150 employees.

上記のプログラムを実行すると、上記の出力が得られます。このアプローチの問題は、関数 getInfo() がコンソールに行を出力するのと同じことをすることです。また、コードの繰り返しにつながる両方のオブジェクトで同じ関数を宣言しました。

代わりに、以下に示すように、オブジェクトの外部で getInfo() 関数を宣言し、オブジェクトから削除することができます。

let amazon = {
  name: 'Amazon',
  noOfEmployees: 100,
}

let tesla = {
  name: 'Tesla',
  noOfEmployees: 150,
}

let getInfo =
    function() {
  console.log(`The ${this.name} has ${this.noOfEmployees} employees.`);
}

let amazon_Data = getInfo.bind(amazon);
let tesla_Data = getInfo.bind(tesla);

amazon_Data();
tesla_Data();

出力：

The Amazon has 100 employees.
The Tesla has 150 employees.

次に、bind() 関数を使用して、getInfo() 関数を 2つのオブジェクト amazon および tesla にバインドします。次に、参照を別のさまざまな amazon_Data および tesla_Data 内に保存します。

ここで、amazon_Data および tesla_Data 内に格納した関数を呼び出すには、() 丸括弧を付ける必要があります。これにより、以前に取得したものと同じ出力が得られます。ここでの唯一の違いは、私たちが従ったアプローチです。

以下に示すように、bind メソッドの最後にもう 1つ () を追加することで、参照を保存せずにメソッドを直接呼び出すこともできます。

getInfo.bind(amazon)();
getInfo.bind(tesla)();

この概念は、同じ関数 getInfo() が 2つの異なるオブジェクト、amazon と tesla によって使用または借用されているため、関数借用とも呼ばれます。