标签：style blog http color io os java ar sp
javascript的bind的作用
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 button {background-color:#0f0;} 7 </style> 8 </head> 9 <body> 10 <button id="button"> 按钮 </button> 11 <input type="text"> 12 <script> 13 var button = document.getElementById("button"); 14 button.onclick = function() { 15 alert(this.id); // 弹出button 16 }; 17 //可以看出上下文的this 为button 18 </script> 19 </body> 20 </html>
此时加入bind
1 var text = document.getElementById("text"); 2 var button = document.getElementById("button"); 3 button.onclick = function() { 4 alert(this.id); // 弹出button 5 }.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 );
将类似数组转换为数组
标签：style blog http color io os java ar sp
原文地址：http://www.cnblogs.com/mole/p/3994669.html
