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 相关文章推荐
Javascript客户端脚本的设计和应用
Aug 21 Javascript
JavaScript 读取元素的CSS信息的代码
Feb 07 Javascript
jquery 学习笔记一
Apr 07 Javascript
分享14个很酷的jQuery导航菜单插件
Apr 25 Javascript
js 可拖动列表实现代码
Dec 13 Javascript
React.js入门实例教程之创建hello world 的5种方式
May 11 Javascript
jquery获取复选框checkbox的值的简单实现方法
May 26 Javascript
JavaScript浏览器对象之一Window对象详解
Jun 03 Javascript
Vue实现点击后文字变色切换方法
Feb 11 Javascript
d3.js 地铁轨道交通项目实战
Nov 27 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
Jan 21 Javascript
javascript使用正则表达式实现注册登入校验
Sep 23 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 小乘法表实现代码
2009/07/16 PHP
shopex主机报错误请求解决方案(No such file or directory)
2011/12/27 PHP
PHP得到某段时间区间的时间戳 php定时任务
2012/04/12 PHP
调试PHP程序的多种方法介绍
2014/11/06 PHP
JS操作XML中DTD介绍及使用方法分析
2019/07/04 PHP
基于jquery的横向滚动条(滑动条)
2011/02/24 Javascript
Raphael带文本标签可拖动的图形实现代码
2013/02/20 Javascript
node.js开机自启动脚本文件
2014/12/24 Javascript
JS实现自动变换的菜单效果代码
2015/09/09 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
2015/09/28 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
2016/01/26 Javascript
讲解vue-router之命名路由和命名视图
2018/05/28 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
2019/06/24 Javascript
Angular单元测试之事件触发的实现
2020/01/20 Javascript
Vue实现图片轮播组件思路及实例解析
2020/05/11 Javascript
基于JavaScript实现简单抽奖功能代码实例
2020/10/20 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
Python中每次处理一个字符的5种方法
2015/05/21 Python
解决pycharm 误删掉项目文件的处理方法
2018/10/22 Python
Python提取特定时间段内数据的方法实例
2019/04/01 Python
python用for循环求和的方法总结
2019/07/08 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
Python字典中的值为列表或字典的构造实例
2019/12/16 Python
python 比较2张图片的相似度的方法示例
2019/12/18 Python
详解用selenium来下载小姐姐图片并保存
2021/01/26 Python
模范家庭事迹材料
2014/02/10 职场文书
餐厅总厨求职信
2014/03/04 职场文书
警校毕业生自我评价
2014/04/06 职场文书
怎样拟定创业计划书
2014/05/01 职场文书
自动化专业毕业生求职信
2014/06/18 职场文书
全国优秀教师事迹材料
2014/08/26 职场文书
银行培训心得体会范文
2016/01/09 职场文书
导游词之无锡梅园
2019/11/28 职场文书
python中24小时制转换为12小时制的方法
2021/06/18 Python
聊聊基于pytorch实现Resnet对本地数据集的训练问题
2022/03/25 Python