基础用法
bind
const man = {
name: '张三',
sayName: function () {
console.log('MyName:', this.name);
},
showMe:function(age,hoppy){
console.log(`我是${this.name},今年${age}岁,喜欢${hoppy}。`);
}
}
const name = '李四'
const newSayName = man.sayName.bind(window)
const newShowMe = man.showMe.bind(man,15)
newSayName()
newShowMe('唱跳Rap')
结果![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f5b9e3fb4917133acd673afb10c6ca1c.png)
call
const man = {
name: '张三',
sayName: function () {
console.log('MyName:', this.name);
},
showMe:function(age,hoppy){
console.log(`我是${this.name},今年${age}岁,喜欢${hoppy}。`);
}
}
const name = '李四'
man.sayName.call(window)
man.showMe.call(man,41,'唱跳Rap')
结果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ca4ad421bbd50adf596c091f43a796e7.png)
apply
const man = {
name: '张三',
sayName: function () {
console.log('MyName:', this.name);
},
showMe:function(age,hoppy){
console.log(`我是${this.name},今年${age}岁,喜欢${hoppy}。`);
}
}
const name = '李四'
man.sayName.apply(window)
man.showMe.apply(window,[41,'唱跳Rap'])
结果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ad2bfd646c058a172256c237b24eac07.png)
相同点
不同点
- apply 和 call 都是直接执行函数,bind是返回一个新的函数再调用
- apply 给函数传参是数组
- call 给函数传参,是在this之后以逗号分割参数传递
- bind既可以在绑定时和this一起传递参数给函数,也可以在后续调用新函数时再传递参数给函数。其中,函数调用时,先从绑定时传入的参数中读取,后续才是新函数传递的参数