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 相关文章推荐
JS 如果改变span标签的是否隐藏属性
Oct 06 Javascript
javascript真的不难-回顾一下基础知识
Jan 15 Javascript
JavaScript中的getTime()方法使用详解
Jun 10 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
Dec 01 Javascript
通过隐藏iframe实现无刷新上传文件操作
Mar 16 Javascript
javascript判断图片是否加载完成的方法推荐
May 13 Javascript
Angular实现购物车计算示例代码
Feb 21 Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 Javascript
AngularJS集合数据遍历显示的实例
Dec 27 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
Aug 21 Javascript
JS使用H5实现图片预览功能
Sep 30 Javascript
html中创建并调用vue组件的几种方法汇总
Nov 17 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三元运算符知识汇总
2015/07/02 PHP
Javascript实例教程(19) 使用HoTMetal(6)
2006/12/23 Javascript
JavaScript 实现??打印?理
2007/04/28 Javascript
javascript cookie操作类的实现代码小结附使用方法
2010/06/02 Javascript
js封装的textarea操作方法集合(兼容很好)
2010/11/16 Javascript
10款非常有用的 Ajax 插件分享
2012/03/14 Javascript
Extjs4 GridPanel 的几种样式使用介绍
2013/04/18 Javascript
客户端js性能优化小技巧整理
2013/11/05 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
2016/01/15 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
2017/01/03 Javascript
微信小程序网络请求wx.request详解及实例
2017/05/18 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
2017/05/26 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
vue2.0 常用的 UI 库实例讲解
2017/12/12 Javascript
JS中Object对象的原型概念基础
2018/01/29 Javascript
Vue自定义弹窗指令的实现代码
2018/08/13 Javascript
JS实现倒序输出的几种常用方法示例
2019/04/13 Javascript
原生JS实现萤火虫效果
2020/03/07 Javascript
js实现简单五子棋游戏
2020/05/28 Javascript
python将字典内容存入mysql实例代码
2018/01/18 Python
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
python实现桌面壁纸切换功能
2019/01/21 Python
Python3实现的简单工资管理系统示例
2019/03/12 Python
numpy:np.newaxis 实现将行向量转换成列向量
2019/11/30 Python
Python APScheduler执行使用方法详解
2020/12/10 Python
全球知名的珠宝首饰品牌:Kay Jewelers
2018/02/11 全球购物
Rowdy Gentleman服装和配饰:美好时光
2019/09/24 全球购物
介绍一下OSI七层模型
2012/07/03 面试题
办公室文秘岗位职责
2013/11/15 职场文书
教育孩子心得体会
2014/01/01 职场文书
抗洪抢险事迹材料
2014/05/06 职场文书
党员“四风”问题批评与自我批评思想汇报
2014/10/06 职场文书
孙振耀退休感言
2015/08/01 职场文书
导游词之山海关
2019/12/10 职场文书
Redis遍历所有key的两个命令(KEYS 和 SCAN)
2021/04/12 Redis
PyTorch device与cuda.device用法
2022/04/03 Python