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删除数组元素的函数介绍
Mar 27 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
May 29 Javascript
在JavaScript中正确引用bind方法的应用
May 11 Javascript
AngularJS ng-repeat数组有重复值的解决方法
Oct 23 Javascript
jquery实现的table排序功能示例
Mar 10 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
使用classList来实现两个按钮样式的切换方法
Jan 24 Javascript
webstorm和.vue中es6语法报错的解决方法
May 08 Javascript
Vue面试题及Vue知识点整理
Oct 07 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
node.js文件操作系统实例详解
Nov 05 Javascript
Vue项目打包压缩的实现(让页面更快响应)
Mar 10 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使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
Laravel 关联模型-关联新增和关联更新的方法
2019/10/10 PHP
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
jquery 年会抽奖程序
2011/12/22 Javascript
不得不分享的JavaScript常用方法函数集(下)
2015/12/25 Javascript
又一款js时钟!transform实现时钟效果
2016/08/15 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
2016/11/24 Javascript
Vue实现双向绑定的方法
2016/12/22 Javascript
vscode下的vue文件格式化问题
2018/11/28 Javascript
javascript实现切割轮播效果
2019/11/28 Javascript
[59:32]Liquid vs Fnatic 2019国际邀请赛淘汰赛败者组BO1 8.20.mp4
2020/07/19 DOTA
Python ORM框架SQLAlchemy学习笔记之数据添加和事务回滚介绍
2014/06/10 Python
Python中用Descriptor实现类级属性(Property)详解
2014/09/18 Python
python生成器generator用法实例分析
2015/06/04 Python
Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录
2017/09/20 Python
Python数据持久化shelve模块用法分析
2018/06/29 Python
Numpy之文件存取的示例代码
2018/08/03 Python
Django 5种类型Session使用方法解析
2020/04/29 Python
如何在pycharm中安装第三方包
2020/10/27 Python
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
2020/09/15 HTML / CSS
canvas绘制图片drawImage使用方法
2020/09/15 HTML / CSS
美国庭院家具购物网站:AlphaMarts
2019/04/10 全球购物
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
自我鉴定三原则
2014/01/13 职场文书
基督教婚礼主持词
2014/03/14 职场文书
学生保证书
2015/01/16 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
暑期家教宣传单
2015/07/14 职场文书
javaScript Array api梳理
2021/03/31 Javascript
Nginx设置日志打印post请求参数的方法
2021/03/31 Servers
如何在C++中调用Python
2021/05/21 Python
图解排序算法之希尔排序Java实现
2021/06/26 Java/Android
vue项目中的支付功能实现(微信支付和支付宝支付)
2022/02/18 Vue.js
Win11 BitLocker 驱动器加密
2022/04/19 数码科技