JavaScript中的call()、apply()与bind():

关于call()与apply():

在JavaScript中,每个函数都有call与apply(),这两个函数都是用来改变函数体内this的指向,并调用相关的参数。

看一个例子:

定义一个animal对象,该对象有一个jump()方法:

var animal = {

       type:‘animal‘,

       jump:function(name){

              return this.type + ‘ is ‘ + name;

       }

}

some_animal.jump(‘dog‘);

**"animal is dog"**

如果这个时候有一个对象other_animal对象,只有一个type属性:

var other_animal = {

       type:‘other animal‘

}

这种情况下也要调用animal的jump()方法,这时候就可以用到jump()函数中的call()。

one_animal.jump.call(other_animal,‘cat‘).

**"other animal is cat"**

当jump被调用时,其中的this被设置成为了other_animal对象的引用,所以this.type返回的是other animal。

当有多个参数的时候,

one_animal.method.call(other_animal,‘cat‘,‘mouse‘).

apply()与call()基本相同,唯一的不同是参数的传递形式。

apply()传递的是一个数组。

如下两行是等效的:

one_animal.method.call(other_animal,‘cat‘,‘mouse‘).

one_animal.method.call(other_animal,[‘cat‘,‘mouse‘]).

分享一道题目:

定义一个 log 方法,让它可以代理 console.log 方法。

常见解决方案:

function log(msg) {

    console.log(msg);

}

log(1); //1

log(1,2); //1

当传入参数不确定时,上述方法就失效了。便可考虑用apply()或call(),这里参数个数不确定,用apply()更好。

function log(){

    console.log.apply(console, arguments);

};

log(1); //1

log(1,2); //1 2

关于bind():

bind()的用法跟call()与apply()的用法很相似,都是改变函数体内this的指向。

MDN的解释是:bind()方法会创建一个新函数。当这个新函数被调用时,bind()的第一个参数将作为它运行时的 this, 之后的一序列参数将会在传递的实参前传入作为它的参数。

this.x = 9;

var module = {

  x: 81,

  getX: function() { return this.x; }

};

module.getX(); // 返回 81

var retrieveX = module.getX;

retrieveX(); // 返回 9, 在这种情况下,"this"指向全局作用域

// 创建一个新函数,将"this"绑定到module对象

// 新手可能会被全局的x变量和module里的属性x所迷惑

var boundGetX = retrieveX.bind(module);

boundGetX(); // 返回 81

在常见的单体模式中,通常会使用_this,that,self等来保存this,为了在改变了上下文环境之后能够继续使用它们。

var func = {

num:1,

event:function(){

var that = this;

$(‘.class‘).click(function(){

console.log(that,num);

               })

       }

}

//用bind()来改变this:

var func = {

num:1,

event:function(){

$(‘.class‘).click(function(){

console.log(this,num);

}.bind(this))

}

}

在这里,click被调用时,this被设置成传入的值。当回调函数执行时,this便指向func对象。

more example:

var method = function(){

              console.log(this.x);

}

method();//undefined

var method_func = method.bind(func);

method_func();

注意:

在JavaScript中多次使用bind()是无效的。

原因是,bind()的实现,相当于在使用函数内部包了一个call/apply,第二次bind()相当于再包住一次bind(),所以无效。

比较apply、call、bind:

var method = {

x: 3,

};

var func= {

getX: function() {

return this.x;

}

}

console.log(func.getX.bind(method)()); //3

console.log(func.getX.call(method)); //3

console.log(func.getX.apply(method)); //3

时间: 2024-08-07 08:21:50

JavaScript中的call()、apply()与bind():的相关文章

Javascript中call,apply,bind方法的详解与总结

在 javascript之 this 关键字详解 文章中,谈及了如下内容,做一个简单的回顾: 1.this对象的涵义就是指向当前对象中的属性和方法. 2.this指向的可变性.当在全局作用域时,this指向全局:当在某个对象中使用this时,this指向该对象:当把某个对象的方法赋值给另外一个对象时,this会指向后一个对象. 3.this的使用场合有:在全局环境中使用:在构造函数中使用,在对象的方法中使用. 4.this的使用注意点,最重要的一点就是要避免多层嵌套使用this对象. 对this

JavaScript 中call()、 apply()、 bind()改变this指向理解

最近开发的过程中遇到了this指向问题,首先想到的是call().apply().bind()三个方法,有些时候这三个方法确实是十分重要,现在我们就把他们的使用方法及异同点讲解一下. 1.每个函数都包含三个非继承而来的方法,call()方法.apply()方法和bind()方法       2.相同点:三者的作用都是一样的,都是在特定作用中调用函数,等于设置函数体内this的值,以扩充函数赖以运行的作用域. 一般来说,this总是指向调用某个方法的对象,但是使用call().apply()和bi

JavaScript中call、apply、bind、slice的使用

1.参考资料 http://www.cnblogs.com/coco1s/p/4833199.html   2.归结如下 apply . call .bind 三者都是用来改变函数的this对象的指向的: apply . call .bind 三者第一个参数都是this要指向的对象,也就是想指定的上下文: apply . call .bind 三者都可以利用后续参数传参: bind 是返回对应函数,便于稍后调用:apply .call 则是立即调用 slice用于将含有length属性的对象(伪

javascript中call()、apply()、bind()的用法终于理解

其实是一个很简单的东西,认真看十分钟就从一脸懵B 到完全 理解! 先看明白下面: 例1 obj.objAge;  //17 obj.myFun()  //小张年龄undefined 例2 shows()  //盲僧 比较一下这两者this 的差别,第一个this 指向obj,第二个全局声明的shows()函数   this 是window : 1,call().apply().bind() 都是用来重定义 this 这个对象的! 如: obj.myFun.call(db): //德玛年龄99  

(转)javascript中call()、apply()、bind()的用法

其实是一个很简单的东西,认真看十分钟就从一脸懵B 到完全 理解! 先看明白下面: 例1 obj.objAge;  //17 obj.myFun()  //小张年龄undefined 例2 shows()  //盲僧 比较一下这两者this 的差别,第一个this 指向obj,第二个全局声明的shows()函数   this 是window : 1,call().apply().bind() 都是用来重定义 this 这个对象的! 如: obj.myFun.call(db): //德玛年龄99  

javascript中call、apply、bind详解

1.apply和call的区别在哪里 2.什么情况下用apply,什么情况下用call 3.apply的其他巧妙用法(一般在什么情况下可以使用apply) 我首先从网上查到关于apply和call的定义,然后用示例来解释这两个方法的意思和如何去用. apply:方法能劫持另外一个对象的方法,继承另外一个对象的属性. Function.apply(obj,args)方法能接收两个参数 obj:这个对象将代替Function类里this对象 args:这个是数组,它将作为参数传给Function(a

JavaScript 中 call()、apply()、bind() 的用法

通过 call() 或 apply() 方法你可以设置 this 的值, 且作为已存在对象的新方法调用. call() 和 apply() 是预定义的函数方法. 两个方法可用于调用函数,两个方法的第一个参数必须是对象本身. 两个方法都使用了对象本身作为第一个参数. 两者的区别在于第二个参数: apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始). <!DOCTYPE html> <html> <body&

JavaScript里call,apply,bind方法简介

JavaScript里call,apply,bind方法不太容易理解,其实背后的思想并不算非常复杂,希望本文能帮你更好地了解这3个很像,而且看似很神秘的方法. 非要用一个关键字来点明它们的背后思想的精髓的话,关键字就是:this 因为通常程序员对C++比较熟,先借用C++,简单说一下this. 类的成员函数里,都可以用this来访问当前类的成员,但问题是成员函数的参数并没有this这个参数,比如: Animal a; a.eat(); a.eat("meat"); Animal的对象调

js中call、apply和bind的区别

前言 关于js中call.apply和bind这三者的区别,这应该是一个老生常谈的问题,也是前端面试时经常会遇到的一道题目,因此也抽空把它理一遍. 作用 call.apply和bind都是一个javascript中的方法,他们的共同作用就是改变函数执行时的上下文,即改变函数执行时this的指向.我们来看下面的例子: 1 function Animal(name) { 2 this.name = name; 3 } 4 Animal.prototype.getName = function() {

javascript中call和apply方法

转:http://www.cnblogs.com/ArthurPatten/p/3335912.html 我们可以将call和apply看做是某个对象的方法,通过调用方法的形式来间接调用函数.call和apply的第一个实参是要调用函数的母对象,它是调用上下文,在函数体内通过this来获得对它的引用. 例如,如果要想以对象o的方法来调用函数f,可以按如下的方式使用call和apply方法: f.call(o); f.apply(o); 可以按如下的代码来理解: o.m = f; //将f存储为o