## 前言

JS 专门为我们提供了一些方法来改变函数内部的 this 指向。常见的方法有 call()、apply()、bind() 方法。

## call() 方法

### call() 方法的作用

call() 方法的作用:可以**调用**一个函数,与此同时,它还可以改变这个函数内部的 this 指向。

call() 方法的另一个应用:**可以实现继承**。之所以能实现继承,其实是利用了上面的作用。

语法:

```js
fn1.call(想要将this指向哪里, 函数实参1, 函数实参2);
```

备注:第一个参数中,如果不需要改变 this 指向,则传 null。

### call() 方法举例

**举例 1**、通过 call() 调用函数:

```js
const obj1 = {
    nickName: 'qianguyihao',
    age: 28,
};
function fn1() {
    console.log(this);
    console.log(this.nickName);
}
fn1.call(this); // this的指向并没有被改变,此时相当于 fn1();
```

上方代码的打印结果:

```
window
undefined
```

上面的代码,跟普通的函数调用 `fn1()` 没有区别。

**举例 2**、通过 call() 改变 this 指向:

```js
var obj1 = {
    nickName: 'qianguyihao',
    age: 28,
};

function fn1(a, b) {
    console.log(this);
    console.log(this.nickName);
    console.log(a + b);
}

fn1.call(obj1, 2, 4); // 先将 this 指向 obj1,然后执行 fn1() 函数
```

上方代码的打印结果:

```
obj1
qianguyihao
6
```

**举例 3**、通过 call() 实现继承:

```js
// 给 Father 增加 name 和 age 属性
function Father(myName, myAge) {
    this.name = myName;
    this.age = myAge;
}

function Son(myName, myAge) {
    // 【下面这一行,重要代码】
    // 通过这一步,将 father 里面的 this 修改为 Son 里面的 this;另外,给 Son 加上相应的参数,让 Son 自动拥有 Father 里的属性。最终实现继承
    Father.call(this, myName, myAge);
}

const son1 = new Son('千古壹号', 28);
console.log(JSON.stringify(son1));
```

上方代码中,通过 call() 方法,让 Son 继承了 Father 里面的 name 和 age 属性。

打印结果:

```
{"myName":"千古壹号","myAge":28}
```

## apply() 方法

### apply() 方法的作用

apply() 方法的作用:可以**调用**一个函数,与此同时,它还可以改变这个函数内部的 this 指向。这一点,和 call()类似。

apply() 方法的应用: 由于 apply()需要传递数组,所以它有一些巧妙应用,稍后看接下来的应用举例就知道了。

语法:

```js
fn1.apply(想要将this指向哪里, [函数实参1, 函数实参2]);
```

备注:第一个参数中,如果不需要改变 this 指向,则传 null。

到这里可以看出, call() 和 apply() 方法的作用是相同的。唯一的区别在于,apply() 里面传入的**实参,必须是数组(或者维数组)**。

### apply() 方法举例

**举例**、通过 apply() 改变 this 指向:

```js
var obj1 = {
    nickName: 'qianguyihao',
    age: 28,
};

function fn1(a) {
    console.log(this);
    console.log(this.nickName);
    console.log(a);
}

fn1.apply(obj1, ['hello']); // 先将 this 指向 obj1,然后执行 fn1() 函数
```

注意,上方代码中,call() 里面传实参时,需要以数组的形式。即便是传一个实参,也需要传数组。

打印结果:

```
obj1
qianguyihao
hello
```

### apply() 方法的巧妙应用:求数组的最大值

我们知道,如果想要求数组中元素的最大值的时候,数组本身是没有自带方法的。那怎么办呢?

虽然数组里没有获取最大值的方法,但是数值里面有 `Math.max(数字1,数字2,数字3)` 方法,可以获取**多个数值中的最大值**。 另外,由于 apply() 方法在传递实参时,必须要以数组的形式,所以我们可以 通过 Math.max() 和 apply() 曲线救国。

**举例**:求数组中多个元素的最大值:

```js
const arr1 = [3, 7, 10, 8];

// 下面这一行代码的目的,无需改变 this 指向,所以:第一个参数填 null,或者填 Math,或者填 this 都可以。严格模式中,不让填null。
const maxValue = Math.max.apply(Math, arr1); // 求数组 arr1 中元素的最大值
console.log(maxValue);

const minValue = Math.min.apply(Math, arr1); // 求数组 arr1 中元素的最小值
console.log(minValue);
```

打印结果:

```
10

3
```

## bind() 方法

### bind() 方法的作用

bind() 方法**不会调用函数**,但是可以改变函数内部的 this 指向。

把call()、apply()、bind()这三个方法做一下对比,你会发现:实际开发中, bind() 方法使用得最为频繁。如果有些函数,我们不需要立即调用,但是又想改变这个函数内部的this指向,此时用 bind() 是最为合适的。


语法:

```js
新函数 = fn1.bind(想要将this指向哪里, 函数实参1, 函数实参2);
```

参数:

- 第一个参数:在 fn1 函数运行时,指定 fn1 函数的this 指向。如果不需要改变 this 指向,则传 null。

- 其他参数:fn1 函数的实参。

解释:它不会调用 fn1 函数,但会返回 由指定this 和指定实参的**原函数拷贝**。可以看出, bind() 方法是有返回值的。












### call() 方法举例

## 我的公众号

想学习**代码之外的技能**?不妨关注我的微信公众号:**千古壹号**(id:`qianguyihao`)。

扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外:

![](http://img.smyhvae.com/20200101.png)