JavaScript中call()和apply()的基本用法和区别详解

  • A+
所属分类:JavaScript

关于JavaScript中call()和apply()的用法网上是有很多解释的,但是总感觉这些教程写的不够简单易懂,下面来说一下我自己对于这两个方法的理解。

call()方法

call()方法是归属于Function.prototype的一个内置方法,所以每个Function对象实例都是继承了该方法。

基本语法:

obj1.fun.call(obj2,arg1,arg2,....)

以上代码中obj2是一个对象,后面的参数是调用fun函数时传的参数

用法解释: call()方法可以调用对象的一个方法以另一个对象替换当前对象,call()方法可以将一个函数的对象的上下文从一个初始化的上下文环境改变为由obj2指定的新对象,后面可以接收传入调用函数的参数。

代码示例:

var obj1 = {
    text:'www',
    fun:function(x){
    console.log(this.text);//'xiamm.cc'
    console.log(x);//'ming'
    }

}
var obj2 = {
    text:'xiamm.cc'
}

obj1.fun.call(obj2,"ming");

以上代码中fun本来是obj1的一个方法,但是其中的this指向也应该是obj1对象,但是使用call()方法后传入将传入了obj2对象就更改了fun的执行上下文,也就是使用了call()方法后fun就作为obj2的方法运行了,fun内部的this的指向也就变成了obj2

apply()方法

apply()方法和call()方法是一样的都是归属于Function.prototype的一个内置方法,所以每个Function对象实例都是继承了该方法。

基本语法:

obj1.fun.call(obj2,[argsArray])

以上代码中obj2是一个对象,后面的参数是调用fun函数时传的参数

用法解释: apply()方法可以调用对象的一个方法以另一个对象替换当前对象,call()方法可以将一个函数的对象的上下文从一个初始化的上下文环境改变为由obj2指定的新对象,后面可以接收传入调用函数的参数组成的数组。

代码示例:

var obj1 = {
    text:'www',
    fun:function(x,y){
    console.log(this.text);
    console.log(x);
    console.log(y);
    }
		
}

var obj2 = {
    text:'xiamm.cc'
}

obj1.fun.apply(obj2,["ming1","ming2"]);

以上代码中fun本来是obj1的一个方法,但是其中的this指向也应该是obj1对象,但是使用apply()方法后传入将传入了obj2对象就更改了fun的执行上下文,也就是使用了apply()方法后fun就作为obj2的方法运行了,fun内部的this的指向也就变成了obj2

call()和apply的区别

从上面的两个方法的语法和代码示例可以看出来,两个方法的用法和作用基本是一致的,我上面的文字描述也都是写了一份复制一份修改一下,但是两者还是有一些细小区别的。

相同点:实现的功能的是相同的,都是将一个方法或者某个对象的某个方法制定上下文或者是说放到指定的对象中运行,其结果就是改变了该方法的执行上下文和其内部的this指向(关于this的指向可以参考我的文章:)。

不同点:接受的参数是不同的,call是接受一个this指向和参数1,参数2....这样若干个参数的列表,而apply是接受一个this的指向和一个参数的组成的数组。

相信这回在遇到JavaScript面试题中问的call()和apply()的区别应该可以轻松的回答出来了。

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: