javascript中bind函数的作用实例介绍_javascript技巧-js教程-PHP中文网

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

php中文网

发布： 2016-05-16 16:34:59

原创

1431人浏览过

<!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可以实现此方法。

PHP5 和 MySQL 圣经

本书是全面讲述PHP与MySQL的经典之作，书中不但全面介绍了两种技术的核心特性，还讲解了如何高效地结合这两种技术构建健壮的数据驱动的应用程序。本书涵盖了两种技术新版本中出现的最新特性，书中大量实际的示例和深入的分析均来自于作者在这方面多年的专业经验，可用于解决开发者在实际中所面临的各种挑战。

466

查看详情

立即学习“Java免费学习笔记（深入）”；

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 &#63; 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 );

将类似数组转换为数组

大家都在看：

三维图形渲染_javascriptWebGL应用 JavaScript工具库开发_Lodash源码分析 JavaScriptWASM集成_Rust与C++模块混编指南 JavaScript包管理_Npm与Yarn依赖管理 JavaScript反射机制_元数据编程技巧