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 相关文章推荐
JSQL SQLProxy 的 php 版本代码
May 05 Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
Aug 28 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
Jul 02 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
May 05 Javascript
jQuery实现的网页左侧在线客服效果代码
Oct 23 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
Nov 17 Javascript
javascript实现图片轮播效果
Jan 20 Javascript
JavaScript实现页面无操作倒计时退出
Oct 22 Javascript
浅谈Angular路由复用策略
Oct 04 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
Aug 27 Javascript
JS实现图片拖拽交换效果
Nov 30 Javascript
Antd下拉选择,自动匹配功能的实现
Oct 24 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
非常不错的MySQL优化的8条经验
2008/03/24 PHP
有关PHP性能优化的介绍
2013/06/20 PHP
php通过数组实现多条件查询实现方法(字符串分割)
2014/05/06 PHP
javascript实现的动态添加表单元素input,button等(appendChild)
2007/11/24 Javascript
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
二行代码解决全部网页木马
2008/03/28 Javascript
jquery 批量上传图片实现代码
2010/01/28 Javascript
让你的CSS像Jquery一样做筛选的实现方法
2011/07/10 Javascript
caller和callee的区别介绍及演示结果
2013/03/10 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
JavaScript基础知识之方法汇总结
2016/01/24 Javascript
JavaScript实现简单的拖动效果
2016/07/02 Javascript
JS实现touch 点击滑动轮播实例代码
2017/01/19 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
Vue组件和Route的生命周期实例详解
2018/02/10 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
使用vue制作滑动标签
2019/09/21 Javascript
jQuery实现的上拉刷新功能组件示例
2020/05/01 jQuery
详解vue组件之间的通信
2020/08/30 Javascript
python基于右递归解决八皇后问题的方法
2015/05/25 Python
解决Python3.5+OpenCV3.2读取图像的问题
2018/12/05 Python
python读取图片的方式,以及将图片以三维数组的形式输出方法
2019/07/03 Python
Django自带日志 settings.py文件配置方法
2019/08/30 Python
MxNet预训练模型到Pytorch模型的转换方式
2020/05/25 Python
英国袜子店:Sock Shop
2017/01/11 全球购物
Expedia法国:全球最大在线旅游公司
2018/09/30 全球购物
武汉世纪畅想数字传播有限公司 .NET笔试题
2015/06/13 面试题
可靠的数据流传输TCP
2016/03/15 面试题
如何开启linux的ssh服务
2013/06/03 面试题
学前教育专业毕业生自荐信
2013/10/03 职场文书
实习工作表现评语
2014/12/31 职场文书
辞职信怎么写
2015/02/27 职场文书
机器人瓦力观后感
2015/06/12 职场文书
党风廉政建设心得体会(2016最新版)
2016/01/22 职场文书