apply、call、bind函数的区别

一、前言

大多数人都知道，使用apply、call、bind可以调用函数，并改变函数中this的指向。

做一个简单记录，免得以后忘记了。

二、apply

使用：函数.apply(obj, arg[])
参数：
- 第一个参数为函数中this指向的对象
- 第二个参数是函数中原本的参数，由数组进行封装

JAVASCRIPT
var user = {
    username: "半月无霜",
    showInfo: function(age){
        console.log(`名字：${this.username}，年龄：${age}`);
    }
}
// 普通调用
user.showInfo(18);

// 定义一个其他对象，使用apply
var other = {
    username: "九月",
    age: 19
}
user["showInfo"].apply(other, [other.age]);

三、call

使用：函数.call(obj, args...)
参数：第一个参数为函数中this指向的对象，后面的参数跟着原本的函数就好，加在后面就行

JAVASCRIPT
var user = {
    username: "半月无霜",
    showInfo: function(age, sex){
        console.log(`名字：${this.username}，年龄：${age}，性别：${sex}`);
    }
}
// 普通调用
user.showInfo(18, "男");

// 定义一个其他对象，使用call
var other = {
    username: "yooyeon",
    age: 17,
    sex: "女"
}
user["showInfo"].call(other, other.age, other.sex);

四、bind

bind和前面两个有所不同，先看示例，一会再讲使用

JAVASCRIPT
var user = {
    username: "半月无霜",
    showInfo: function(age, sex){
        console.log(`名字：${this.username}，年龄：${age}，性别：${sex}`);
    }
}
// 普通调用
user.showInfo(18, "男");

// 定义一个其他对象，使用bind
var other = {
    username: "yooyeon",
    age: 17,
    sex: "女"
}
// 返回了一个改变了this指向的函数
var showInfo2 = user.showInfo.bind(other);
showInfo2(other.age, other.sex);

20220302135153.png (320×119) (aliyuncs.com)

可以看到，bind在使用的时候会返回一个改变this的新函数，使用需要重新调用这个新函数才行。

传参和call一致，在后面添加原函数的参数就可以

JAVASCRIPT
// 也可以这样写，效果是一样的
user.showInfo.bind(other, other.age, other.sex)();

// 也可以这样
var showInfo2 = user.showInfo.bind(other, other.age);
showInfo2(other.sex);

五、总结

上面对比，总结一下apply、call、bind他们的异同点

相同点：都可以改变函数中this的指向，且都将作为第一个参数进行使用
不同点（传参方面）
- apply：在传入改变this的对象之后，将原来的函数参数，打包成一个数组进行传参
- call：在传入改变this的对象之后，依次传入原本的函数参数
- bind：由于特性，它的传参分为一次参数和二次传参，一次传参与call相同；二次传参首次传参与call类似，后一次调用传参补全原函数剩余的参数
不同点（调用方面）
- apply、call：函数.apply()或者函数.call()，即可发起调用
- bind：先返回一个改变指向的函数，再通过这个函数进行调用