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 相关文章推荐
让textarea控件的滚动条怎是位与最下方
Apr 20 Javascript
use jscript Create a SQL Server database
Jun 16 Javascript
json实现前后台的相互传值详解
Jan 05 Javascript
分享自己用JS做的扫雷小游戏
Feb 17 Javascript
JS Ajax请求如何防止重复提交
Jun 13 Javascript
JS制作类似选项卡切换的年历
Dec 03 Javascript
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
在vue项目中引入高德地图及其UI组件的方法
Sep 04 Javascript
你不可不知的Vue.js列表渲染详解
Oct 01 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
Nov 02 Javascript
jQuery实现动态操作table行
Nov 23 jQuery
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 目录与文件处理-郑阿奇(续)
2011/07/04 PHP
php调用方法mssql_fetch_row、mssql_fetch_array、mssql_fetch_assoc和mssql_fetch_objcect读取数据的区别
2012/08/08 PHP
PHP header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
php缩放图片(根据宽高的等比例缩放)实例介绍
2013/06/09 PHP
PHP防止注入攻击实例分析
2014/11/03 PHP
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
php轻松实现文件上传功能
2016/03/03 PHP
PHP使用curl模拟post上传及接收文件的方法
2016/03/04 PHP
php压缩文件夹最新版
2018/07/18 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题分析
2007/08/12 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
2010/09/19 Javascript
jQuery学习笔记 更改jQuery对象
2012/09/19 Javascript
js常用自定义公共函数汇总
2014/01/15 Javascript
jQuery的context属性用法实例
2014/12/27 Javascript
javascript计时器详解
2015/02/28 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
2016/02/21 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
JS查找英文文章中出现频率最高的单词
2017/03/20 Javascript
说说AngularJS中的$parse和$eval的用法
2017/09/14 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
2019/11/23 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
2020/03/07 Javascript
JavaScript代理模式原理与用法实例详解
2020/03/10 Javascript
[02:39]我与DAC之Newbee.Moogy:从论坛到TI
2018/03/26 DOTA
有关wxpython pyqt内存占用问题分析
2014/06/09 Python
python中字典dict常用操作方法实例总结
2015/04/04 Python
详解详解Python中writelines()方法的使用
2015/05/25 Python
如何优雅地改进Django中的模板碎片缓存详解
2018/07/04 Python
Sanic框架应用部署方法详解
2018/07/18 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
python组合无重复三位数的实例
2018/11/13 Python
解决python3 requests headers参数不能有中文的问题
2019/08/21 Python
开办饭店创业计划书
2013/12/28 职场文书
场地使用证明模板
2014/10/25 职场文书
Win11查看设备管理器
2022/04/19 数码科技