Javascript中call()、apply()和bind()方法的区别

阅读() @2018-10-29 18:16:05

在网上看了很多的关于Javascript中call()和apply()方法之间的区别,但都是书面语言,太官方化,让人不太容易理解。下面是我经过测试之后做出的总结:关于js中call和apply关键字的异同。

<input type="text" id="myText"  name="user">
function Obj(){
	this.name="obama";
}
var name="bush";
function fn(){
	alert(this.name);
}

fn();  //bush 
fn.call(window);  //bush
fn.call(document.getElementById('myText')); //user
fn.call(new Obj());   //obama

从以上代码可以看出:call()关键字的作用就是:调用一个对象的一个方法,以另一个对象替换当前对象。

比如   fn.call(document.getElementById('myText'))   这句代码,fn函数执行的时候,它里边的this本来指的是window对象(谁执行这个函数,那么这个函数内部的this指的就是谁),但是它使用了call关键字,当前对象window变成了document.getElementById('myText')对象,而这个对象中的name值是user,因此最后的结果是user。

调用call关键字的时候,还有一种写法,如下:

var obj = new Object();
obj.name = "obama";

var fn = function( x ){
	var name = "bush" ;
	alert( this.name ); //obama
	alert( x );  //cliten
}
fn.call( obj,"cliten" );

与最开始的那段代码相比,这段代码里边的call关键字中有两个参数,其中第一个是要传入给当前对象的对象,即函数内部的this,第二个是传给当前对象(函数)的参数。

例如,面向对象编程,在使用继承的时候,就经常会用到call关键字。如下代码:

Object.prototype.extends = function(func){
	for(var prop in func.prototype){
		this.prototype[prop] = func.prototype[prop];
	}
}
function A(name,age,sex){
	this.name = name;
	this.age = age;
	this.sex = sex;
}
A.prototype.show = function(){
	console.log(this.name);
}
var a = new A("张三",20,"男");
a.show();//张三

function B(name,age,sex){
	A.call(this,name,age,sex);//本来执行构造函数A,但是使用了call关键字,所以这里的this指的是B实例化的对象。
}
B.extends(A);
var b = new B("李四",30,"男");
b.show();//李四

到目前为止,我们对call关键字已经有基本的了解了。

apply和call的异同:

相同点:

它们里边传入的第一个参数的作用是相同的,都是让另外一个对象替换当前对象,改变this的指向。

不同点:

apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。

如:func.call(func1,var1,var2,var3)  对应的apply写法为:func.apply(func1,[var1,var2,var3])。

使用apply的好处是可以直接将当前函数的arguments对象作为apply的第二个参数传入。

代码如下:

function Parent(name,age,sex){
	this.name = name;
	this.age = age;
	this.sex = sex;
}
function Son(name,age,sex){
	Parent.apply(this,[name,age,sex]);
}
var son = new Son('haha','23','man');
console.log(son.name+'-'+son.age+'-'+son.sex);//haha-23-man

关于bind()方法的使用方法:

bind方法也是改变this指向的,对于上面同样的代码,bind代码如下:

function Son(name, age, sex){
     Person.bind(this, name, age, sex)();
}

通过对比可以发现,某个函数调用call或apply方法,这个函数是立即执行的,而调用bind方法则不是立即执行

相关推荐详解Javascript中arguments对象的的意义与用法

微信二维码