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 相关文章推荐
js获取系统的根路径实现介绍
Sep 08 Javascript
node.js中的fs.closeSync方法使用说明
Dec 17 Javascript
纯javascript实现图片延时加载方法
Aug 21 Javascript
jquery实现树形菜单完整代码
Dec 29 Javascript
理解jquery事件冒泡
Jan 03 Javascript
JS动态添加选项案例分析
Oct 17 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
Nov 29 Javascript
node.js中express中间件body-parser的介绍与用法详解
May 23 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
Jul 25 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 Javascript
Vue.js点击切换按钮改变内容的实例讲解
Aug 22 Javascript
Vue 图片压缩并上传至服务器功能
Jan 15 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得到某段时间区间的时间戳 php定时任务
2012/04/12 PHP
PHP 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
PHP中使用CURL模拟登录并获取数据实例
2014/07/01 PHP
PHP的Yii框架入门使用教程
2016/02/15 PHP
jQuery 1.0.4 - New Wave Javascript(js源文件)
2007/01/15 Javascript
这段js代码得节约你多少时间
2011/12/20 Javascript
js 三级关联菜单效果实例
2013/08/13 Javascript
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
2015/03/18 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
轻松实现javascript图片轮播特效
2016/01/13 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
2016/08/15 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
2016/09/04 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
Bootstrap CSS组件之导航条(navbar)
2016/12/17 Javascript
详解Angular 4.x Injector
2017/05/04 Javascript
详解js访问对象的属性和方法
2018/10/25 Javascript
Vue项目安装插件并保存
2019/01/28 Javascript
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
JS 5种遍历对象的方式
2020/06/16 Javascript
js闭包和垃圾回收机制示例详解
2021/03/01 Javascript
利用Python查看目录中的文件示例详解
2017/08/28 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
解决TensorFlow GPU版出现OOM错误的问题
2020/02/03 Python
Python利用逻辑回归分类实现模板
2020/02/15 Python
Python图像处理库PIL的ImageGrab模块介绍详解
2020/02/26 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
巴西女装购物网站:Eclectic
2018/04/24 全球购物
乌克兰在线药房:Аптека24
2019/10/30 全球购物
英国奢华护肤、美容和Spa品牌:Temple Spa
2019/11/02 全球购物
护理目标管理责任书
2014/07/25 职场文书
责任书范本
2014/08/25 职场文书
党员国庆节演讲稿范文2014
2014/09/21 职场文书
酒店辞职信怎么写
2015/02/27 职场文书
2015年大学生实习评语
2015/03/25 职场文书
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python