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类定义语法,私有成员、受保护成员、静态成员等介绍
Dec 08 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
May 27 Javascript
Jquery easyUI 更新行示例
Mar 06 Javascript
JQuery获取表格数据示例代码
May 26 Javascript
一款由jquery实现的整屏切换特效
Sep 15 Javascript
JS+CSS实现仿新浪微博搜索框的方法
Feb 24 Javascript
jQuery 判断是否包含在数组中Array[]的方法
Aug 03 Javascript
微信小程序的分类页面制作
Jun 27 Javascript
详解Vue2 SSR 缓存 Api 数据
Nov 20 Javascript
Vue进度条progressbar组件功能
Apr 17 Javascript
Vue循环组件加validate多表单验证的实例
Sep 18 Javascript
使用jQuery实现购物车
Oct 29 jQuery
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
如何分别全角和半角以避免乱码
2006/10/09 PHP
php调用mysql数据 dbclass类
2011/05/07 PHP
php获取excel文件数据
2017/04/21 PHP
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
关于textarea提交的内容无法换行的解决办法
2013/04/09 Javascript
location.href用法总结(最主要的)
2013/12/27 Javascript
JQuery实现鼠标移动到图片上显示边框效果
2014/01/09 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
Bootstrap每天必学之导航组件
2016/04/25 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
2016/06/24 Javascript
JS中检测数据类型的几种方式及优缺点小结
2016/12/12 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
2017/01/13 Javascript
Javascript下拉刷新的简单实现
2017/02/14 Javascript
react native实现往服务器上传网络图片的实例
2017/08/07 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
基于jQuery实现挂号平台首页源码
2020/01/06 jQuery
Vue.js暴露方法给WebView的使用操作
2020/09/07 Javascript
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
[01:01:43]EG vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
asyncio 的 coroutine对象 与 Future对象使用指南
2016/09/11 Python
浅析Python数据处理
2018/05/02 Python
python实现微信定时每天和女友发送消息
2019/04/29 Python
利用python绘制中国地图(含省界、河流等)
2020/09/21 Python
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
美国摩托车头盔、零件、齿轮及配件商店:Cycle Gear
2019/06/12 全球购物
Why do we need Unit test
2013/01/03 面试题
市场部专员岗位职责
2013/11/30 职场文书
后勤工作职责
2013/12/22 职场文书
护士在校生自荐信
2014/02/01 职场文书
村干部培训方案
2014/05/02 职场文书
社区工作者演讲稿
2014/05/23 职场文书
煤矿安全生产月活动总结
2014/07/05 职场文书
五一劳动节演讲稿
2014/09/12 职场文书
一份没有按时交货失信于客户的检讨书
2014/09/19 职场文书
拯救大兵瑞恩观后感
2015/06/09 职场文书
关于感恩的歌曲整理(8首)
2019/08/14 职场文书