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 相关文章推荐
如何做到打开一个页面,过几分钟自动转到另一页面
Apr 20 Javascript
js 鼠标拖动对象 可让任何div实现拖动效果
Nov 09 Javascript
jQuery实现的立体文字渐变效果
May 17 Javascript
jquery配合css简单实现返回顶部效果
Sep 30 Javascript
浅析XMLHttpRequest的缓存问题
Dec 13 Javascript
jquery实现兼容IE8的异步上传文件
Jun 15 Javascript
js格式化时间的方法
Dec 18 Javascript
浅析JavaScript中浏览器的兼容问题
Apr 19 Javascript
Bootstrap栅格系统简单实现代码
Mar 06 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
JavaScript html5 canvas实现图片上画超链接
Oct 20 Javascript
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
前后台交互过程中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调用数据库的存贮过程
2006/10/09 PHP
PHP UTF8编码内的繁简转换类
2009/07/20 PHP
php 8小时时间差的解决方法小结
2009/12/22 PHP
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
深入解析php中的foreach函数
2013/08/31 PHP
让codeigniter与swfupload整合的最佳解决方案
2014/06/12 PHP
php使用cookie保存登录用户名的方法
2015/01/26 PHP
codeigniter显示所有脚本执行时间的方法
2015/03/21 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
2009/02/14 Javascript
jquery 页面全选框实践代码
2010/04/02 Javascript
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
Json字符串转换为JS对象的高效方法实例
2013/05/01 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
AngularJS中的DOM操作用法分析
2016/11/04 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
Vue多系统切换实现方案
2018/06/05 Javascript
JS打印彩色菱形的实例代码
2018/08/15 Javascript
vue项目打包部署_nginx代理访问方法详解
2018/09/20 Javascript
vue按需加载实例详解
2019/09/06 Javascript
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
Python彻底删除文件夹及其子文件方式
2019/12/23 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
浅谈HTML5 defer和async的区别
2016/06/07 HTML / CSS
使用HTML5做个画图板的方法介绍
2013/05/03 HTML / CSS
印度最大的旅游网站:MakeMyTrip
2016/10/05 全球购物
捷克浴室和厨房设备购物网站:SIKO
2018/08/11 全球购物
美国在线宠物商店:Chewy
2019/01/12 全球购物
毕业求职自荐信格式是什么
2013/11/19 职场文书
大学毕业生自荐书怎么写?
2014/01/06 职场文书
整改落实情况汇报材料
2014/10/29 职场文书
2014城乡环境综合治理工作总结
2014/12/19 职场文书
幼儿教师师德师风自我评价
2015/03/05 职场文书
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android