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 相关文章推荐
文本框输入时 实现自动提示(像百度、google一样)
Apr 05 Javascript
js改变文章字体大小的实例代码
Nov 27 Javascript
JavaScript模块随意拖动示例代码
May 27 Javascript
jQuery的css()方法用法实例
Dec 24 Javascript
JavaScript使用addEventListener添加事件监听用法实例
Jun 01 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
May 24 Javascript
详解Vue整合axios的实例代码
Jun 21 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
Nov 22 Javascript
vue+iview 兼容IE11浏览器的实现方法
Jan 07 Javascript
微信小程序云开发之新手环境配置
May 16 Javascript
微信小程序webSocket的使用方法
Feb 20 Javascript
原生JS实现拖拽效果
Dec 04 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中mysqli_affected_rows作用行数返回值分析
2014/12/26 PHP
thinkphp5.0整合phpsocketio完整攻略(绕坑)
2018/10/12 PHP
刷新时清空文本框内容的js代码
2007/04/23 Javascript
表单元素事件 (Form Element Events)
2009/07/17 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
2014/08/18 Javascript
jQuery选择器源码解读(七):elementMatcher函数
2015/03/31 Javascript
js获取字符串字节数方法小结
2015/06/09 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
JS button按钮实现submit按钮提交效果
2016/11/01 Javascript
javascript中this关键字详解
2016/12/12 Javascript
js中开关变量使用实例
2017/02/24 Javascript
layui前段框架日期控件使用方法详解
2017/05/19 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
react-native动态切换tab组件的方法
2018/07/07 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
2019/03/29 Javascript
JS大坑之19位数的Number型精度丢失问题详解
2019/04/22 Javascript
vue.js 实现a标签href里添加参数
2019/11/12 Javascript
vue-cli3.X快速创建项目的方法步骤
2019/11/14 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
2020/07/17 Javascript
解决vue scoped html样式无效的问题
2020/10/24 Javascript
原生js中运算符及流程控制示例详解
2021/01/05 Javascript
粗略分析Python中的内存泄漏
2015/04/23 Python
Python简单删除目录下文件以及文件夹的方法
2015/05/27 Python
python实现网站的模拟登录
2016/01/04 Python
Python多线程编程之多线程加锁操作示例
2018/09/06 Python
python 实现对文件夹中的图像连续重命名方法
2018/10/25 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
DKNY品牌官网:纽约大都会时尚风格
2016/10/20 全球购物
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
数学专业毕业生自荐信
2013/11/10 职场文书
暑期培训随笔感言
2014/03/10 职场文书
列车乘务员工作不细心检讨书
2014/10/07 职场文书
酒店辞职信怎么写
2015/02/27 职场文书
婚礼家长致辞
2015/07/27 职场文书