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 相关文章推荐
鼠标移动到一张图片时变为另一张图片
Dec 05 Javascript
封装属于自己的JS组件
Jan 27 Javascript
浅析在javascript中创建对象的各种模式
May 06 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
Dec 21 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
Apr 25 Javascript
解决Extjs下拉框不显示的问题
Jun 21 Javascript
JS数组操作之增删改查的简单实现
Aug 21 Javascript
webpack组织模块打包Library的原理及实现
Mar 10 Javascript
值得收藏的八个常用的js正则表达式
Oct 19 Javascript
JavaScript常见事件对象与操作实例总结
Jan 05 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
Sep 11 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
为php4加入动态flash文件的生成的支持
2006/10/09 PHP
php URL编码解码函数代码
2009/03/10 PHP
php引用传值实例详解学习
2013/11/06 PHP
安装docker和docker-compose实例详解
2019/07/30 PHP
由Javascript实现的页面日历
2011/11/04 Javascript
javascript学习笔记(十) js对象 继承
2012/06/19 Javascript
js简易namespace管理器 实例代码
2013/06/21 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
基于JQuery打造无缝滚动新闻步骤详解
2016/03/31 Javascript
简单实现js无缝滚动效果
2017/02/05 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
2017/09/05 Javascript
Vue引入Stylus知识点总结
2020/01/16 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
2020/04/09 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
pycharm 使用心得(一)安装和首次使用
2014/06/05 Python
python实现的DES加密算法和3DES加密算法实例
2015/06/03 Python
python3制作捧腹网段子页爬虫
2017/02/12 Python
python中import reload __import__的区别详解
2017/10/16 Python
python多进程控制学习小结
2018/10/31 Python
python 通过SSHTunnelForwarder隧道连接redis的方法
2019/02/19 Python
python3.5 cv2 获取视频特定帧生成jpg图片
2019/08/28 Python
在tensorflow以及keras安装目录查询操作(windows下)
2020/06/19 Python
python中zip()函数遍历多个列表方法
2021/02/18 Python
La Redoute英国官网:法国时尚品牌
2017/04/27 全球购物
华为消费者德国官方网站:HUAWEI德国
2020/11/03 全球购物
工商管理专业应届生求职信
2013/11/04 职场文书
什么是就业协议书
2014/04/17 职场文书
家长写给孩子的评语
2014/04/18 职场文书
大学新闻系求职信
2014/06/03 职场文书
运动会横幅标语
2014/06/17 职场文书
批评与自我批评发言稿
2014/10/15 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
团日活动总结格式
2015/05/11 职场文书
MySQL实现用逗号进行拼接、以逗号进行分割
2022/12/24 MySQL