Javascriptista

bind関数で「thisとは何か」を明確化することができる。javascriptの関数は全てthisを持っているが、新たに導入されたオブジェクト指向のthisと混合してしまうことがあり、実行時に明確化しないといけないときがある。ただ、使い方によっては、「汎用的な関数を作る」ために大きな助けとなるため、覚えておいたほうがよい。
●パターン1・・・イベント実行時、thisが何を指すか明確化する。
SAMPLE

---

<script language="javascript" type="text/javascript">

//クラスDogを定義
function Dog(name,speed,bark){
  this.name = name;
  this.speed = speed;
  this.bark = bark;

  this.barking = function(){
    alert(this.name + ' is barking "' + this.bark + '"');
  }

  this.running = function(){
    alert(this.name + ' is runnning "' + this.speed + '"');
  }
}

//定期的にdog.barkingを実行する。
var dog = new Dog('taro',10,'わんわん');
setTimeout(dog.barking.bind(dog),2000);


//bind実装されていないブラウザ向け
if(!Function.bind){
  Function.prototype.bind = function(scope){
    var _function = this;
    return function(){
      return _function.apply(scope,arguments);
    };
  }
}

</script>

---

setTimeoutが実行された場合、thisは、windowオブジェクトとなる。そのため、たとえクラスであってもbindを実行してthisを明確化しないといけない。




●パターン2・・・thisを束縛することで汎用的な関数を作ることができる。
onclickなどイベントで呼ばれる関数内のthisは、そのイベント実行した要素オブジェクトとなるが、bindでthisを変更することができる。関数の外で指定することができるので、汎用的な関数を作りやすくなる。
SAMPLE

---

<script language="javascript" type="text/javascript">

onload=function(){
  //ボタンのonclickイベントをテキストオブジェクトに変更する。
  document.forms['testForm'].elements['testButton'].onclick=alertThis.bind(document.forms['testForm'].elements['testText']);
}

function alertThis(e){
  alert(this.value);
}

//bind実装されていないブラウザ向け
if(!Function.bind){
  Function.prototype.bind = function(scope){
    var _function = this;
    return function(){
      return _function.apply(scope,arguments);
    };
  }
}
</script>

---