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.tmpl 动态ajax扩展
Nov 10 Javascript
文字垂直滚动之javascript代码
Jul 29 Javascript
js仿百度登录页实现拖动窗口效果
Mar 11 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
Dec 31 Javascript
常用的js方法合集
Mar 10 Javascript
ES6新特性之解构、参数、模块和记号用法示例
Apr 01 Javascript
vue一个页面实现音乐播放器的示例
Feb 06 Javascript
浅谈webpack 自动刷新与解析
Apr 09 Javascript
详解vue-router 初始化时做了什么
Jun 11 Javascript
微信小程序sessionid不一致问题解决
Aug 30 Javascript
优雅的使用javascript递归画一棵结构树示例代码
Sep 22 Javascript
vue项目中使用vue-layer弹框插件的方法
Mar 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
php提示undefined index的几种解决方法
2012/05/21 PHP
php实现利用phpexcel导出数据
2013/08/24 PHP
ThinkPHP3.1之D方法实例详解
2014/06/20 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
php常用数组函数实例小结
2016/12/29 PHP
Laravel框架搜索分页功能示例
2019/02/01 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
JavaScript避免内存泄露及内存管理技巧
2014/09/05 Javascript
jQuery中noConflict()用法实例分析
2015/02/08 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
2015/06/05 Javascript
JavaScript实现同时调用多个函数的方法
2015/11/09 Javascript
javascript实现获取浏览器版本、浏览器类型
2015/12/02 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
2016/08/24 Javascript
Bootstarp基本模版学习教程
2017/02/01 Javascript
jquery单击文字或图片内容放大并居中显示
2017/06/23 jQuery
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
2018/09/19 Javascript
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
跟老齐学Python之Python文档
2014/10/10 Python
Python中用altzone()方法处理时区的教程
2015/05/22 Python
Python算法输出1-9数组形成的结果为100的所有运算式
2017/11/03 Python
python实现Adapter模式实例代码
2018/02/09 Python
python的格式化输出(format,%)实例详解
2018/06/01 Python
用python实现将数组元素按从小到大的顺序排列方法
2018/07/02 Python
浅谈python连续赋值可能引发的错误
2018/11/10 Python
pycharm中使用anaconda部署python环境的方法步骤
2018/12/19 Python
Django密码存储策略分析
2020/01/09 Python
Python 列表的清空方式
2020/01/13 Python
英国在线药房和在线药剂师:Chemist 4 U
2020/01/05 全球购物
事业单位分类改革实施方案
2014/03/21 职场文书
学生安全责任书
2014/04/15 职场文书
软件测试专业推荐信
2014/09/18 职场文书
2016年“5.12”国际护士节活动总结
2016/04/06 职场文书
2019员工保密协议书(3篇)
2019/09/23 职场文书
linux中nohup和后台运行进程查看及终止
2021/06/24 Python