call、bind与apply函数的区别

之前写过JavaScript中this的指向那篇博客中的最后一个关于修改定时器的this指向的时候,其实还有个方法是使用bind()函数来改变,且继承那篇博客中,也有写到call()的方法去将父类的属性传至子类属性中.那么,我们顺带来看看,call、bind以及apply三个函数.

首先,我先解释下,为什么我将这三个函数放在一起写,先叙述下它们的相似之处:

1.他们都是用来改变函数的this对象的指向的.

2.第一个参数都是this要指向的对象.

3.它们都可以利用后续参数来传参.

那他们的区别又在哪里嘞?先看看下面的代码.

var yee={
name:'小李',
sex:"女",
age:23,
foo:function(){
alert(this.name+","+this.sex+"年龄"+this.age)}
}

var gene={
name:"小黄",
sex:"女",
age:24}

yee.foo();

结果显而易见，一个简单的调用．那么，我们怎么使用yee中的foo()函数来显示gene中的数据呢.（如下）

var yee={
name:'小李',
sex:"女",
age:23,
foo:function(){
alert(this.name+","+this.sex+"年龄"+this.age)}
}

var gene={
name:"小黄",
sex:"女",
age:24}
yee.foo.call(gene)

于apply而言,也是一样的:

var yee={
name:'小李',
sex:"女",
age:23,
foo:function(){
alert(this.name+","+this.sex+"年龄"+this.age)}
}

var gene={
name:"小黄",
sex:"女",
age:24}
yee.foo.apply(gene)

但是,bind与apply以及call不相同,看下面:

var yee={
name:'小李',
sex:"女",
age:23,
foo:function(){
alert(this.name+","+this.sex+"年龄"+this.age)}
}

var gene={
name:"小黄",
sex:"女",
age:24}
yee.foo.bind(gene)();

这样的话，区别应该很明显了吧．call与apply都是对函数直接进行调用,而bind方法返回的仍然是一个函数，因此我们在后面还是需要()来进行调用才可以．

接下来，我们把上述例子改一点点，来看看：

这里,我们将foo方法中多加了两个参数,我们先用call/apply的参数进行传参.

首先,对于call而言,就加上：

yee.foo.call(gene,"成都","林湾村铁道学院")

而对于apply函数而言,是:

yee.foo.apply(gene,["成都","林湾村铁道学院"])

那么,这个区别也可以看出来啦!call后面的参数与say方法中是一一对应的,而apply的第二个参数是一个数组,数组中的元素和foo方法中一一对应,这就是它们之间的区别.

但是，由于bind返回的仍然是一个函数,所以我们还可以在调用时候再进行传参.

yee.foo.bind(gene)("成都","林湾村铁道学院")

那我们在这里再说说如果使用bind()方式如何修改定时器中this的指向吧.这里,或许有人会想问,既然call、apply与bind函数都可以改变this.因为,call与apply再修改this指向后,函数会立即执行,但bind返回的就是一个新的函数,它会创建一个与原来函数主体相同的新韩淑,新函数中的this指向传入的对象.

var name="Window";
var obj={
name:"This is obj",
fun:function(){
var time=null;
clearInterval(time);
time=setInterval(function(){
console.log(this.name);//This is obj
}.bind(this),2000)
}
}