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实战篇上
Jun 23 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
Jun 20 Javascript
jquery命令汇总,方便使用jquery的朋友
Jun 26 Javascript
JS子父窗口互相操作取值赋值的方法介绍
May 11 Javascript
FF IE浏览器修改标签透明度的方法
Jan 27 Javascript
JS生成随机字符串的多种方法
Jun 10 Javascript
一步步教大家编写酷炫的导航栏js+css实现
Mar 14 Javascript
关于cookie的初识和运用(js和jq)
Apr 07 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
Nov 07 Javascript
初学者AngularJS的环境搭建过程
Oct 27 Javascript
JavaScript寄生组合式继承实例详解
Jan 06 Javascript
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
前后台交互过程中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+mysql)
2007/11/23 PHP
php中0,null,empty,空,false,字符串关系的详细介绍
2013/06/20 PHP
修改ThinkPHP缓存为Memcache的方法
2014/06/25 PHP
PHP中COOKIES使用示例
2015/07/26 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
2009/04/07 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
2016/12/25 Javascript
Vue.js事件处理器与表单控件绑定详解
2017/03/20 Javascript
javascript中this用法实例详解
2017/04/06 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
2018/01/31 Javascript
Element-ui table中过滤条件变更表格内容的方法
2018/03/02 Javascript
Vue-cli配置打包文件本地使用的教程图解
2018/08/02 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
node实现简单的增删改查接口实例代码
2019/08/22 Javascript
[51:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/30 DOTA
初步理解Python进程的信号通讯
2015/04/09 Python
python实现将汉字转换成汉语拼音的库
2015/05/05 Python
Python文件读取的3种方法及路径转义
2015/06/21 Python
Python写入CSV文件的方法
2015/07/08 Python
python 创建弹出式菜单的实现代码
2017/07/11 Python
Python中偏函数用法示例
2018/06/07 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
详解PyCharm安装MicroPython插件的教程
2019/06/24 Python
Python类如何定义私有变量
2020/02/03 Python
详解用 python-docx 创建浮动图片
2021/01/24 Python
美国一家主营日韩美妆护肤品的在线商店:iMomoko
2016/09/11 全球购物
英国休闲奢华的缩影:Crew Clothing
2019/05/05 全球购物
香奈儿美国官网:CHANEL美国
2020/05/20 全球购物
优秀教师先进事迹
2014/01/22 职场文书
初中英语演讲稿
2014/04/29 职场文书
2014年党的群众路线学习心得体会
2014/11/05 职场文书
2015年信息中心工作总结
2015/05/25 职场文书
使用python求解迷宫问题的三种实现方法
2022/03/17 Python
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers