javascript中bind函数的作用实例介绍

2019-11-20 14:05:22

字体：大中小

来源：转载

供稿：网友

<!DOCTYPE html><html><head><meta charset="utf-8"><style>button {background-color:#0f0;}</style></head><body><button id="button"> 按钮 </button><input type="text"><script>var button = document.getElementById("button");button.onclick = function() {alert(this.id); // 弹出button};//可以看出上下文的this 为button</script></body></html>

此时加入bind

复制代码代码如下:

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

此时会发现this改变为text

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

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;};}

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

复制代码代码如下:

slice = Array.prototype.slice,

或

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

将类似数组转换为数组

上一篇：js文件包含的几种方式介绍

下一篇：js和jquery如何获取图片真实的宽度和高度

学习交流

索泰发布一款GTX 1070 Mini迷你版本:小机

索泰发布一款GTX 1070 Mini迷你版本:小机箱大爱...

热门图片

猜你喜欢的新闻

猜你喜欢的关注