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


Posted in Javascript onSeptember 28, 2014
<!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 );

将类似数组转换为数组
Javascript 相关文章推荐
javascript SocialHistory 检查访问者是否访问过某站点
Aug 02 Javascript
javascript学习笔记(一) 在html中使用javascript
Jun 18 Javascript
jquery实现div拖拽宽度示例代码
Jul 31 Javascript
一个字符串反转函数可实现字符串倒序
Sep 15 Javascript
一个不错的js html页面倒计时可精确到秒
Oct 22 Javascript
JavaScript中匿名函数的递归调用
Jan 22 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
使用javaScript实现鼠标拖拽事件
Apr 03 Javascript
vue 自定义 select内置组件
Apr 10 Javascript
你了解vue3.0响应式数据怎么实现吗
Jun 07 Javascript
JavaScript静态作用域和动态作用域实例详解
Jun 17 Javascript
js和jquery如何获取图片真实的宽度和高度
Sep 28 #Javascript
一个jquery实现的不错的多行文字图片滚动效果
Sep 28 #Javascript
IE中getElementsByName()对有些元素无效的解决方案
Sep 28 #Javascript
js propertychange和oninput事件
Sep 28 #Javascript
javascript检测是否联网的实现代码
Sep 28 #Javascript
javascript检测浏览器的缩放状态实现代码
Sep 28 #Javascript
Node.js中使用mongoskin操作mongoDB实例
Sep 28 #Javascript
You might like
修改Zend引擎实现PHP源码加密的原理及实践
2008/04/14 PHP
PHP实现自动识别Restful API的返回内容类型
2015/02/07 PHP
PHP数组函数知识汇总
2016/05/12 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
PHP实现webshell扫描文件木马的方法
2017/07/31 PHP
PHP中单例模式的使用场景与使用方法讲解
2019/03/18 PHP
laravel5.2表单验证,并显示错误信息的实例
2019/09/29 PHP
jquery 仿QQ校友的DIV模拟窗口效果源码
2010/03/24 Javascript
一个简单的瀑布流效果(主体形式自写)
2013/05/27 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
2014/05/04 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
Js的Array数组对象详解
2016/02/22 Javascript
Bootstrap表单布局
2016/07/19 Javascript
Vue.js路由组件vue-router使用方法详解
2016/12/02 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
@ResponseBody 和 @RequestBody 注解的区别
2017/03/08 Javascript
Linux Centos7.2下安装nodejs&amp;npm配置全局路径的教程
2018/05/15 NodeJs
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
如何实现一个webpack模块解析器
2018/10/24 Javascript
微信小程序rich-text富文本用法实例分析
2019/05/20 Javascript
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
2020/04/08 Javascript
[00:32]2018DOTA2亚洲邀请赛iG出场
2018/04/03 DOTA
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
在Python 中实现图片加框和加字的方法
2019/01/26 Python
Tensorflow实现在训练好的模型上进行测试
2020/01/20 Python
使用遗传算法求二元函数的最小值
2020/02/11 Python
使用OpenCV获取图像某点的颜色值,并设置某点的颜色
2020/06/02 Python
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
TCP/IP的分层模型
2013/10/27 面试题
50岁生日感言
2014/01/23 职场文书
学生自我评语大全
2014/04/18 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
法律意见书范文
2015/05/20 职场文书
python解决12306登录验证码的实现
2021/04/18 Python
画错魏国疆域啦!《派对咖孔明》动画因作画失误于官网致歉
2022/04/07 日漫