别裁伪体亲风雅,转益多师是汝师。这篇文章主要讲述apply()与call()的区别相关的知识,希望能为你提供帮助。
想要深入了解 call()
和 apply()
这两个方法,那么必须要先知道他们的基本作用:
改变对象的执行上下文
什么是执行上下文?
我们在写一个方法的时候,总是会用到一个关键字this
,而this
的指向就是我们这里所说的执行上下文(执行环境)
首先我们要知道,this
指向的永远是调用该方法的对象,如何证明this
的指向就是当前对象呢?看下面这段代码:
function func () {
this.a = 1;
console.log(this.a);
}
func();
// 1
代码中方法执行后控制台输出
1
,由于func
是全局对象window
下的一个方法,那么调用该方法的对象就应该是全局对象window
,所以this
理论上指向的对象就应该是window
如果理论成立,而
this.a==1
,也就是说变量a
是一个全局变量。在控制台上直接输入a
或window.a
后回车,会发现输出了1
,所以在func
这个方法中,this
的指向就是window
换个方式来验证下:
var person = {
name: ‘xiao ming‘,
age: 18,
who: function () {
console.log( ‘my name is ‘ + this.name + ‘ , ‘ + this.age + ‘ years old‘ );
console.log( person === this);
}
}person.who();
// my name is xiao ming , 18 years old
// true
上面这段代码中
who
方法是person
对象的一个属性,被person
对象调用,所以this
的指向也就是person
call()
与apply()
异同在了解异同之前,先来搞清楚这两个方法都是怎么用的基本使用
call()
function.call(obj[,arg1[, arg2[, [,.argN]]]]])
- 调用
call
的对象必须是个函数function call
的第一个参数将会是function改变上下文后指向的对象,如果不传,将会默认是全局对象window
- 第二个参数开始可以接收任意个参数,这些参数将会作为function的参数传入function
- 调用
call
的方法会立即执行
function.apply(obj[,argArray])
与
call
方法的使用基本一致,但是只接收两个参数,其中第二个参数必须是一个数组或者类数组,这也是这两个方法很重要的一个区别数组与类数组小科普
数组我们都知道是什么,它的特征都有哪些呢?
- 可以通过角标调用,如
array[0]
- 具有长度属性
length
- 可以通过 for 循环和
forEach
方法进行遍历
var arrayLike = {
0: ‘item1‘,
1: ‘item2‘,
2: ‘item3‘,
length: 3
}
类数组
arrayLike
可以通过角标进行调用,具有length
属性,同时也可以通过 for 循环进行遍历我们经常使用的获取dom节点的方法返回的就是一个类数组,在一个方法中使用
arguments
关键字获取到的该方法的所有参数也是一个类数组但是类数组却不能通过
forEach
进行遍历,因为forEach
是数组原型链上的方法,类数组毕竟不是数组,所以无法使用那么如何才能让类数组能够使用
forEach
呢?小伙伴们可以在看完本篇后自己思考一下哦异同
相同点
都能够改变方法的执行上下文(执行环境),将一个对象的方法交给另一个对象来执行,并且是立即执行
不同点
call
方法从第二个参数开始可以接收任意个参数,每个参数会映射到相应位置的func的参数上,可以通过参数名调用,但是如果将所有的参数作为数组传入,它们会作为一个整体映射到func对应的第一个参数上,之后参数都为空function func (a,b,c) {}func.call(obj, 1,2,3)
// function接收到的参数实际上是 1,2,3func.call(obj, [1,2,3])
// function接收到的参数实际上是 [1,2,3],undefined,undefined
apply
方法最多只有两个参数,第二个参数接收数组或者类数组,但是都会被转换成类数组传入func中,并且会被映射到func对应的参数上func.apply(obj, [1,2,3])
// function接收到的参数实际上是 1,2,3func.apply(obj, {
0: 1,
1: 2,
2: 3,
length: 3
})
// function接收到的参数实际上是 1,2,3
两个方法该如何选择?
跟简单,根据你要传入的参数来做选择,不需要传参或者只有1个参数的时候,用
call
,当要传入多个对象时,用apply
或者,如果需要传入的参数已经是一个数组或者类数组了,就用
apply
,如果还是单独的需要逐个传入的,可以考虑使用call
(如果你不嫌麻烦的话 )【其他用途——对象继承】由于可以改变
this
的指向,所以也就可以实现对象的继承function superClass () {
this.a = 1;
this.print = function () {
console.log(this.a);
}
}function subClass () {
superClass.call(this);
this.print();
}subClass();
// 1
【apply()与call()的区别】
subClass
通过call
方法,继承了superClass
的print
方法和a
变量,同时subClass
还可以扩展自己的其他方法推荐阅读
- Android应用程序访问linux驱动第一步(实现并测试Linux驱动)
- Android 解决小米手机Android Studio安装app 报错的问题It is possible that this issue is resolved by uninstalling an
- 全面解读商城购物app开发的开发市场现状
- Android Studio 常用快捷键 for mac
- app 安全测试概览
- JavaFX进度指示器
- JavaFX ProgressBar
- JavaFX多边形
- JavaFX播放视频