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 相关文章推荐
jQuery实现Meizu魅族官方网站的导航菜单效果
Sep 14 Javascript
快速解决js中window.location.href不工作的问题
Nov 02 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
Dec 09 Javascript
BootStrap实现鼠标悬停下拉列表功能
Feb 17 Javascript
JavaScript实现时间表动态效果
Jul 15 Javascript
通过示例彻底搞懂js闭包
Aug 10 Javascript
JS实现对json对象排序并删除id相同项功能示例
Apr 18 Javascript
Node 升级到最新稳定版的方法分享
May 17 Javascript
微信小程序实现的一键复制功能示例
Apr 24 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
使用原生JS实现滚轮翻页效果的示例代码
May 31 Javascript
vue+elementUI实现简单日历功能
Sep 24 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
Content-type 的说明
2006/10/09 PHP
了解Joomla 这款来自国外的php网站管理系统
2010/03/11 PHP
php读取二进制流(C语言结构体struct数据文件)的深入解析
2013/06/13 PHP
php中文验证码实现示例分享
2014/01/12 PHP
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
php求数组全排列,元素所有组合的方法
2016/05/05 PHP
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
JavaScript词法作用域与调用对象深入理解
2012/11/29 Javascript
JS获取键盘上任意按键的值(实例代码)
2013/11/12 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
2014/01/07 Javascript
js函数参数设置默认值的一种变通实现方法
2014/05/26 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
js控制多图左右滚动切换效果代码分享
2015/08/26 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
2016/07/01 Javascript
Nodejs中 npm常用命令详解
2016/07/04 NodeJs
深入浅出ES6新特性之函数默认参数和箭头函数
2016/08/01 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
2018/01/02 jQuery
jQuery实现标签子元素的添加和赋值方法
2018/02/24 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
2019/02/27 jQuery
详解JS实现系统登录页的登录和验证
2019/04/29 Javascript
解决echarts数据二次渲染不成功的问题
2020/07/20 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
[00:35]DOTA2上海特级锦标赛 Newbee战队宣传片
2016/03/03 DOTA
[02:32]【DOTA2亚洲邀请赛】iceice,梦开始的地方
2017/03/13 DOTA
Python实现豆瓣图片下载的方法
2015/05/25 Python
python difflib模块示例讲解
2017/09/13 Python
python+matplotlib实现鼠标移动三角形高亮及索引显示
2018/01/15 Python
python scrapy重复执行实现代码详解
2019/12/28 Python
Python itertools.product方法代码实例
2020/03/27 Python
Python中的Cookie模块如何使用
2020/06/04 Python
Python子进程subpocess原理及用法解析
2020/07/16 Python
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
韩语专业本科生求职信
2013/10/01 职场文书
创业计划书之酒店
2019/08/30 职场文书
深入理解CSS 中 transform matrix矩阵变换问题
2021/08/30 HTML / CSS