javascript的bind的作用

1  2  3      4         
       5          8      9     10          按钮 11         12         19     20 

此时加入bind

1             var text = document.getElementById("text");2             var button = document.getElementById("button");3                 button.onclick = function() {4                     alert(this.id); // 弹出button5                 }.bind(text);6                 //可以看出上下文的this 为button

此时会发现this改变为text

函数字面量里也适用，目的是保持上下指向（this)不变。

1 var obj = { 2             color: "#ccc",         3             element: document.getElementById('text'), 4                     events: function() { 5                 document.getElementById("button").addEventListener("click", function(e) { 6                     console.log(this); 7                 this.element.style.color = this.color; 8                }.bind(this)) 9         return this;10     },11     init: function() {12         this.events();13     }14 };15    obj.init();

此时点击按钮text里的字会变色。可见this不为button而是obj。

bind（）的方法在ie,6,7,8中不适用，需要扩展通过扩展Function prototype可以实现此方法。

1  if (!Function.prototype.bind) { 2  3         Function.prototype.bind = function(obj) { 4             var slice = [].slice, args = slice.call(arguments, 1), self = this, nop = function() { 5             }, bound = function() { 6                 return self.apply(this instanceof nop ? this : (obj || {}), 7                         args.concat(slice.call(arguments))); 8             }; 9 10             nop.prototype = self.prototype;11 12             bound.prototype = new nop();13 14             return bound;15         };16     }

此时可以看到ie6,7,8中也支持bind()。

slice = Array.prototype.slice,

或

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

将类似数组转换为数组