call()、bind()、apply() 三者的作用、用法和区别
作用
call()、bind()、apply()的作用都是改变this指向的方法
区别
-
call()和apply()会调用函数、并且改变函数内部的指向。
-
call()和apply()传递的参数不一样,call()要求参数arg1,arg2…形式,apply()必须是数组
-
bind()不会调用函数,可以改变函数内部指向。
-
call()方法
-
使用:fun.call(thisArg,arg1,arg3,…)
//thisArg为想要指向的对象,arg1,arg3为参数
// 调用会立即执行
function Person(uname,age){
this.uname = uname
this.age = age
}
function Son(uname,age){
Person.call(this,uname,age)
}
var son = new Son("zhang",12)
console.log(son)
- apply()方法
- 使用:fun.apply(thisArg,[argsArray])
// thisArg:在fun函数允许时指定的this值
// argArray: 必须包含在数组里
// 调用会立即执行
let obj = {
name:'xiaoming",
age:24,
sayHello: function(job,hobby){
console.log(`我叫${this.name},今年${this.age}岁。我的工作是:${job},我的爱好是: ${hobby}。`)
//我叫xiaoming,今年24岁。我的工作是: 程序员,我的爱好是: 看美女。
}
}
obj.sayHello("程序员","看美女")
let obj1 = {
name:'lihua',
age:30
}
obj.sayHello.apply(obj1,["设计师",'画画'])
// 我叫lihua,今年30岁。我的工作是: 设计师,我的爱好是: 画画。
- bind()方法
- 使用:fun.bind(thisArg,arg1,arg2,arg3,…)
// 不会立即执行
// 会返回一个修改了this指向后的fn,需要调用才会执行
let obj = {
name:'xiaohong',
age:24,
sayHello:function(obj,hobby){
console.log(`我叫${this.name},今年${this.age}岁。我的工作是: ${job},我的爱好是: ${hobby}。`);
obj.sayHello('程序员', '看美女');
// 我叫xiaohong,今年24岁。我的工作是: 程序员,我的爱好是: 看美女。
}
}
let obj1 = {
name:'linhu',
age:30
}
obj.sayHello.bind(obj1,"设计师","画画");
//无输出结果
var fn = obj.sayHello.bind(obj1,"设计师","画画");
fn()
// 我叫lihua,今年30岁。我的工作是: 设计师,我的爱好是: 画画