栗子：先看明白下面
var name = '大花';
var age = 18;
var obj = {
name: '小花',
objAge: this.age,
// age: 20,
describe: function () {
console.log(this);//obj 对象(这里的objAge是有值的，值为18)
console.log(`${this.name}今年${this.age}岁`)
},
home: function(f,t) {
console.log(`${this.name}今年${this.age}岁,来自${f},在${t}上班`)
}
}
console.log(obj.objAge);//18
obj.describe();//小花今年undefined岁
// 若在obj中重新定义一个age为20，则此时打印出来的为"小花今年20岁"
// 由此可知： 在obj对象的describe方法中 this的指向为 obj对象
function myFun() {
console.log(this);//window
console.log(`${this.name}今年${this.age}岁`)
}
myFun();//大花今年18岁
// 由上述可知： 在obj对象的describe方法中 this的指向为 obj对象
// 在myFun()方法中 this的指向为 window
image.png
1、call()、apply()、bind()都是用来重定义 this 这个对象的
var objNow = {
name: '花花',
age: 26,
}
obj.describe.call(objNow);//花花今年26岁
obj.describe.apply(objNow);//花花今年26岁
obj.describe.bind(objNow)();//花花今年26岁
// 上述 call()、apply()、bind()都可以改变this的指向；其中bind需要自调用
// 这里的this指向都是指向objNow对象
image.png
2、对比call()、apply()、bind() 传参情况
obj.home.call(objNow,'安徽','南京');//花花今年26岁,来自安徽,在南京上班
obj.home.apply(objNow,['安徽','南京']);//花花今年26岁,来自安徽,在南京上班
obj.home.bind(objNow,'安徽','南京')();//花花今年26岁,来自安徽,在南京上班
obj.home.bind(objNow,['安徽','南京'])();//花花今年26岁,来自安徽,南京,在undefined上班
image.png
总结:
- 1、这三个函数的第一个参数都是 this 的指向对象，
- 2、第二个参数差别就来了：
- call的参数是直接放进去的，第二第三第n个参数全都用逗号分隔，直接放到后面 obj.home.call(objNow,'安徽',...,'string');
- apply的所有参数都必须放在一个数组里面传进去obj.home.apply(objNow,['安徽', ..., 'string' ]);
- bind除了返回是函数以外，它的参数和call() 一样。
当然，三者的参数不限定是string类型，允许是各种类型，包括函数 、 object 等等
注意： 上述图片均为控制台的打印结果
