Function.prototype.bind用法示例

 更新时间:2013年09月16日 10:16:45   作者:  
想必大家对Function.prototype.bind并不陌生吧,下面为大家介绍下它的简单调用及DOM调用,感兴趣的朋友可以参考下
复制代码 代码如下:

//ECMAScript 5 Function.prototype.bind函数兼容处理
(function(){
if ( !Function.prototype.bind ) { //function(){}.bind
Function.prototype.bind = function ( o, /*参数列表*/ ) {
var self = this, boundArgs = Array.prototype.slice.call(arguments, 0);
return function(){
var args = [], i;
for ( i = 1; i < boundArgs.length; i++ ) args.push(boundArgs[i]);
for ( i = 0; i < arguments.length; i++ ) args.push(arguments[i]);
return this.apply(o, args);
}
}
}
})();

用法示例:
1、简单调用示例
复制代码 代码如下:

/*example 1*/
function f1(y, z){ return this.x + y + z;}
//调用 1
var g1 = f1.bind({x:1}, 2); //this.x = 1; y = 2;
console.loog( g1(3) ); //this.x + y + 3 = 6;
//调用 2
var g2 = f1.bind({x:1}); //this.x = 1;
console.log( g2(2,3) ); //this.x + 2 + 3 = 6

/*example 2*/
var f2(x, y){ return x + y; }
//调用
var g3 = f2.bind(null, 1); //x = 1
console.log( g3(2) ); //x + 2 = 3

2、DOM调用示例
复制代码 代码如下:

var eleBtn = document.getElementById("button")
, eleText = document.getElementById("text");

eleBtn.onclick = function(color) {
color = color || "#003399";
this.style.color = color; //此时的this指向eleText
}.bind(eleText, "#cd0000");

相关文章

  • 关于使用js算总价的问题

    关于使用js算总价的问题

    下面小编就为大家带来一篇关于使用js算总价的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • 用JavaScript实现让浏览器停止载入页面的方法

    用JavaScript实现让浏览器停止载入页面的方法

    下面小编就为大家带来一篇用JavaScript实现让浏览器停止载入页面的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • js实现touch移动触屏滑动事件

    js实现touch移动触屏滑动事件

    在开始描述touch事件之前,需要先描述一下多触式系统中特有的touch对象(android和iOS乃至nokia最新的meego系统都模拟了类 似的对象)。这个对象封装一次屏幕触摸,一般来自于手指。它在touch事件触发的时候产生,可以 通过touch event handler的event对象取到
    2015-04-04
  • Javascript 中 null、NaN和undefined的区别总结

    Javascript 中 null、NaN和undefined的区别总结

    js中的数据类型有undefined,boolean,number,string,object等5种,前4种为原始类型,第5种为引用类型,接下来与大家分享下它们之间的区别
    2013-04-04
  • JavaScript Event学习第十一章 按键的检测

    JavaScript Event学习第十一章 按键的检测

    检测用户的按键是事件处理程序的一个很特别的环节。这一章我们着力解决一些非常棘手的问题,并且制定一个完备的表格。
    2010-02-02
  • axios使用拦截器统一处理所有的http请求的方法

    axios使用拦截器统一处理所有的http请求的方法

    这篇文章主要介绍了axios使用拦截器统一处理所有的http请求的方法,通过一段实例代码给大家介绍了axios拦截器使用,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • JS面试题中深拷贝的实现讲解

    JS面试题中深拷贝的实现讲解

    在本篇文章里小编给大家分享的是关于JS面试题中深拷贝的实现讲解,需要的朋友们可以参考下。
    2020-05-05
  • jQuery 名称冲突的解决方法

    jQuery 名称冲突的解决方法

    jQuery 使用 $ 符号作为 jQuery 的简介方式。某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。
    2011-04-04
  • JavaScript中最简洁的编码html字符串的方法

    JavaScript中最简洁的编码html字符串的方法

    这篇文章主要介绍了JavaScript中最简洁的编码html字符串的方法,非常非常简洁的一个方法,小编亲测可用,需要的朋友可以参考下
    2014-10-10
  • 使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)

    使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)

    这篇文章主要介绍了使用原生js封装webapp滑动效果,具有惯性滑动、滑动回弹功能,需要的朋友可以参考下
    2014-05-05

最新评论