ie支持function.bind()方法实现代码

 更新时间:2012年12月27日 09:22:14   作者:  
在 google 一番技术资料后,发现 firefox 原生支持一个 bind 方法,该方法很好的满足了我们的初衷,调用方法与 call 和 apply 一样,只是定义完成后,在后期调用时该方法才会执行,需要的朋友可以了解下
前端开发者应该很清楚 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;
};
}

看懂这段代码需要点功底,我只是知道如何拿来用,如果哪位大牛有兴趣能够介绍一下这段源码的原理,不胜感激,谢谢!

单纯不是什么态度,而是一种满足。

相关文章

  • ES6中的Promise代码详解

    ES6中的Promise代码详解

    本文通过实例代码给大家介绍了ES6中的Promise,感兴趣的朋友参考下吧
    2017-10-10
  • JavaScript运行机制之事件循环(Event Loop)详解

    JavaScript运行机制之事件循环(Event Loop)详解

    这篇文章主要介绍了JavaScript运行机制之事件循环(Event Loop)详解,本文从多个方面讲解了Event Loop,需要的朋友可以参考下
    2014-10-10
  • Javascript实现跑马灯效果的简单实例

    Javascript实现跑马灯效果的简单实例

    下面小编就为大家带来一篇Javascript实现跑马灯效果的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • bootstrap侧边栏圆点导航

    bootstrap侧边栏圆点导航

    这篇文章主要为大家详细介绍了bootstrap侧边栏圆点导航效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • 解析JavaScript实现DDoS攻击原理与保护措施

    解析JavaScript实现DDoS攻击原理与保护措施

    本文主要对JavaScript实现DDoS攻击原理与保护措施进行介绍,具有一定的参考价值,需要的朋友一起来看下吧
    2016-12-12
  • JavaScript中变量提升与函数提升经典实例分析

    JavaScript中变量提升与函数提升经典实例分析

    这篇文章主要介绍了JavaScript中变量提升与函数提升,结合实例形式分析了JavaScript中的变量提升与函数提升相关原理、使用方法及操作注意事项,需要的朋友可以参考下
    2018-07-07
  • Javascript数组与字典用法分析

    Javascript数组与字典用法分析

    这篇文章主要介绍了Javascript数组与字典用法,以实例形式较为详细的分析了Array作为数组与字典的不同用法,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • JS数组reduce()方法原理及使用技巧解析

    JS数组reduce()方法原理及使用技巧解析

    这篇文章主要介绍了JS数组reduce()方法原理及使用技巧解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • 浅析js实现网页截图的两种方式

    浅析js实现网页截图的两种方式

    这篇文章主要介绍了浅析js实现网页截图的两种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • js实现贪吃蛇小游戏(加墙)

    js实现贪吃蛇小游戏(加墙)

    这篇文章主要为大家详细介绍了js实现贪吃蛇小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-07-07

最新评论