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 相关文章推荐
代码生成器 document.write()
Apr 15 Javascript
善用事件代理,警惕闭包的性能陷阱。
Jan 20 Javascript
jQuery中获取Radio元素值的方法
Jul 02 Javascript
Perl Substr()函数及函数的应用
Dec 16 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
Aug 25 Javascript
微信小程序 http请求详细介绍
Oct 09 Javascript
微信小程序  audio音频播放详解及实例
Nov 02 Javascript
js实现打地鼠小游戏
Feb 13 Javascript
vue写h5页面的方法总结
Feb 12 Javascript
axios实现简单文件上传功能
Sep 25 Javascript
vue+node 实现视频在线播放的实例代码
Oct 19 Javascript
ant design vue datepicker日期选择器中文化操作
Oct 28 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正则提取或替换img标记属性
2013/06/26 PHP
PHP判断变量是否为0的方法
2014/02/08 PHP
PHP中可以自动分割查询字符的Parse_str函数使用示例
2014/07/25 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
javascript 闭包疑问
2010/12/30 Javascript
href下载文件根据id取url并下载
2014/05/28 Javascript
javascript删除元素节点removeChild()用法实例
2015/05/26 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
每天一篇javascript学习小结(Date对象)
2015/11/13 Javascript
原生js实现tab选项卡切换
2020/03/23 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
2017/03/09 Javascript
vue打包后显示空白正确处理方法
2017/11/01 Javascript
jQuery操作选中select下拉框的值代码实例
2020/02/07 jQuery
vue实现的多页面项目如何优化打包的步骤详解
2020/07/19 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
详解Python中的join()函数的用法
2015/04/07 Python
通过pycharm使用git的步骤(图文详解)
2019/06/13 Python
python 实现的发送邮件模板【普通邮件、带附件、带图片邮件】
2019/07/06 Python
python按比例随机切分数据的实现
2019/07/11 Python
Python将文字转成语音并读出来的实例详解
2019/07/15 Python
Python urlencode和unquote函数使用实例解析
2020/03/31 Python
Python3 用matplotlib绘制sigmoid函数的案例
2020/12/11 Python
文秘专业毕业生就业推荐信
2013/11/08 职场文书
优秀员工个人的自我评价
2013/11/29 职场文书
分居协议书范本(律师见证版)
2014/11/26 职场文书
工作简历自我评价
2015/03/11 职场文书
2015年禁毒工作总结
2015/04/30 职场文书
中学社团活动总结
2015/05/07 职场文书
甲午风云观后感
2015/06/02 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
2019最新校园运动会广播稿!
2019/06/28 职场文书
七年级作文(600字3篇)
2019/09/24 职场文书
JavaScript实现两个数组的交集
2022/03/25 Javascript
windows系统搭建WEB服务器详细教程
2022/08/05 Servers