三个比较和用法介绍
call()、apply()、bind()三者目的都是用来改变this的指向，但用法有一些不同
call()
- 语法：
call(thisObj,arg1,arg2,...,argN) - 参数：
thisObj：this要指向的对象，arg1,arg2,...,argN:参数列表，参数可以是任意类型，当thisObj为null、undefined的时候，默认指向window - 注意：会立即执行函数
apply()
- 语法：
apply(thisObj,[arg1,arg2,...,argN]) - 参数：
thisObj：this要指向的对象，[arg1,arg2,...,argN]:参数，这里为参数数组，这也是与call()的不同点,参数数组中可以是任意类型 - 注意:会立即执行函数
bind()
- 语法：
bind(thisObj,arg1,arg2,...,argN) - 参数：
thisObj：this要指向的对象，arg1,arg2,...,argN:参数列表，参数可以是任意类型，当thisObj为null、undefined的时候，默认指向window - 返回值：返回一个绑定新this的函数
- 注意：bind()函数不会立即执行绑定this后的函数，而是将该函数返回，如果需要立即执行需要bind()()
通过实际例子对call()、apply()、bind()三者进行说明
1.先来看两个常规的例子,熟悉一下this指向
var name = '小王',age = 17;
var obj = {
name:'小张',
objAge:this.age,
myFunc:function(){
console.log(`${this.name} 年龄是：${this.age}`);
}
}
console.log(obj.objAge); //17 如果用let定义，不存在变量提升，则这里为undefined
obj.myFunc(); //小张 年龄是：undefined
var name = '小刚';
function show(){
console.log(this.name);
}
show();//小刚
第一个例子中调用myFunc(),这个里面的this是指向obj的，第二个例子中是全局声明的普通的函数，它里面的this是指向window的
2.我们利用call()、apply()和bind()在未传参的情况下来重定义this这个对象
var name = '小王',age = 17;
var obj = {
name:'小张',
age:this.age,
myFunc:function(){
console.log(`${this.name} 年龄是：${this.age}`);
}
}
var db = {
name:'小刚',
age:20
}
obj.myFunc(); //小张 年龄是：17
obj.myFunc.call(db); //小刚 年龄是：20
obj.myFunc.apply(db);//小刚 年龄是：20
obj.myFunc.bind(db)();//小刚 年龄是：20
这个例子我们可以显而易见的看到，利用call()、apply()和bind()方法，将this指向了db这个对象
3.通过传参来比较call()、apply()和bind()三者的传参情况
var name = '小王',age = 17;
var obj = {
name:'小张',
age:this.age,
myFunc:function(from,to){
console.log(`${this.name} 年龄是：${this.age} 来自：${from} 去往：${to}`);
}
}
var db = {
name:'小刚',
age:20
}
obj.myFunc(); //小张 年龄是：17 来自：undefined 去往：undefine
obj.myFunc.call(db,'北京','上海'); //小刚 年龄是：20 来自：北京 去往：上海
obj.myFunc.apply(db,['北京','上海']); //小刚 年龄是：20 来自：北京 去往：上海
obj.myFunc.bind(db,'北京','上海')(); //小刚 年龄是：20 来自：北京 去往：上海
乾坤未定，你我皆是黑马！
|
