有关apply,call,bind
一、apply,call,bind的作用
关于apply,call,bind函数,最主要的作用是用来改变this的指向
apply的用法:
fn.apply(thisArg,[argArr])
作用:修改this的指向并立即执行函数。
区别:这里的第一个参数是改变this所指向的那个对象,而第二个参数是需要传入的值,这个值的数据类型是一个数组
let obj = {
name: 'xiaoming',
age: 24,
sayHello: function (job,hobby){
console.log(`我叫${this.name},今年${this.age}岁。我的工作是: ${job},我的爱好是: ${hobby}。`);
}
}
// obj.sayHello('程序员','看美女')
// 这里使用call、apply、bind来更改this的指向然后改变name、age的值,因为job、hobby的值是通过函数传值传入的
let obj1 = {
name: 'kunkun',
age:2.5
}
obj.sayHello.apply(obj1,['练习生','唱跳rap打篮球'])
// obj.sayHello.call(obj1,'练习生','唱跳rap打篮球')
// obj.sayHello.bind(obj1,'练习生','唱跳rap打篮球')
// obj.sayHello.bind(obj1,'练习生','唱跳rap打篮球')()
call的用法:
fn.call(thisArg, arg1, arg2, arg3, ...)
调用call的时候会将fn中的this指向修改为传入的第一个参数thisArg;将后面的参数传入给fn,并立即执行函数fn。
let obj = {
name: 'xiaoming',
age: 24,
sayHello: function (job,hobby){
console.log(`我叫${this.name},今年${this.age}岁。我的工作是: ${job},我的爱好是: ${hobby}。`);
}
}
// obj.sayHello('程序员','看美女')
// 这里使用call、apply、bind来更改this的指向然后改变name、age的值,因为job、hobby的值是通过函数传值传入的
let obj1 = {
name: 'kunkun',
age:2.5
}
// obj.sayHello.apply(obj1,['练习生','唱跳rap打篮球'])
obj.sayHello.call(obj1,'练习生','唱跳rap打篮球')
// obj.sayHello.bind(obj1,'练习生','唱跳rap打篮球')
// obj.sayHello.bind(obj1,'练习生','唱跳rap打篮球')()
bind的用法:
bind(thisArg, arg1, arg2, arg3, ...)
bind的作用是改变函数fn的this指向,但是不立即执行fn;会返回一个修改了this指向的fn。需要函数调用的时候才会执行:bind(thisArg,arg1, arg2, arg3,...)()
let obj = {
name: 'xiaoming',
age: 24,
sayHello: function (job, hobby) {
console.log(`我叫${this.name},今年${this.age}岁。我的工作是: ${job},我的爱好是: ${hobby}。`);
}
}
// obj.sayHello('程序员','看美女')
// 这里使用call、apply、bind来更改this的指向然后改变name、age的值,因为job、hobby的值是通过函数传值传入的
let obj1 = {
name: 'kunkun',
age: 2.5
}
// obj.sayHello.apply(obj1,['练习生','唱跳rap打篮球'])
// obj.sayHello.call(obj1,'练习生','唱跳rap打篮球')
obj.sayHello.bind(obj1, '练习生', '唱跳rap打篮球')
obj.sayHello.bind(obj1, '练习生', '唱跳rap打篮球')()
二、apply, call,bind的区别
不同点:
- call和bind传参方式相同,是传入多个参数依次传入的;
- apply是传入两个参数,第一个参数改变this指向,第二个参数为需要传入函数的数组或者对象
- call和apply都是对函数直接调用,而bind方法不会立即调用函数,只是返回一个改变了this指向的函数