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实用基础超详细介绍
Apr 11 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
Jan 10 Javascript
url中的特殊符号有什么含义(推荐)
Jun 17 Javascript
浅谈JS继承_寄生式继承 & 寄生组合式继承
Aug 16 Javascript
bootstrap输入框组件使用方法详解
Jan 19 Javascript
JS中Safari浏览器中的Date
Jul 17 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
May 31 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
Feb 21 Javascript
浏览器事件循环与vue nextTicket的实现
Apr 16 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
Sep 25 Javascript
vue之封装多个组件调用同一接口的案例
Aug 11 Javascript
JS实现超级好看的鼠标小尾巴特效
Dec 01 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
smarty静态实验表明,网络上是错的~呵呵
2006/11/25 PHP
php中看实例学正则表达式
2006/12/25 PHP
thinkphp实现图片上传功能分享
2014/03/04 PHP
thinkphp普通查询与表达式查询实例分析
2014/11/24 PHP
php和asp语法上的区别总结
2019/05/12 PHP
复制本贴标题和地址的js代码
2008/07/01 Javascript
JQuery从头学起第一讲
2010/07/04 Javascript
在网页中使用document.write时遭遇的奇怪问题
2010/08/24 Javascript
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
JavaScript优化专题之Loading and Execution加载和运行
2016/01/20 Javascript
浅谈几种常用的JS类定义方法
2016/06/08 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
2016/06/22 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
关于js函数解释(包括内嵌,对象等)
2016/11/20 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
2016/11/26 Javascript
Vue.js路由vue-router使用方法详解
2017/03/20 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
2018/07/09 Javascript
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
vue多次循环操作示例
2019/02/08 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
2019/04/19 Javascript
jquery实现二级导航下拉菜单效果实例
2019/05/14 jQuery
es6 for循环中let和var区别详解
2020/01/12 Javascript
[02:56]DOTA2英雄基础教程 巨魔战将
2013/12/10 DOTA
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
Python探索之Metaclass初步了解
2017/10/28 Python
La Redoute英国官网:法国时尚品牌
2017/04/27 全球购物
SmartBuyGlasses意大利:购买太阳镜、眼镜和隐形眼镜
2018/11/20 全球购物
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
毕业自我评价
2014/02/05 职场文书
公路绿化方案
2014/05/12 职场文书
股权转让协议书
2014/12/07 职场文书
会议欢迎词范文
2015/01/27 职场文书
时尚女魔头观后感
2015/06/04 职场文书
贷款担保书范本
2015/09/22 职场文书
python实现Thrift服务端的方法
2021/04/20 Python
python中的被动信息搜集
2021/04/29 Python