javascript之bind使用介绍


Posted in Javascript onOctober 09, 2011

前几天看到一个面试题,题目是这样的:
请你说说对javascript中apply,call,bind的理解?
首先apply和call是老生常谈的东西,但是对于bind,我愣了下,因为这个词是jquery中使用频率很高的一个方法,用来给DOM元素绑定事件用的。
为了搞清这个陌生又熟悉的bind,google一下,发现javascript1.8.5版本中原生实现了此方法,目前IE9+,ff4+,chrome7+支持此方法,opera和safari不支持(MDN上的说明)。
bind的作用和apply,call类似都是改变函数的execute context,也就是runtime时this关键字的指向。但是使用方法略有不同。一个函数进行bind后可稍后执行。
例子如下:

var person = { 
name: 'Andrew', 
job: 'web front end developer', 
gender: 'male', 
sayHello: function() { 
return 'Hi, I am ' + this.name + ', a ' + this.job; 
} 
} 
console.log(person.sayHello()); // Hi, I am Andrew, a web front end developer 
var anotherGuySayHello = person.sayHello.bind({ 
name:'Alex', 
job: 'back end C# developer' 
}); 
console.log(anotherGuySayHello()); // Hi, I am Alex, a back end C# developer

另外带有参数的例子:
function add(arg1, arg2, arg3, arg4) { 
return arg1 + ' ' + arg2 + ' ' + arg3 + ' ' + arg4; 
} 
var addMore = add.bind({}, 'a', 'b'); 
console.log(addMore('c', 'd')); // a b c d

如果你的浏览器暂时不支持此方法,但你又觉得这个很cool,想用,MDN上也给出参考实现, 这个实现很有意思,代码如下:
if(!Function.prototype.bind) { 
Function.prototype.bind = function(oThis) { 
if(typeof this !== 'function') { 
throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable'); 
} 
var fSlice = Array.prototype.slice, 
aArgs = fSlice.call(arguments, 1), 
fToBind = this, 
fNOP = function() {}, 
fBound = function() { 
return fToBind.apply(this instanceof fNOP ? this : oThis || window, aArgs.concat(fSlice.call(arguments))); 
}; 
fNOP.prototype = this.prototype; 
fBound.prototype = new fNOP(); 
return fBound; 
}; 
}

最后几行代码,通过prototype chain的方式,其中fBound是调用bind函数的子类,为什么这么实现,可以仔细看 fBound = function(){ return ... }这一部分,其中this是运行时决定的,这里主要考虑到如果用new的方式来调用函数(构造函数方式)的情况。
下面的例子,就能很好的说明这点,为了方便说明,此例子直接来自MDN:
function Point(x,y) { 
this.x = x; 
this.y = y; 
} 
Point.prototype.toString = function() { 
return this.x + ',' + this.y; 
}; 
var p = new Point(1, 2); 
p.toString(); // 1,2 
var emptyObj = {}; 
var YAxisPoint = Point.bind(emptyObj, 0); 
var axisPoint = new YAxisPoint(5); 
axisPoint.toString(); // 0, 5 
axisPoint instanceof Point; // true 
axisPoint instanceof YAxisPoint; // true

最后给出文章链接,方便您进一步了解
MDN: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind

MSDN: http://msdn.microsoft.com/en-us/library/ff841995%28v=vs.94%29.aspx
Javascript 相关文章推荐
jQuery对象和DOM对象使用说明
Jun 25 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
Dec 07 Javascript
JQuery实现展开关闭层的方法
Feb 17 Javascript
JavaScript设计模式学习之“类式继承”
Mar 12 Javascript
浅谈Javascript数组索引
Jul 29 Javascript
JavaScript 消息框效果【实现代码】
Apr 27 Javascript
微信小程序 http请求详细介绍
Oct 09 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
Feb 27 Javascript
js仿微信公众平台打标签功能
Apr 08 Javascript
Vue.js实现输入框绑定的实例代码
Aug 24 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
Oct 27 Javascript
Vue CLI3基础学习之pages构建多页应用
Jun 02 Javascript
javascript之querySelector和querySelectorAll使用说明
Oct 09 #Javascript
使用jQuery操作Cookies的实现代码
Oct 09 #Javascript
jQuery实现切换页面布局使用介绍
Oct 09 #Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
Oct 08 #Javascript
关于jQuery的inArray 方法介绍
Oct 08 #Javascript
imgAreaSelect 中文文档帮助说明
Oct 08 #Javascript
JavaScript判断一个URL链接是否有效的实现方法
Oct 08 #Javascript
You might like
编译php 5.2.14+fpm+memcached(具体操作详解)
2013/06/18 PHP
ThinkPHP3.1的Widget新用法
2014/06/19 PHP
Yii2单元测试用法示例
2016/11/12 PHP
javascript模仿msgbox提示效果代码
2008/06/10 Javascript
js select常用操作控制代码
2010/03/16 Javascript
IE8 chrome中table隔行换色解决办法
2010/07/09 Javascript
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
jQuery Ajax提交表单查询获得数据实例代码
2012/09/19 Javascript
JavaScript的事件绑定(方便不支持js的时候)
2013/10/01 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
基于原生JS实现图片裁剪
2016/08/01 Javascript
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
微信小程序 图片边框解决方法
2017/01/16 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
javascript兼容性(实例讲解)
2017/08/15 Javascript
基于Vue实现拖拽效果
2018/04/27 Javascript
pageGroup.js实现分页功能
2019/07/27 Javascript
layui 表单标签的校验方法
2019/09/04 Javascript
策略模式实现 Vue 动态表单验证的方法
2019/09/16 Javascript
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
从django的中间件直接返回请求的方法
2018/05/30 Python
在NumPy中创建空数组/矩阵的方法
2018/06/15 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
浅谈python之自动化运维(Paramiko)
2020/01/31 Python
Python如何实现单例模式
2016/06/03 面试题
求职简历的自我评价怎样写好
2013/10/07 职场文书
护理专业推荐信
2013/11/07 职场文书
高中军训广播稿
2014/01/14 职场文书
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
高职教师先进事迹材料
2014/08/24 职场文书
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
国际贸易本科毕业生求职信
2014/09/26 职场文书
汤姆叔叔的小屋读书笔记
2015/06/30 职场文书
MySql分区类型及创建分区的方法
2022/04/13 MySQL