ie支持function.bind()方法实现代码


Posted in Javascript onDecember 27, 2012

前端开发者应该很清楚 Javscript 脚本的 function 函数对象可以通过 call 或 apply 方法,使其改变内部作用域(this)所指向的对象,实现更多可扩展的功能开发。ie 原生支持 function 对象的 call 和 apply 方法,在 firefox 或其它浏览器下也得到支持,但是 call 和 apply 方法是立即作用并执行,例如:

var func = function () { 
alert(this); 
}.apply(window);

当脚本解析引擎执行到这段代码时,会立即弹出对话框并显示 object 字符串。我们的初衷是想定义 func 方法作用在 window 对象域上,并在后期调用时再执行,但是 call 和 apply 方法并不能满足我们的初衷,它们会立即得到执行。

在 google 一番技术资料后,发现 firefox 原生支持一个 bind 方法,该方法很好的满足了我们的初衷,调用方法与 call 和 apply 一样,只是定义完成后,在后期调用时该方法才会执行。但是这个 bind 方法只有在 ie10 版本的浏览器才得到原生支持,低于该版本的浏览器下执行时会得到一个 undefined 的错误提示。于是只好再次上网 google 解决方案,功夫不负有心人,我们在 firefox 的开发站找到了解决方案,那就是增加 property 原型使得所有浏览器都能支持 bind 方法,代码如下:

if (!Function.prototype.bind) { 
Function.prototype.bind = function (oThis) { 
if (typeof this !== "function") { 
// closest thing possible to the ECMAScript 5 internal IsCallable function 
throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable"); 
} 
var aArgs = Array.prototype.slice.call(arguments, 1), 
fToBind = this, 
fNOP = function () {}, 
fBound = function () { 
return fToBind.apply(this instanceof fNOP && oThis 
? this 
: oThis, 
aArgs.concat(Array.prototype.slice.call(arguments))); 
}; 
fNOP.prototype = this.prototype; 
fBound.prototype = new fNOP(); 
return fBound; 
}; 
}

看懂这段代码需要点功底,我只是知道如何拿来用,如果哪位大牛有兴趣能够介绍一下这段源码的原理,不胜感激,谢谢!

单纯不是什么态度,而是一种满足。

Javascript 相关文章推荐
从零开始学习jQuery (八) 插播:jQuery实施方案
Feb 23 Javascript
鼠标事件延时切换插件
Mar 12 Javascript
jQuery1.5.1 animate方法源码阅读
Apr 05 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
May 07 Javascript
js和as的稳定传值问题解决
Jul 14 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
Oct 14 Javascript
理解javascript回调函数
Dec 28 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
Oct 27 Javascript
简述pm2常用命令集合及配置文件说明
May 30 Javascript
监控微信小程序中的慢HTTP请求过程详解
Jul 05 Javascript
vue项目引入ts步骤(小结)
Oct 31 Javascript
react项目从新建到部署的实现示例
Feb 19 Javascript
前后台交互过程中json格式如何解析以及如何生成
Dec 26 #Javascript
多个js与css文件的合并方法详细说明
Dec 26 #Javascript
JS打开图片另存为对话框实现代码
Dec 26 #Javascript
window.addEventListener来解决让一个js事件执行多个函数
Dec 26 #Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
Dec 26 #Javascript
JSON为什么那样红为什么要用json(另有洞天)
Dec 26 #Javascript
JS操作Cookies包括(读取添加与删除)
Dec 26 #Javascript
You might like
菜鸟学PHP之Smarty入门
2007/01/04 PHP
PHP中imagick函数的中文解释
2015/01/21 PHP
WordPress过滤垃圾评论的几种主要方法小结
2016/07/11 PHP
PHP实现将标点符号正则替换为空格的方法
2017/08/09 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
PHP实现唤起微信支付功能
2019/02/18 PHP
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
JavaScript操纵窗口的方法小结
2013/06/28 Javascript
html向js方法传递参数具体实现
2013/08/08 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
2014/02/13 Javascript
JavaScript数组前面插入元素的方法
2015/04/06 Javascript
JavaScript仿静态分页实现方法
2015/08/04 Javascript
详解jQuery中的empty、remove和detach
2016/04/11 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
2016/12/22 Javascript
angular4自定义组件详解
2017/09/28 Javascript
js中getBoundingClientRect的作用及兼容方案详解
2018/02/01 Javascript
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
vue实现搜索过滤效果
2019/05/28 Javascript
vue将后台数据时间戳转换成日期格式
2019/07/31 Javascript
JavaScript实现图片放大预览效果
2020/11/02 Javascript
Django与JS交互的示例代码
2017/08/23 Python
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
python3.4爬虫demo
2019/01/22 Python
Tensorflow不支持AVX2指令集的解决方法
2020/02/03 Python
python 实现两个npy档案合并
2020/07/01 Python
python 安装移动复制第三方库操作
2020/07/13 Python
Python创建自己的加密货币的示例
2021/03/01 Python
大学运动会入场词
2014/02/22 职场文书
儿童生日会策划方案
2014/05/15 职场文书
关键在于落实心得体会
2014/09/03 职场文书
财政局个人总结
2015/03/04 职场文书
任命通知范文
2015/04/21 职场文书
社区党员干部承诺书
2015/05/04 职场文书
《这片土地是神圣的》教学反思
2016/02/16 职场文书
MySQL高级进阶sql语句总结大全
2022/03/16 MySQL