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/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
Nov 25 Javascript
jquery制作居中遮罩层效果分享
Feb 21 Javascript
Javascript加载速度慢的解决方案
Mar 11 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
Oct 10 Javascript
jQuery中parents()方法用法实例
Jan 07 Javascript
基于javascript实现文字无缝滚动效果
Mar 22 Javascript
javascript中call,apply,bind函数用法示例
Dec 19 Javascript
Node.js安装配置图文教程
May 10 Javascript
微信小程序自定义导航栏实例代码
Apr 05 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
Jun 19 Javascript
jquery分页优化操作实例分析
Aug 23 jQuery
浅谈vue中$event理解和框架中在包含默认值外传参
Aug 07 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
PHP 数组和字符串互相转换实现方法
2013/03/26 PHP
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
PHP原生函数一定好吗?
2014/12/08 PHP
thinkPHP5.0框架命名空间详解
2017/03/18 PHP
一个轻量级的javascript库 pj介绍
2010/12/19 Javascript
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
2013/03/31 Javascript
jQuery 三击事件实现代码
2013/09/11 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
js实现div弹出层的方法
2014/11/20 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
浅谈jQuery中的事件
2015/03/23 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
2017/01/22 Javascript
详解webpack打包vue时提取css
2017/05/26 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
2019/03/11 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
2019/06/10 Javascript
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
Python 内置函数complex详解
2016/10/23 Python
python使用PyCharm进行远程开发和调试
2017/11/02 Python
Django分页功能的实现代码详解
2019/07/29 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
解决pytorch DataLoader num_workers出现的问题
2020/01/14 Python
Python通过zookeeper实现分布式服务代码解析
2020/07/22 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
Yahoo-PHP面试题2
2014/12/06 面试题
介绍一下Java的事务处理
2012/12/07 面试题
毕业自我评价范文
2013/11/17 职场文书
财务担保书范文
2014/04/02 职场文书
班风学风建设方案
2014/05/06 职场文书
优秀共产党员先进事迹材料
2014/05/06 职场文书
采购员岗位职责
2015/02/03 职场文书
读《茶花女》有感:山茶花的盛开与凋零
2020/01/17 职场文书
Vue实现跑马灯样式文字横向滚动
2021/11/23 Vue.js