call与apply方法的异同

àì夳堔傛蜴生んèń 2022-05-27 06:05 226阅读 0赞

## 【基本作用】 ##

想要深入了解 `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`

那么在知道什么是执行上下文以后，就可以比较好的理解**改变执行上下文**的含义了，举个不恰当的栗子：

我有一张银行卡，只有我知道密码，所以只有我取钱，此时银行卡的“执行上下文”是我；而之后我把密码告诉了老婆大人，那么老婆大人知道密码以后也就可以从这张卡取钱，老婆大人取钱的时候，“执行上下文”就变成了老婆大人

小伙伴们可能就会问了，银行卡自己用挺好的还能存点私房钱，又为什么要给老婆大人用呢？

这个问题问得很好，因为我妻管严啊 ：）你管我呢

### 为什么需要改变执行上下文？ ###

简单来说，方便啊！复杂点说，原因可以有很多，得看具体的业务场景。下面还是举个

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

改变执行上下文也是一样，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`方法的使用基本一致，但是只接收两个参数，其中第二个参数必须是一个**数组**或者**类数组**，这也是这两个方法很重要的一个区别

**数组与类数组小科普**

数组我们都知道是什么，它的特征都有哪些呢？

1.  可以通过角标调用，如 `array[0]`
2.  具有长度属性`length`
3.  可以通过 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,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个参数的时候，用`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

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

链接：https://www.jianshu.com/p/131ce0390cf8