ジャバスクリプトバインド101

bind 共通のjsキーワードです.あなたが十分なJSコードを読むならば、あなたは多分それを見ましたthis.something = this.something.bind(this) 反応して、誰か?)いつ見てもbind , 私は本当に混乱します.これがあなたであるならば、あなたが縛られるこの記事の終わりまでに😎?) 理解するbind より良い!
警告:知識this bindを理解するための前提条件です.私は書いたthis , それをチェック!
BINDには多くのアプリケーションがあります、そして、それはこのような短い記事でカバーするのが不可能でしょう、しかし、私は要点がそうであると思います:

bind 通常の関数で

bind 's第2引数

bind 矢印機能

bind コールバック関数

それで、バインドは何ですか?
jsbind 関数のバインドthis 値を指定します.引数を"bind "することもできます.

正規関数でバインドする
関数のバインドの意味this 方法?
思い出すthis , 関数の中から呼び出されると、その関数が呼び出されるオブジェクトを参照してください.

const obj = {
  breakfast: 'pancakes',
  sayBreakfast(){
    console.log(`I had ${this.breakfast} for breakfast`)
  }
}

obj.sayBreakfast() // pancakes

With bind , 我々は、Say朝食this 我々が望む何にでも価値を持ちます.

const waffles = obj.sayBreakfast.bind({breakfast: "waffles"})
waffles() // waffles
obj.sayBreakfast() // pancakes

バインドの第2引数
引数をとるオブジェクトの中で、正規の関数の例を使いましょう.

const food = {
  entree: 'fried rice',
  sayLunch(appetizer) {
    console.log(`I  had ${appetizer} and ${this.entree} for lunch`)
  }
}

food.sayLunch('dumplings') // dumplings and fried rice

寿司で縛りましょう:

const lunchie = food.sayLunch.bind({entree: 'sushi'})
lunchie() // undefined and sushi

私たちはまだ引数を渡す必要がありますundefined , では、こうしましょう.

lunchie('miso soup') // miso soup and sushi

バインドの2番目の引数は“ロック”引数(s)値を指定できます.

const lunchy = food.sayLunch.bind({entree: 'tacos'}, 'chips')
lunchy() // chips and tacos
lunchy('burritos') // still chips and tacos

関数を指定したい場合は何かをバインドしたくない場合はnull 第一引数として.

const addStuff = function(first, second) {
  return first + second
}

addStuff(10,5) // 15
const addHundred = addStuff.bind(null, 100) // first is now 100
addHundred(3) // 103
addHundred(1,5) // 101

私たちはfirst への引数.一度縛られた.first は常に100です.Hence addHundred(1,5) は101を返し、6ではない.1 なるsecond 引数と5 技術的には3番目の引数です.

バインド関数
この節は多くのthis 知識.
私の前から、

通常の関数とグローバル関数のみthis .

矢印関数はありませんthis 独りで

時this は矢印関数の中で参照され、この値を見つける範囲を調べます.これは語彙のスコープのように動作します.

我々は最後の2つのセクションを通過するように我々は心にこれらを維持します.
束縛から始めましょう{a: "rock"} into sayThis 矢印関数.

const sayThis = () => console.log(this);
sayThis() // window obj
const imnotarock = sayThis.bind({a: "rock"})
imnotarock() // still window

この関数はウィンドウを返すthis . それは、どちらの規則的な機能またはグローバルなオブジェクトのためにでも語彙的に検索しますthis .
これは正規の関数でうまく動作します.

const sayThisAgain = function(){console.log(this)}
const imarock = sayThisAgain.bind({a: "rock"})
imarock() // {a: "rock"}

バインドできませんがthis , 事前に指定された値を矢印関数で指定できます.

const addFive = (x) => x + 5
addFive(10) // 15
const gimmeSeven = addFive.bind(null, 2)
gimmeSeven() // 7
gimmeSeven(10) // still 7

バインドインコールバック関数
我々にはあると言いましょうsayDinner() 通常の関数は、内部のディナーオブジェクトを使用してreduce() :

let dinner = {
  meals: ['pizza', 'pie', 'tea'],
  sayDinner() {
    let food = this.meals.reduce(function(acc, currentEl){
      if(currentEl === this.meals.slice(-1)[0]){
        return `${acc} ${currentEl}!`
      }
      return `${acc} ${currentEl},`
    }.bind(this), "")
    console.log(food)
  }
}

dinner.sayDinner() // pizza, pie, tea!

(BTW、あなたが減少に精通していないなら、チェックアウト)
注意を払う.bind(this) 我々の減速機能の終わりに.バインドは与える必要があるthis.meals コンテキスト.
説明しましょう
コールバック関数がコールされた場合、何を考えていますかthis.meals (スライスされている1つの機能の内部関数).それさえ知らないdinner オブジェクトが存在します.知っているacc and currentEl . 我々がするとき.bind(this) , 我々は、還元器を言っているthis.meal あなた自身の中で、あなたは使うことができますdinner 's meals ."
再度試してみてください.bind(this)

dinner = {
  meals: ['pizza', 'pie', 'tea'],
  sayDinner() {
    let food = this.meals.reduce(function(acc, currentEl){
      if(currentEl === this.meals.slice(-1)[0]){ // does not know about this.meals if we don't bind it
        return `${acc} ${currentEl}!`
      }
      return `${acc} ${currentEl},`
    }, "")
    console.log(food)
  }
}
dinner.sayDinner() // error

これはエラー"Cannot read property 'slice' of undefined" だってthis.meals コールバック関数の内部にはバインドされていない場合は未定義です.
遡及的に、私たちのコールバック関数を通常の関数から矢印関数に置き換えましょう.完全に動作しないbind :

dinner = {
  meals: ['pizza', 'pie', 'tea'],
  sayDinner() {
    let food = this.meals.reduce((acc, currentEl) => {
      if(currentEl === this.meals.slice(-1)[0]){ 
        return `${acc} ${currentEl}!`
      }
      return `${acc} ${currentEl},`
    }, "")
    console.log(food)
  }
}

dinner.sayDinner() // pizza, pie, tea!

3つのことを思い出すthis と上記の矢印関数.
この場合、我々の減速矢印機能、見てthis.meals その中で、それが何を意味するかを知りません、語彙的にsayDinner() 関数.以来sayDinner() は通常の関数で、this.meals コンテキスト.
どうすればsayDinner() 定期から矢印機能まで?
このような

dinner = {
  meals: ['pizza', 'pie', 'tea'],
  sayDinner: () => {
    let food = this.meals.reduce((acc, currentEl) => {
      if(currentEl === this.meals.slice(-1)[0]){
        return `${acc} ${currentEl}!`
      }
      return `${acc} ${currentEl},`
    }, "")
    console.log(food)
  }
}

考えてみましょう:我々は取得しようとして減速機能の中ですthis.meals . 上記の3つの規則を思い出してください.this それ自身で、それは通常の機能またはオブジェクトを探しますthis.meals . チェックする次のオブジェクトはグローバルウィンドウオブジェクトです.エラーをスローします:"Uncaught TypeError: Cannot read property 'reduce' of undefined"もちろん、我々は常にグローバルを定義することができますmeals , ライク

window.meals = ['Hamburger', 'Fries']
const dinner = {...}

dinner.sayDinner() // hamburger, fries

そしてうまくいっただろう.
そこにあなたはそれを持っている!ジャバスクリプトbind . 今すぐバインド物!

より多くの読書/資源

Understanding the "this" keyword, call, apply, and bind in JavaScript

What is the use of the JavaScript 'bind' method?

how to replace bind(this) in es6

Can you bind arrow functions?