js 中改变函数内部 this 指向的几个方法

前言

在前端开发中，我们很多时候都需要使用到函数，那么在函数搭配使用的过程中，可能会出现函数内部 this 指向的一系列问题，那么有什

么解决的办法呢？对此，JS 专门为我们提供了一些方法来改变函数内部的 this 指向。常见的方法有 call()、apply()、bind() 方法。

call() 方法

call() 方法的作用

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

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

语法：

fn1.call(this 的指向, 函数实参1, 函数实参2, ...);

说明：第一个参数代表 this 指向的位置，如果不需要改变 this 指向，则传 null。

call() 方法举例

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

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

上方代码的打印结果：

window
undefined

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

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

var obj1 = {
    nickName: 'helloworld',
    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() 函数

上方代码的打印结果：

{nickName: "helloworld", age: 28}
helloworld
6

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

// 给 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('helloworld', 28);
console.log(JSON.stringify(son1));

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

打印结果：

{"name":"helloworld","age":28}

apply() 方法

apply() 方法的作用

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

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

语法：

fn1.apply(this 的指向, [函数实参1, 函数实参2, ...]);

说明：第一个参数代表 this 指向的位置，如果不需要改变 this 指向，则传 null。

到这里可以看出， call() 和 apply() 方法的作用是相同的。唯一的区别在于，它们传入的参数不同，apply() 里面传入的实参，必须是数组（或者伪数组）。

apply() 方法举例

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

var obj1 = {
    nickName: 'helloworld',
    age: 28,
};

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

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

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

打印结果：

{nickName: "helloworld",  age: 28}
helloworld
hello

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

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

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

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

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() 是最为合适的。

语法：

新函数 = fn1.bind(this 的指向, 函数实参1, 函数实参2, ...);

参数：

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

• 其他参数：fn1 函数的实参。

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

bind() 方法举例

举例、通过 bind() 改变 this 指向：

var obj1 = {
    nickName: 'helloworld',
    age: 28,
};

function fn1(a, b) {
    console.log(this);
    console.log(this.nickName);
    console.log(a + b);
}
var fn2 = fn1.bind(obj1, 3, 4);	// fn2 是新得到的函数，不会主动调用，需要自己手动调用
fn2();

打印结果：

{nickName: "helloworld", age: 28}
helloworld
7