js bind 函数 使用闭包保存执行上下文


Posted in Javascript onDecember 26, 2011
window.name = "the window object" 
function scopeTest() { 
return this.name; 
} 
// calling the function in global scope: 
scopeTest() 
// -> "the window object" 
var foo = { 
name: "the foo object!", 
otherScopeTest: function() { return this.name } 
}; 
foo.otherScopeTest();// -> "the foo object!" 
var foo_otherScopeTest = foo.otherScopeTest; 
foo_otherScopeTest(); 
// ?> "the window object"

如果你希望将一个对象的函数赋值给另外一个变量后,这个函数的执行上下文仍然为这个对象,那么就需要用到bind方法。
bind的实现如下:
// The .bind method from Prototype.js 
Function.prototype.bind = function(){ 
var fn = this, args = Array.prototype.slice.call(arguments), object = args.shift(); 
return function(){ 
return fn.apply(object, 
args.concat(Array.prototype.slice.call(arguments))); 
}; 
};

使用示例:
var obj = { 
name: 'A nice demo', 
fx: function() { 
alert(this.name); 
} 
}; 
window.name = 'I am such a beautiful window!'; 
function runFx(f) { 
f(); 
} 
var fx2 = obj.fx.bind(obj); 
runFx(obj.fx); 
runFx(fx2);

参考:
http://www.prototypejs.org/api/function/bind
PS:
才发现prototypejs的API文档解释的这么详细,一定要花点时间多看看了。
我的简单的实现:
Function.prototype.bind = function(obj) { 
var _this = this; 
return function() { 
return _this.apply(obj, 
Array.prototype.slice.call(arguments)); 
} 
} 
var name = 'window', 
foo = { 
name:'foo object', 
show:function() { 
return this.name; 
} 
}; 
console.assert(foo.show()=='foo object', 
'expected foo object,actual is '+foo.show()); 
var foo_show = foo.show; 
console.assert(foo_show()=='window', 
'expected is window,actual is '+foo_show()); 
var foo_show_bind = foo.show.bind(foo); 
console.assert(foo_show_bind()=='foo object', 
'expected is foo object,actual is '+foo_show_bind());
Javascript 相关文章推荐
用javascript实现计算两个日期的间隔天数
Aug 14 Javascript
Jquery 设置标题的自动翻转
Oct 03 Javascript
Javascript延迟执行实现方法(setTimeout)
Dec 30 Javascript
基于dom编程中 动态创建与删除元素的使用
Apr 17 Javascript
浅析js封装和作用域
Jul 09 Javascript
js 针对html DOM元素操作等经验累积
Mar 11 Javascript
jquery使用jxl插件导出excel示例
Apr 14 Javascript
使用three.js 画渐变的直线
Jun 05 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
Nov 15 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
Jan 09 Javascript
ES6知识点整理之模块化的应用详解
Apr 15 Javascript
Vue3为什么这么快
Sep 23 Javascript
js 函数调用模式小结
Dec 26 #Javascript
JavaScript 原型继承
Dec 26 #Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
Dec 26 #Javascript
查看源码的工具 学习jQuery源码不错的工具
Dec 26 #Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
Dec 26 #Javascript
非常有用的40款jQuery 插件推荐(系列二)
Dec 25 #Javascript
JS代码优化技巧之通俗版(减少js体积)
Dec 23 #Javascript
You might like
PHP数组内存耗用太多问题的解决方法
2010/04/05 PHP
既简单又安全的PHP验证码 附调用方法
2016/06/02 PHP
PHP编写简单的App接口
2016/08/28 PHP
laravel 修改记住我功能的cookie保存时间的方法
2019/10/14 PHP
PHP变量的作用范围实例讲解
2020/12/22 PHP
jquery表单验证需要做些什么
2015/11/17 Javascript
JavaScript学习笔记整理之引用类型
2016/01/22 Javascript
超实用的JavaScript代码段 附使用方法
2016/05/22 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
配置nodejs环境的方法
2017/05/13 NodeJs
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
2017/10/14 jQuery
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
基于Vue制作组织架构树组件
2017/12/06 Javascript
Node如何后台数据库使用增删改查功能
2019/11/21 Javascript
vue实现页面切换滑动效果
2020/06/29 Javascript
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python下MySQLdb用法实例分析
2015/06/08 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
Python 元组拆包示例(Tuple Unpacking)
2019/12/24 Python
解决tensorflow由于未初始化变量而导致的错误问题
2020/01/06 Python
如何使用Python进行PDF图片识别OCR
2021/01/22 Python
英国领先的在线旅游和休闲零售商:lastminute.com
2019/01/23 全球购物
Rhone官方网站:男士运动服装、健身服装和高级运动服
2019/05/01 全球购物
Linux文件系统类型
2012/09/16 面试题
vue项目实现分页效果
2021/03/24 Vue.js
司法建议书范文
2014/05/13 职场文书
八年级上册语文教学计划
2015/01/22 职场文书
外国人来华邀请函
2015/01/31 职场文书
小学端午节活动总结
2015/02/11 职场文书
2015年上半年物业工作总结
2015/03/30 职场文书
篮球赛新闻稿
2015/07/17 职场文书
2016年小学中秋节活动总结
2016/04/05 职场文书
el-table-column 内容不自动换行的解决方法
2022/08/14 Vue.js