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 相关文章推荐
解读IE和firefox下JScript和HREF的执行顺序
Jan 12 Javascript
Jquery cookie操作代码
Mar 14 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
Sep 15 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
Jun 05 Javascript
加随机数引入脚本不让浏览器读取缓存
Sep 04 Javascript
如何在Angular.JS中接收并下载PDF
Nov 26 Javascript
Angularjs分页查询的实现
Feb 24 Javascript
如何使用vuejs实现更好的Form validation?
Apr 07 Javascript
Vue.js如何实现路由懒加载浅析
Aug 14 Javascript
JS库之wow.js使用方法
Sep 14 Javascript
this在vue和小程序中的使用详解
Jan 28 Javascript
JavaScript canvas绘制折线图
Feb 18 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(4) php 函数 补充2
2010/02/15 PHP
php学习笔记 php中面向对象三大特性之一[封装性]的应用
2011/06/13 PHP
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
PHP时间和日期函数详解
2015/05/08 PHP
PHP排序算法之基数排序(Radix Sort)实例详解
2018/04/21 PHP
thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法
2018/09/07 PHP
Javascript中的delete介绍
2012/09/02 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
Bootstrap每天必学之轮播(Carousel)插件
2016/04/25 Javascript
基于jQuery的select下拉框选择触发事件实例分析
2016/11/18 Javascript
Bootstrap栅格系统学习笔记
2016/11/25 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
2018/08/27 Javascript
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
layui实现数据表格table分页功能(ajax异步)
2019/07/27 Javascript
Python中使用PIL库实现图片高斯模糊实例
2015/02/08 Python
举例区分Python中的浅复制与深复制
2015/07/02 Python
Python tkinter模块中类继承的三种方式分析
2017/08/08 Python
python中ASCII码字符与int之间的转换方法
2018/07/09 Python
Pandas实现DataFrame按行求百分数(比例数)
2019/12/27 Python
Django实现内容缓存实例方法
2020/06/30 Python
Python lxml库的简单介绍及基本使用讲解
2020/12/22 Python
俄罗斯香水和化妆品网上商店:NOTINO.ru
2019/12/17 全球购物
远程调用的原理
2014/07/05 面试题
电大学习个人自我评价范文
2013/10/04 职场文书
最新奶茶店创业计划书
2014/01/25 职场文书
道德模范先进事迹
2014/02/14 职场文书
软件售后服务承诺书
2014/05/21 职场文书
教师演讲稿开场白
2014/08/25 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
学困生转化工作总结
2015/08/13 职场文书
Pytorch 使用tensor特定条件判断索引
2021/04/08 Python
python中使用redis用法详解
2022/12/24 Redis