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 相关文章推荐
javascript 写类方式之五
Jul 05 Javascript
Javascript 设计模式(二) 闭包
May 26 Javascript
实例分析javascript中的call()和apply()方法
Nov 28 Javascript
PHPExcel中的一些常用方法汇总
Jan 23 Javascript
JavaScript设置body高度为浏览器高度的方法
Feb 09 Javascript
JavaScript实现数字数组正序排列的方法
Apr 06 Javascript
js制作网站首页图片轮播特效代码
Aug 30 Javascript
浅析JavaScript中break、continue和return的区别
Nov 30 Javascript
vue watch监听对象及对应值的变化详解
Feb 24 Javascript
微信小程序自定义组件之可清除的input组件
Jul 17 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 Javascript
Vue-resource安装过程及使用方法解析
Jul 21 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.MVC的模板标签系统(一)
2006/09/05 PHP
php设计模式之命令模式的应用详解
2013/05/21 PHP
php警告Creating default object from empty value 问题的解决方法
2014/04/02 PHP
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
php图片上传类 附调用方法
2016/05/15 PHP
PHP下载文件的函数实例代码
2016/05/18 PHP
java微信开发之上传下载多媒体文件
2016/06/24 PHP
建立良好体验度的Web注册系统ajax
2007/07/09 Javascript
js使用ajax读博客rss示例
2014/05/06 Javascript
使用js画图之饼图
2015/01/12 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
Bootstrap基本布局实现方法详解
2016/11/25 Javascript
AngularJS 文件上传控件 ng-file-upload详解
2017/01/13 Javascript
BootStrap select2 动态改变值的方法
2017/02/10 Javascript
javascript实现动态显示颜色块的报表效果
2017/04/10 Javascript
Three.js基础学习之场景对象
2017/09/27 Javascript
JavaScript数组push方法使用注意事项
2017/10/30 Javascript
webpack4 升级迁移的实现
2018/09/12 Javascript
vue项目设置scrollTop不起作用(总结)
2018/12/21 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
js核心基础之构造函数constructor用法实例分析
2019/05/11 Javascript
js实现超级玛丽小游戏
2020/03/18 Javascript
[01:04:20]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.29
2020/12/02 DOTA
Python操作列表之List.insert()方法的使用
2015/05/20 Python
Python实现多进程的四种方式
2019/02/22 Python
Python代码实现http/https代理服务器的脚本
2019/08/12 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
python批量生成条形码的示例
2020/10/10 Python
strstr()的简单实现
2013/09/26 面试题
乡文化站暑期培训方案
2014/08/28 职场文书
防火标语大全
2014/10/06 职场文书
大学军训决心书
2015/02/05 职场文书
老公保证书怎么写
2015/02/26 职场文书
整脏治乱工作简报
2015/07/21 职场文书
感谢信
2019/04/11 职场文书
浅谈Web Storage API的使用
2021/06/23 Javascript