前端小伙伴如何应对面试中的 call() 和 apply()

透明技术人

【call() 和 apply() 的基本作用】

改变对象的执行上下文--改变(this)

什么是执行上下文?
我们在写一个方法的时候,总是会用到一个关键字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
那么在知道什么是执行上下文以后,就可以比较好的理解改变执行上下文的含义了,举个不恰当的栗子:

小明有一个炒菜的铲子,小明的室友小刚今天突然想自己做菜吃,但是小刚没有铲子。小刚又不想为了做个菜单独买把铲子,于是就借用了小明的铲子,这样既达到了目的,又节省了开支,一举两得

改变执行上下文也是一样,A对象有一个方法,而B对象因为某种不可言说的情况也需要用到一样的方法,那么这时候我们是单独为B扩展个方法呢,还是借用一下A的方法呢?当然是借用A的啦,既完成了需求,又减少了内存的占用


【call()与apply()异同】

基本使用

call()

function.call(obj[,arg1[, arg2[, [,.argN]]]]])

调用call的对象必须是个函数function,call的第一个参数将会是function改变上下文后指向的对象,也就是上面例子里的小刚,如果不传,将会默认是全局对象window,第二个参数开始可以接收任意个参数,这些参数将会作为function的参数传入function,调用call的方法会立即执行

apply()

function.apply(obj[,argArray])

与call方法的使用基本一致,但是只接收两个参数,其中第二个参数必须是一个数组或者类数组,这也是这两个方法很重要的一个区别

异同

  • 相同点

都能够改变方法的执行上下文(执行环境),将一个对象的方法交给另一个对象来执行,并且是立即执行

  • 不同点

call方法从第二个参数开始可以接收任意个参数,每个参数会映射到相应位置的func的参数上,可以通过参数名调用,但是如果将所有的参数作为数组传入,它们会作为一个整体映射到func对应的第一个参数上,之后参数都为空

function func (a,b,c) {}
func.call(obj, 1,2,3)
// function接收到的参数实际上是 1,2,3
func.call(obj, [1,2,3])
// function接收到的参数实际上是 [1,2,3],undefined,undefined

apply方法最多只有两个参数,第二个参数接收数组或者类数组,但是都会被转换成类数组传入func中,并且会被映射到func对应的参数上

func.apply(obj, [1,2,3])
// function接收到的参数实际上是 1,2,3

func.apply(obj, {
    0: 1,
    1: 2,
    2: 3,
    length: 3
})
// function接收到的参数实际上是 1,2,3
  • 两个方法该如何选择?

简单的说,根据你要传入的参数来做选择,不需要传参或者只有1个参数的时候,用apply,当要传入多个对象时,用call,或者,如果需要传入的参数已经是一个数组或者类数组了,就用apply,如果还是单独的需要逐个传入的,可以考虑使用call(如果你不嫌麻烦的话 )

【对象继承】

由于可以改变this的指向,所以也就可以实现对象的继承

function superClass () {
    this.a = 1;
    this.print = function () {
        console.log(this.a);
    }
}

function subClass () {
    superClass.call(this);
    this.print();
}

subClass();
// 1

subClass通过call方法,继承了superClass的print方法和a变量,同时subClass还可以扩展自己的其他方法

本文借鉴了一些其他小伙伴的栗子,简单做了归纳总结及梳理

阅读 1.1k

web前端技术栈八面玲珑来汇总
超实用web前端项目代码段总结
189 声望
1 粉丝
0 条评论
189 声望
1 粉丝
文章目录
宣传栏