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选择头像并实时显示的代码
Jun 27 Javascript
js调用AJAX时Get和post的乱码解决方法
Jun 04 Javascript
如何让DIV可编辑、可拖动示例代码
Sep 18 Javascript
解决json日期格式问题的3种方法
Feb 02 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
Mar 25 Javascript
js数组操作常用方法
May 08 Javascript
详解JavaScript操作HTML DOM的基本方式
Oct 21 Javascript
理解jquery事件冒泡
Jan 03 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
Dec 14 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
Feb 11 Javascript
浅谈express.js框架中间件(middleware)
Apr 07 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
Apr 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
DEDE采集大师官方留后门的删除办法
2011/01/08 PHP
PHP学习之正则表达式
2011/04/17 PHP
php中jQuery插件autocomplate的简单使用笔记
2012/06/14 PHP
php inc文件使用的风险和注意事项
2013/11/12 PHP
Thinkphp将二维数组变为标签适用的一维数组方法总结
2014/10/30 PHP
yii数据库的查询方法
2015/12/28 PHP
Thinkphp5框架实现获取数据库数据到视图的方法
2019/08/14 PHP
图片上传即时显示缩略图的js代码
2009/05/27 Javascript
jWiard 基于JQuery的强大的向导控件介绍
2011/10/28 Javascript
jQuery 数据缓存模块进化史详细介绍
2012/11/19 Javascript
jquery插件validate验证的小例子
2013/05/08 Javascript
java与javascript之间json格式数据互转介绍
2013/10/29 Javascript
js控制浏览器全屏示例代码
2014/02/20 Javascript
jQuery统计上传文件大小的方法
2015/01/24 Javascript
微信小程序 swiper组件详解及实例代码
2016/10/25 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
2017/07/18 jQuery
Vuex提升学习篇
2018/01/11 Javascript
小程序实现列表删除功能
2018/10/30 Javascript
Sublime Text3 配置 NodeJs 环境的方法
2020/05/20 NodeJs
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
[02:30]DOTA2放量测试专访海涛:呼吁保护新手玩家
2013/08/26 DOTA
django中SMTP发送邮件配置详解
2019/07/19 Python
flask 框架操作MySQL数据库简单示例
2020/02/02 Python
python缩进长度是否统一
2020/08/02 Python
python批量生成条形码的示例
2020/10/10 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
校园十大歌手策划书
2014/02/01 职场文书
营销部内勤岗位职责
2014/04/30 职场文书
学前教育专业求职信
2014/09/02 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
2014年大学团支部工作总结
2014/12/02 职场文书
房屋租房协议书范本
2014/12/04 职场文书
护士自荐信范文
2015/03/25 职场文书
Java Dubbo框架知识点梳理
2021/06/26 Java/Android
SQL基础的查询语句
2021/11/11 MySQL