【JavaScript】bind()について

以前、HTML5プロフェッショナル認定試験の学習をしていた際bind()というものが出てきました。

存在は知っていましたが、実際に使用した経験がなかったため今回調べてみました。

bind()とは

bind()とは一体何でしょうか。

MDNには下記のように記載されています。

bind() メソッドは新しい関数を生成し、これは呼び出された際に this キーワードに指定された値が設定されます。この値は新しい関数が呼び出されたとき、一連の引数の前に置かれます。

どうやらbind()は

• 新しい関数を生成する
• thisに関係する

ようです。

では実際、どのように使用するのか見ていきましょう。

使用例

例えばbind()を使用せずに関数内でthisを参照する場合、挙動が意図と異なる場合がありますが、bind()を使用すれば解決します。

bind() を使用しない場合

下記の例では、関数greetをperson.helloに代入していますが、greet()を呼び出すとthisがpersonオブジェクトを参照していないためundefinedになります。

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

const greet = person.hello;
greet(); // "Hello, my name is undifined"

bind() を使用する場合

一方、bind()を使用することで関数helloをpersonオブジェクトに結び付けることができます。
これにより、greet()を実行したときにthisが常にpersonオブジェクトを指すためにthis.nameはKennyとなります。

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

const greet = person.hello.bind(person);
greet(); // "Hello, my name is Kenny"

bind() の引数を指定する場合

bind()は引数を取ることもできます。

次のように記述することで、
対象の関数のthisの参照先を変更した関数を新たに生成することができます。

bind(thisArg, arg1, …, argN)

引数	説明
第一引数	thisの参照先
第二引数以降	関数で使用する引数

下記は引数を指定する場合の例です。

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

const person = {name: "Kenny"};

const bindIntroduce = introduce.bind(person, "Merhaba", "!");
bindIntroduce(); // Merhaba, my name is Kenny!

まとめ

bind()は意図したオブジェクトをthisとして使用できるようにするのですね。

メリットとしては下記のようなものがあげられるかなと思います。

• thisの中身を固定できるので予期せぬthisの変更を防ぐことができる
• 設定を保持した関数を作成できるので再利用できる

それでは。

参考文献