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 css在IE和Firefox中区别分析
Feb 18 Javascript
js中的内部属性与delete操作符介绍
Aug 10 Javascript
jQuery 3.0中存在问题及解决办法
Jul 15 Javascript
AngularJS入门教程引导程序
Aug 18 Javascript
纯JavaScript手写图片轮播代码
Oct 20 Javascript
微信小程序  http请求封装详解及实例代码
Feb 15 Javascript
node.js中EJS 模板快速入门教程
May 08 Javascript
使用typescript开发angular模块并发布npm包
Apr 19 Javascript
Vue 让元素抖动/摆动起来的实现代码
May 31 Javascript
对vue 键盘回车事件的实例讲解
Aug 25 Javascript
基于React Native 0.52实现轮播图效果
Aug 25 Javascript
微信小程序全局变量功能与用法详解
Jan 22 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
用穿越火线快速入门php面向对象
2012/02/22 PHP
php时间戳格式化显示友好的时间函数分享
2014/10/21 PHP
Twig模板引擎用法入门教程
2016/01/20 PHP
PHP 构造函数和析构函数原理与用法分析
2020/04/21 PHP
IE6、IE7中获取Button元素的值的bug说明
2011/08/28 Javascript
JS中的prototype与面向对象的实例讲解
2013/05/22 Javascript
解析jquery获取父窗口的元素
2013/06/26 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
编写高性能Javascript代码的N条建议
2015/10/12 Javascript
深入学习jQuery Validate表单验证
2016/01/18 Javascript
原生JS实现旋转木马式图片轮播插件
2016/04/25 Javascript
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
JavaScript cookie详解及简单实例应用
2016/12/31 Javascript
knockoutjs模板实现树形结构列表
2017/07/31 Javascript
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
nodejs之koa2请求示例(GET,POST)
2018/08/07 NodeJs
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
Python 的 with 语句详解
2014/06/13 Python
python开发之字符串string操作方法实例详解
2015/11/12 Python
对Python中range()函数和list的比较
2018/04/19 Python
Python 循环语句之 while,for语句详解
2018/04/23 Python
Sanic框架安装与简单入门示例
2018/07/16 Python
Python中的上下文管理器相关知识详解
2019/09/19 Python
python类中super() 的使用解析
2019/12/19 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
CSS3中线性颜色渐变的一些实现方法
2015/07/14 HTML / CSS
财务副总经理工作职责
2013/11/25 职场文书
30年同学聚会邀请函
2014/01/25 职场文书
企业年会主持词
2014/03/27 职场文书
信息合作协议书
2014/10/09 职场文书
海南召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
HTML通过表单实现酒店筛选功能
2021/05/18 HTML / CSS
redis实现共同好友的思路详解
2021/05/26 Redis
Java 死锁解决方案
2022/05/11 Java/Android