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 相关文章推荐
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
Feb 23 Javascript
Javascript冒泡排序算法详解
Dec 03 Javascript
JavaScript获得url所有参数键值表的方法
Mar 21 Javascript
DOM 高级编程
May 06 Javascript
javascript中checkbox使用方法实例演示
Nov 19 Javascript
javascript类型系统 Window对象学习笔记
Jan 07 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
Apr 19 Javascript
详解微信小程序之提高应用速度小技巧
Jan 07 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
Feb 01 Javascript
Element MessageBox弹框的具体使用
Jul 27 Javascript
详解ES6 中的Object.assign()的用法实例代码
Jan 11 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/11/16 PHP
php中time()与$_SERVER[REQUEST_TIME]用法区别
2014/11/19 PHP
PHP使用mkdir创建多级目录的方法
2015/12/22 PHP
PHP生成及获取JSON文件的方法
2016/08/23 PHP
使用PHPExcel导出Excel表
2018/09/08 PHP
php使用goto实现自动重启swoole、reactphp、workerman服务的代码
2020/04/13 PHP
使用JQuery进行跨域请求
2010/01/25 Javascript
Javascript 函数中的参数使用分析
2010/03/27 Javascript
js获取视频时长代码
2014/04/10 Javascript
Javascript实现计算个人所得税
2015/05/10 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
详解Javascript事件驱动编程
2016/01/03 Javascript
JavaScript职责链模式概述
2016/09/17 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
AngularJS动态加载模块和依赖的方法分析
2016/11/08 Javascript
图片上传之FileAPI与NodeJs
2017/01/24 NodeJs
Java与JavaScript中判断两字符串是否相等的区别
2017/03/13 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
2018/11/15 Javascript
Python中for循环和while循环的基本使用方法
2015/08/21 Python
python实现Adapter模式实例代码
2018/02/09 Python
Python学习笔记之错误和异常及访问错误消息详解
2019/08/08 Python
HTML5自定义视频播放器源码
2020/01/06 HTML / CSS
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
应届毕业生就业自荐信
2013/10/26 职场文书
简历里的自我评价范文
2014/02/24 职场文书
个人贷款承诺书
2014/03/28 职场文书
2014年司法局工作总结
2014/12/11 职场文书
医院财务人员岗位职责
2015/04/14 职场文书
面试通知短信
2015/04/20 职场文书
千手观音观后感
2015/06/03 职场文书
python办公自动化之excel的操作
2021/05/23 Python
Python import模块的缓存问题解决方案
2021/06/02 Python
抖音动画片,皮皮虾,《治愈系》动画在用这首REMIX作为背景音乐,Anak ,The last world with you完整版
2022/03/16 杂记
Android开发 使用文件储存的方式保存QQ密码
2022/04/24 Java/Android
httpclient调用远程接口的方法
2022/08/14 Java/Android
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS