一、call()、apply()、bind() 都是用来重定义 this 这个对象的
预热状态:
例1:
var name="张三",age=18;
var obj = {
name:"李四",
oldAge:this.age,
myFn:function(){
console.log( this.name+"年龄"+this.age )
}
}
obj.oldAge; // 18
obj.myFn(); // 李四年龄undefined
例2:
var name="小王";
function Fn(){
console.log(this.name)
}
Fn() ; // 小王
比较一下这两者 this 的差别,第一个打印里面的 this 指向 obj,第二个全局声明的 Fn() 函数 this 是 window ;
综上所述
var name="张三",age=18;
var obj = {
name:"李四",
oldAge:this.age,
myFn:function(){
console.log( this.name+"年龄"+this.age )
}
}
var newObj = {
name:"王五",
age:22
}
obj.myFn.call(newObj); // 王五年龄22
obj.myFn.apply(newObj); // 王五年龄22
obj.myFn.bind(newObj)(); // 王五年龄22
以上除了 bind 方法后面多了个 () 外 ,结果返回都一致!
由此得出结论,bind 返回的是一个新的函数,你必须调用它才会被执行
。
二、对比call 、bind 、 apply 传参情况下
var name="张三",age=18;
var obj = {
name:"李四",
oldAge:this.age,
myFn:function(a, b){
console.log( this.name+"年龄"+this.age,"来自"+a+"去往"+b )
}
}
var newObj = {
name:"王五",
age:22
}
obj.myFn.call(newObj,'北京','上海'); // 王五年龄22 来自北京去往上海
obj.myFn.apply(newObj,['北京','上海']); // 王五年龄22 来自北京去往上海
obj.myFn.bind(newObj,['北京','上海'])(); //王五年龄22 来自北京,上海去往undefined
obj.myFn.bind(newObj,'北京','上海')(); // 王五年龄22 来自北京去往上海
call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象,第二个参数差别就来了
:
- call 的参数是直接放进去的,第二第三第 n 个参数全都用逗号分隔,直接放到后面 obj.myFun.call(db,‘成都’, … ,‘string’ )。
- apply 的所有参数都必须放在一个数组里面传进去 obj.myFun.apply(db,[‘成都’, …, ‘string’ ])。
- bind 除了返回是函数以外,它 的参数和 call 一样。
当然,三者的参数不限定是 string 类型,允许是各种类型,包括函数 、 object 等等!
拓展: apply也可以被函数参数的解构所代替哦
var people=['Wayou','John','Sherlock'];
function sayHello(people1,people2,people3){
console.log(`hello${people1},${people2},${people3}`)
}
sayHello.apply(null,people)
// 等同于
sayHello(...people)