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 常见开发使用技巧总结
Dec 26 Javascript
javascript 系统文件夹文件操作及参数介绍
Jan 08 Javascript
在JavaScript中处理字符串之link()方法的使用
Jun 08 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
Oct 10 Javascript
Jquery实时监听input value的实例
Jan 26 Javascript
浅析bootstrap原理及优缺点
Mar 19 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
你或许不知道的一些npm实用技巧
Jul 04 Javascript
详解element-ui中el-select的默认选择项问题
Aug 02 Javascript
vue实现列表滚动的过渡动画
Jun 29 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
Javascript中的解构赋值语法详解
Apr 02 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.ini中文版
2006/10/09 PHP
生成sessionid和随机密码的例子
2006/10/09 PHP
php 魔术函数使用说明
2010/02/21 PHP
5种PHP创建数组的实例代码分享
2014/01/17 PHP
PHP产生不重复随机数的5个方法总结
2014/11/12 PHP
PHP生成压缩文件实例
2015/02/07 PHP
深入理解PHP变量的值类型和引用类型
2015/10/21 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
实例讲解PHP表单验证功能
2019/02/15 PHP
jquery foreach使用示例
2013/09/12 Javascript
js触发onchange事件的方法说明
2014/03/08 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
多个jQuery版本共存的处理方案
2015/03/17 Javascript
浅谈angularJS 作用域
2015/07/05 Javascript
js时间控件只显示年月
2017/01/08 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
JS基于ES6新特性async await进行异步处理操作示例
2019/02/02 Javascript
微信小程序收货地址API兼容低版本解决方法
2019/05/18 Javascript
jQuery实现全选按钮
2021/01/01 jQuery
python和shell实现的校验IP地址合法性脚本分享
2014/10/23 Python
解决uWSGI的编码问题详解
2017/03/24 Python
Python yield 使用方法浅析
2017/05/20 Python
Linux下Python安装完成后使用pip命令的详细教程
2018/11/22 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
如何快速一次性卸载所有python包(第三方库)呢
2020/10/20 Python
美国专业消费电子及摄影器材网站:B&H Photo Video
2019/12/18 全球购物
Linux面试题LINUX系统类
2014/11/19 面试题
会计助理的岗位职责
2013/11/29 职场文书
考试诚信承诺书
2014/05/23 职场文书
减负增效提质方案
2014/05/23 职场文书
安全第一课观后感
2015/06/18 职场文书
葬礼主持词
2015/07/02 职场文书
《自然之道》读后感3篇
2019/12/17 职场文书
详解python中[-1]、[:-1]、[::-1]、[n::-1]使用方法
2021/04/25 Python
Java新手教程之ArrayList的基本使用
2021/06/20 Java/Android
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android