JavaScript中的call、apply、bind函数的区别

淩亂°似流年 2023-05-29 03:21 18阅读 0赞

# 一、共同点： #

### 1.都可以用于修改this的绑定对象 ###

### 2.第一个参数是要绑定的对象 ###

### 3.还可以给函数传参 ###

# 二、不同点 #

### 1.修改this的绑定对象 ###

##### 代码 #####

##### 输出结果： #####

![在这里插入图片描述][20191102201405286.png]

##### 现在调用person1的showInfo()来展示小王的数据， #####

将上面例子中的`person1.showInfo();`改为`person1.showInfo.call(person2);`

##### 运行结果：this的绑定对象已经变为person2了 #####

![在这里插入图片描述][2019110220174324.png]

##### 同理:apply和bind都可以修改this的绑定对象 #####

person1.showInfo.apply(person2);
    person1.showInfo.bind(person2)();

##### apply的用法与call一致，bind需要再加上一对(),因为call和apply直接进行函数调用，bind得到的只是一个函数，加上（）是调用函数 #####

### 2.传参数 ###

##### 代码 #####

##### 运行结果 #####

![在这里插入图片描述][20191102202848779.png]

# 三、总结 #

### 1.`call、apply、bind`的调用方式：call和bind是直接调用函数，bind返回一个函数，需要加()进行调用 ###

person1.showInfo.call(person);
     person1.showInfo.apply(person);
     person1.showInfo.bind(person2));

### 2.`call、apply、bind`传参的方式：call和bind传统传参，apply是传一个数组 ###

person1.showInfo.call(person2,"广东","13112111111");
     person1.showInfo.apply(person2,["广西","15813647952"]);
     person1.showInfo.bind(person2)("海南","13113674589");

### 3.三者都可以修改this的绑定对象 ###

[20191102201405286.png]: https://img-blog.csdnimg.cn/20191102201405286.png
[2019110220174324.png]: https://img-blog.csdnimg.cn/2019110220174324.png
[20191102202848779.png]: https://img-blog.csdnimg.cn/20191102202848779.png