一、bind、call、apply的作用
关于call、apply、bind修饰的函数,用来修改函数的执行上下文(this)。
1.call用法
调用fn.call时会将fn中的this指向修改为传入的第一个参数,将后面的参数传入给fn,并立即执行函数fn。
let obj = {
name: "张三",
age: 24,
sayHello: function (job, hobby) {
console.log(`我叫${this.name},今年${this.age}岁。我的工作是: ${job},我的爱好是: ${hobby}。`);
}
}
obj.sayHello('程序员', '看美女'); // 我叫张三,今年24岁。我的工作是: 程序员,我的爱好是: 看美女。
let obj1 = {
name: "李四",
age: 30
}
// obj1.sayHello(); // Uncaught TypeError: obj1.sayHello is not a function
obj.sayHello.call(obj1, '敲代码', '唱歌'); // 我叫李四,今年30岁。我的工作是: 敲代码,我的爱好是: 唱歌。
2.apply用法
fn.apply的作用和call相同:修改this指向,并立即执行fn。区别在于传参形式不同,apply接受两个参数,第一个参数是要指向的this对象,第二个参数是一个数组,数组里面的元素会被展开传入fn,作为fn的参数。
let obj = {
name: "张三",
age: 24,
sayHello: function (job, hobby) {
console.log(`我叫${this.name},今年${this.age}岁。我的工作是: ${job},我的爱好是: ${hobby}。`);
}
}
obj.sayHello('程序员', '看美女'); // 我叫张三,今年24岁。我的工作是: 程序员,我的爱好是: 看美女。
let obj1 = {
name: "李四",
age: 30
}
obj.sayHello.apply(obj1, ['设计师', '画画']); // 我叫李四,今年30岁。我的工作是: 设计师,我的爱好是: 画画。
3.bind的用法
fn.bind的作用是只修改this指向,但不会立即执行fn;会返回一个修改了this指向后的fn。需要调用才会执行:bind(thisArg, arg1, arg2, arg3, ...)()
。bind的传参和call相同。
let obj = {
name: "张三",
age: 24,
sayHello: function (job, hobby) {
console.log(`我叫${this.name},今年${this.age}岁。我的工作是: ${job},我的爱好是: ${hobby}。`);
}
}
// obj.sayHello('程序员', '看美女'); // 我叫张三,今年24岁。我的工作是: 程序员,我的爱好是: 看美女。
let obj1 = {
name: "李四",
age: 30
}
obj.sayHello.bind(obj1, '设计师', '画画'); // 无输出结果
obj.sayHello.bind(obj1, '设计师', '画画')(); // 我叫李四,今年30岁。我的工作是: 设计师,我的爱好是: 画画。
二、bind、call、apply的区别
相同点:
- 三个都是用于改变this指向;
- 接收的第一个参数都是this要指向的对象;
- 都可以利用后续参数传参。
不同点:
- call和bind传参相同,多个参数依次传入的;
- apply只有两个参数,第二个参数为数组;
- call和apply都是对函数进行直接调用,而bind方法不会立即调用函数,而是返回一个修改this后的函数。
三、call、apply的使用
(1)执行时一个对象可以使用另一个对象的方法
function Doctor(){
this.name = "Doctor";
this.say = function(){
console.log(this.name);
}
}
function Stephen(){
this.name = "Stephen Strange";
}
var doctor = new Doctor();
var stephen = new Stephen();
// 通过call将stephen对象传入doctor的say方法,此时say方法中的this被指向stephen对象
doctor.say.call(stephen); //Stephen Strange
(2)实现继承
function Doctor(name){
this.name = name;
this.say = function(){
console.log(this.name)
}
}
function Stephen(name){
//当前函数内的this指向函数Son的实例化对象
//在执行Stephen时执行Doctor,同时将Doctor内的this改变成Stephen的this
Doctor.call(this,name)
}
var doctor = new Doctor("Doctor")
doctor.say(); //Doctor
var stephen = new Stephen("Stephen Strange")
// 在Stephen中并没有say方法,但是因为在new Stephen时,执行了Doctor,
// 并将Doctor中的this指向Stephen的this,
// 那么在new Stephen后,得到的实例,也具有了Doctor内的属性和方法
stephen.say(); //Stephen Strange
(3)实现多继承
function People(){
this.say = function(){
console.log(`My name is ${this.name}. I will have ${this.attr} ${this.skill}.`)
}
}
function Doctor(){
this.skill = "cure";
}
function Magic(){
this.attr = "Amazing";
}
function Stephen(name){
this.name = name;
// 执行其他函数的同时将原函数的this指向都改成Stephen的this,此时所有属性和方法可以互相访问
People.call(this);
Doctor.call(this);
Magic.call(this);
}
var stephen = new Stephen("Stephen Strange");
stephen.say(); //My name is Stephen Strange. I will have Amazing cure.
四、总结
call和apply方法的功能:修改原函数的this指向,并执行这个新函数。call和aply的第二个(或大于2个)参数为fn传入的参数
bind和call/apply的功能类似,只不过bind修改this指向之后,返回的新函数不会自动执行,如果有需要,需要手动执行;而call和apply改变this之后,返回的新函数会自动执行。