.bind() I GOT YOU!

thx andyyou.logdown

ex1

(做一個按鈕按下 x 就累加 1...) ex1. jsbin

// 計數, 顯示
var logger = {
  x: 0,
  increment: function () {
    this.x++;
    console.log(this.x);
  }
}
// 一般的寫法
document
 .querySelector('button')
 .addEventListener('click', function () {
     logger.increment();
 });

// .bind() 的寫法
document
  .querySelector('button')
  .addEventListener('click', logger.increment.bind(logger));

ex2.

Robot 物件有 3 個私有方法: walk, fly, check. 1 個開放方法: showoff, 裡面是讓 this.check 可被別人使用...

ex2. jsbin

var Robot = {
  /** private */
  power: 100,
  walk: function () {
    console.log('Robot walked');
    this.power -= 10;
  },
  fly: function () {
    console.log('Robot flied');
    // this = Robot
    this.power -= 20;
  },
  check: function (excute) {
    if (this.power > 0)
      excute();
  },

  /** public */

  // 沒 .bind() 寫法 ==============  
  showoff: function () {
    var that = this;
    console.log('1',this) // Robot

    this.check( function () {
      console.log('2',this) // window, so need var that

      that.walk();
      that.fly();
    });
  }  
  // 當我們呼叫了 .bind() 的時候，
  // 其實它非常單純的建立了一個新的 function，
  // 並且把這個新 function 所屬的 this 綁定進去

  // .bind() 寫法 ==============
  showoff: function () {
    // console.log('1',this) // Robot
    this.check( function () {
      this.walk();
      this.fly();
    }.bind(this));    
    // 把 this.check 的 this 替換裡面的 this.walk 的 this
  }
}

Robot.showoff();