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 相关文章推荐
js捕获鼠标右键菜单中的粘帖事件实现代码
Apr 01 Javascript
JS中的构造函数详细解析
Mar 10 Javascript
jquery分页插件jpaginate在IE中不兼容问题
Apr 22 Javascript
javascript 控制input只允许输入的各种指定内容
Jun 19 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
Feb 03 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
May 31 Javascript
浅析JS中常用类型转换及运算符表达式
Jul 23 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
layer弹出层 iframe层去掉滚动条的实例代码
Aug 17 Javascript
Vue 动态组件components和v-once指令的实现
Aug 30 Javascript
解决vue.js提交数组时出现数组下标的问题
Nov 05 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
Jul 24 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
如何使用Strace调试工具
2013/06/03 PHP
php中实现记住密码下次自动登录的例子
2014/11/06 PHP
php一个解析字符串排列数组的方法
2015/05/12 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
javascript实用小函数使用介绍
2013/11/11 Javascript
jQuery实现下拉框左右选择的简单实例
2014/02/22 Javascript
struts2+jquery组合验证注册用户是否存在
2014/04/30 Javascript
js中iframe调用父页面的方法
2014/10/30 Javascript
JavaScript实现图片滑动切换的代码示例分享
2016/03/06 Javascript
javascript简单判断输入内容是否合法的方法
2016/05/11 Javascript
JavaScript编程中实现对象封装特性的实例讲解
2016/06/24 Javascript
jQuery 插件封装的方法
2016/11/16 Javascript
微信小程序自定义可滑动日历界面
2018/12/28 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
2019/11/05 Javascript
[47:46]完美世界DOTA2联赛 Magma vs GXR 第三场 11.07
2020/11/10 DOTA
使用url_helper简化Python中Django框架的url配置教程
2015/05/30 Python
Python验证码识别处理实例
2015/12/28 Python
python版飞机大战代码分享
2018/11/20 Python
python提取照片坐标信息的实例代码
2019/08/14 Python
Python3安装pip工具的详细步骤
2019/10/14 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
Transpose 数组行列转置的限制方式
2020/02/11 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
python用Tkinter做自己的中文代码编辑器
2020/09/07 Python
css3 实现滚动条美化效果的实例代码
2021/01/06 HTML / CSS
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
马来西亚网上购物平台:ezbuy
2018/02/13 全球购物
Black Halo官方网站:购买连衣裙、礼服和连体裤
2018/06/13 全球购物
Cotton On南非:澳洲时尚平价品牌
2018/06/28 全球购物
软环境建设心得体会
2014/09/09 职场文书
2014年变电站工作总结
2014/12/19 职场文书
员工自我工作评价
2015/03/06 职场文书
MongoDB安装使用并实现Python操作数据库
2021/06/28 MongoDB
Python学习开发之图形用户界面详解
2021/08/23 Python
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
2022/04/11 Vue.js