apply、call、bind函数的区别
原创
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：在传入改变
- 不同点（调用方面）
- apply、call：
函数.apply()或者函数.call()，即可发起调用 - bind：先返回一个改变指向的函数，再通过这个函数进行调用
- apply、call：
我是半月，祝你幸福！！！
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
