javascriptの中でbind関数の作用の実例は紹介します.

    


var button = document.getElementById("button");
button.onclick = function() {
alert(this.id); //   button
};
//        this  button

この時、ビッドに加入する

 
  
  var text = document.getElementById("text"); 
  
  var button = document.getElementById("button"); 
  
  button.onclick = function() { 
  
  alert(this.id); //   button 
  
  }.bind(text); 
  
  //        this  button 
  
 
 

この時、thisがtextに変化することが分かります.
函数字面量にも適用されていますが、上下方向の不変性を維持することが目的です.

var obj = {
color: "#ccc", 
element: document.getElementById('text'),
events: function() {
document.getElementById("button").addEventListener("click", function(e) {
console.log(this);
this.element.style.color = this.color;
}.bind(this))
return this;
},
init: function() {
this.events();
}
};
obj.init();

ボタンtextを押すと字が変色します.thisはbuttonではなくobjです.
bind()の方法はie,6,7,8では適用されず,拡張が必要な場合はFunction prototypeを拡張することによりこの方法を実現できる.

if (!Function.prototype.bind) {

Function.prototype.bind = function(obj) {
var slice = [].slice, args = slice.call(arguments, 1), self = this, nop = function() {
}, bound = function() {
return self.apply(this instanceof nop ? this : (obj || {}),
args.concat(slice.call(arguments)));
};

nop.prototype = self.prototype;

bound.prototype = new nop();

return bound;
};
}

ここでie 6,7,8の中にもbind()がサポートされているのが見えます.

 
  
 slice = Array.prototype.slice, 
  
 
  
   
  
 
  
 array = Array.prototype.slice.call( array, 0 ); 
  
 
 

類似配列を行列に変換