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 相关文章推荐
IE innerHTML,outerHTML所引起的问题
Jun 04 Javascript
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
Dec 03 Javascript
js写一个弹出层并锁屏效果实现代码
Dec 07 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
Jan 02 Javascript
js实现图片拖动改变顺序附图
May 13 Javascript
node.js中的Socket.IO使用实例
Nov 04 Javascript
JavaScript生成SQL查询表单的方法
Aug 13 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
May 15 Javascript
BootStrap数据表格实例代码
Sep 13 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
Jan 09 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 Javascript
JS实现时间校验的代码
May 25 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
几种显示数据的方法的比较
2006/10/09 PHP
简单谈谈php中ob_flush和flush的区别
2014/11/27 PHP
在Linux系统的服务器上隐藏PHP版本号的方法
2015/06/06 PHP
PHP7.0安装笔记整理
2015/08/28 PHP
js静态作用域的功能。
2006/12/25 Javascript
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
2011/10/23 Javascript
Javascript算符的优先级介绍
2013/03/20 Javascript
在每个匹配元素的外部插入新元素的方法
2013/12/20 Javascript
JavaScript中发布/订阅模式的简单实例
2014/11/05 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
JS监控关闭浏览器操作的实例详解
2017/09/12 Javascript
JS简单生成由字母数字组合随机字符串示例
2018/05/25 Javascript
layer.confirm取消按钮绑定事件的方法
2018/08/17 Javascript
JS判断用户用的哪个浏览器实例详解
2018/10/09 Javascript
Angular刷新当前页面的实现方法
2018/11/21 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
2019/01/18 Javascript
vue实现百度下拉列表交互操作示例
2019/03/12 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
关于Django显示时间你应该知道的一些问题
2017/12/25 Python
python实现Excel文件转换为TXT文件
2019/04/28 Python
Python搭建代理IP池实现检测IP的方法
2019/10/27 Python
Series和DataFrame使用简单入门
2019/11/13 Python
浅析Python数字类型和字符串类型的内置方法
2019/12/22 Python
python实现信号时域统计特征提取代码
2020/02/26 Python
python代码实现将列表中重复元素之间的内容全部滤除
2020/05/22 Python
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
英国内衣连锁店:Boux Avenue
2018/01/24 全球购物
某公司C#程序员面试题笔试题
2014/05/26 面试题
线程问题:wait()方法是定义在哪个类里面
2015/07/07 面试题
中学生学雷锋活动心得体会
2014/03/10 职场文书
百日安全活动总结
2014/05/04 职场文书
MySQL查看表和清空表的常用命令总结
2021/05/26 MySQL
在js中修改html body的样式
2021/11/11 Javascript
JavaScript获取URL参数的方法分享
2022/04/07 Javascript
MySQL如何使备份得数据保持一致
2022/05/02 MySQL