Function.prototype.bind用法示例

代码如下:

//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");

(0)

相关推荐

  • 关于Function中的bind()示例详解

    前言 bind()接受无数个参数,第一个参数是它生成的新函数的this指向,比如我传个window,不管它在何处调用,这个新函数中的this就指向window,这个新函数的参数就是bind()的第二个.第三个.第四个....第n个参数加上它原本的参数.(行吧,我自己都蒙圈了) 示例介绍 我们还是看看栗子比较好理解,举个bind()最基本的使用方法: this.x = 9; var module = { x: 81, getX: function() { return this.x; } }; m

  • jQuery事件绑定on()、bind()与delegate() 方法详解

    啃了一段日子的js相关了,学的过程中发现在jQuery中绑定事件时,有人用bind(),有人用on(),有人用delegate(),还有人用live(),看代码的时候觉得都实现功能了也就掀过去了,只是一直没完全弄懂之间的区别,于是今天查了下资料,自己做个总结. 之所以有这么多类型的绑定方法,是因为jQuery的版本更新的原因,如on()方法就是1.7以后出现的. jQuery的事件绑定api页面上,提到live()方法已经过时,不建议使用.所以这里我们主要就看下以下三个方法:bind().del

  • JQuery中绑定事件(bind())和移除事件(unbind())

    有时候事件执行完了,想取消事件的效果可以通过一定的办法来处理.比如bind()(绑定事件)和unbind()(移除通过bind()方法添加的事件)方法来移除事件的效果. 比如下面的一个案例: 复制代码 代码如下: <script type="text/javascript">     $(function(){        $('#btn').bind("click", function(){                      $('#test

  • jQuery中的.bind()、.live()和.delegate()之间区别分析

    DOM树 首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的HTML页面看起来就像是这个样子: 事件冒泡(又称事件传播) 当我们点击一个链接时,其触发了链接元素的单击事件,该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行. 复制代码 代码如下: $('a').bind('click',function(){alert('that tickles!')}) 因此一个单击操作会触发alert函数的执行. click事件接着会向树的根方向传播,广播到父元素,然后接着是每个祖先元素

  • javascript中的Function.prototye.bind

    函数绑定(Function binding)很有可能是你在开始使用JavaScript时最少关注的一点,但是当你意识到你需要一个解决方案来解决如何在另一个函数中保持this上下文的时候,你真正需要的其实就是 Function.prototype.bind(),只是你有可能仍然没有意识到这点. 第一次遇到这个问题的时候,你可能倾向于将this设置到一个变量上,这样你可以在改变了上下文之后继续引用到它.很多人选择使用 self, _this 或者 context 作为变量名称(也有人使用 that)

  • 让IE8浏览器支持function.bind()方法

    IE8支持function.bind()方法 <script type="text/javascript"> if (!Function.prototype.bind) { Function.prototype.bind = function (oThis) { if (typeof this !== "function") { throw new TypeError("Function.prototype.bind - what is try

  • JQuery中Bind()事件用法分析

    本文实例分析了JQuery中Bind()事件用法.分享给大家供大家参考.具体分析如下: 我们先看一下它的定义: .bind( eventType [, eventData], handler(eventObject)) .Bind()方法的主要功能是在向它绑定的对象上面提供一些事件方法的行为.期中它的三个参数的意义分别如下: eventType是一个字符串类型的事件类型,就是你所需要绑定的事件.这类类型可以包括如下:blur, focus, focusin, focusout, load, re

  • 浅谈javascript中call()、apply()、bind()的用法

    call(thisObj,arg1,arg2...).apply(thisObj,[obj1,obj2...])这二个方法是每个函数都包含的非继承的方法 call(thisobj[, args])和apply(thisobj[, args]) 作用都是一样的,简单来说就是改变当前使用该方法的对象中的this指向,指向调用方法中的thisObj对象二者的区别(第一个参数是相同的)就是call方法中传入的参数是是一个个列举出来的,而apply方法中的参数二是一个数组 还是举例说明比较直观: wind

  • 深入理解JS中的Function.prototype.bind()方法

    前言 对于函数绑定(Function binding)很有可能是大家在使用JavaScript时最少关注的一点,但是当你意识到你需要一个解决方案来解决如何在另一个函数中保持this上下文的时候,你真正需要的其实就是 Function.prototype.bind() ,只是你有可能仍然没有意识到这点. 第一次遇到这个问题的时候,你可能倾向于将this设置到一个变量上,这样你可以在改变了上下文之后继续引用到它. 一. bind的语法 bind() 方法的主要作用就是将函数绑定至某个对象,bind(

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

    前端开发者应该很清楚 Javscript 脚本的 function 函数对象可以通过 call 或 apply 方法,使其改变内部作用域(this)所指向的对象,实现更多可扩展的功能开发.ie 原生支持 function 对象的 call 和 apply 方法,在 firefox 或其它浏览器下也得到支持,但是 call 和 apply 方法是立即作用并执行,例如: 复制代码 代码如下: var func = function () { alert(this); }.apply(window);

随机推荐