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

网络编程 2024/11/13 佚名

3 2 1

<!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 "codetitle">复制代码 代码如下:

slice = Array.prototype.slice,



或



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



将类似数组转换为数组

javascript,bind函数

标签：

javascript,bind函数

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“javascript中bind函数的作用实例介绍”

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

暂无“javascript中bind函数的作用实例介绍”评论...

更新动态

2024年11月13日

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

javascript,bind函数

js文件包含的几种方式介绍

js和jquery如何获取图片真实的宽度和高度

评论“javascript中bind函数的作用实例介绍”

更新动态

友情链接