[解決済み] JavaScriptの「bind」メソッドの使い方を教えてください。

質問

はどのように使うのですか？ bind() をJavaScriptで作成することはできますか？

どのように解決するのですか？

Bindは、新しい関数を作成して、強制的に this に渡されるパラメータとなるように、関数内の bind() .

以下はその例です。 bind を持つメンバーメソッドを渡すために、正しい this :

var myButton = {
  content: 'OK',
  click() {
    console.log(this.content + ' clicked');
  }
};

myButton.click();

var looseClick = myButton.click;
looseClick(); // not bound, 'this' is not myButton - it is the globalThis

var boundClick = myButton.click.bind(myButton);
boundClick(); // bound, 'this' is myButton

とプリントアウトされます。

OK clicked
undefined clicked
OK clicked

また、1つ目のパラメータの後に追加のパラメータを追加することもできます ( this ) パラメータと bind は、それらの値を元の関数に渡します。結合された関数に後から追加でパラメータを渡すと、結合されたパラメータの後に渡されます。

// Example showing binding some parameters
var sum = function(a, b) {
  return a + b;
};

var add5 = sum.bind(null, 5);
console.log(add5(10));

とプリントアウトされます。

15

チェックアウト JavaScript 関数バインド をクリックすると、より詳細な情報とインタラクティブなサンプルが表示されます。

アップデート：ECMAScript 2015でサポートされた => 関数を使用します。 => 関数は、よりコンパクトで this のポインタを定義しているスコープから削除する必要があります。 bind() を頻繁に使用します。例えば、もしあなたが Button をフックするために、最初の例から click コールバックを DOM イベントに接続する場合、次のような方法が有効です。

var myButton = {
  ... // As above
  hookEvent(element) {
    // Use bind() to ensure 'this' is the 'this' inside click()
    element.addEventListener('click', this.click.bind(this));
  }
};

または

var myButton = {
  ... // As above
  hookEvent(element) {
    // Use a new variable for 'this' since 'this' inside the function
    // will not be the 'this' inside hookEvent()
    var me = this;
    element.addEventListener('click', function() { me.click() });
  }
};    

または

var myButton = {
  ... // As above
  hookEvent(element) {
    // => functions do not change 'this', so you can use it directly
    element.addEventListener('click', () => this.click());
  }
};