三句话说清楚JS中的call，apply和bind的作用和区别

目录

• 1.用法示例
• 2.相同点
• 3.不同点

用法示例：

//首先来看三个方法的基本语法：
// ?apply的使用语法
// 函数名字.apply(对象,[参数1,参数2,...]);
// ?call的使用语法
// 函数名字.call(对象,参数1,参数2,...);
// ?bind的使用语法
// 函数名字.bind(对象,参数1,参数2,...);

//作用：前两个都是为了改变this指向，bind是改变this指向并且复制一个这个方法返回



//接着我们来看看怎么用
function f1(x,y,z){
    //这里用到了模板字符串，不了解的可以看我另一篇博客，有详细说明
    console.log(`这是f1的this${this},这里是参数和${(x+y+z)}`);
};
f1(1,2,3);//输出：这是f1的this[object global],这里是参数和6
//为了方便演示，声明一个对象
let obj = {
    name: "alai",
    age: 20
};
//?注意第一个区别，参数传递方式
f1.call(obj,1,2,3);//这是f1的this[object Object],这里是参数和6
f1.apply(obj,[1,2,3]);//这是f1的this[object Object],这里是参数和6
f1.bind(obj,1,2,3);//?这里不输出，至于为什么我们来看三个函数的返回值



//查看返回值
let f = f1.call(obj,1,1,1);
let t = f1.apply(obj,[1,1,1]);
let s = f1.bind(obj,1,1,1);//这里也不输出，要输出的话要调用s();
//像这样：（这里注意一点，bind使用可以先不传参数（除对象外的参数），调用返回值函数时再传）
s();//这是f1的this[object Object],这里是参数和3
let v = f1.bind(obj);
v(2,2,2);//这是f1的this[object Object],这里是参数和6
//看看返回值都是什么
console.log(`f:${f} t:${t} s:${s}`);//f:undefined t:undefined s:function () { [native code] }
//可以知道bind返回值是一个函数，call和apply没有返回值




//了解完了他们，想不想知道他们从哪里来，
//为什么f1可以调用？我们先来看看f1里面有什么
console.dir(f1);
//可以看到f1的系统原型"__proto__"中有这些方法，那么它指向哪里呢？让我们来一探究竟
//因为函数就是对象，所以它可能的指向只有这两个
console.log(f1.__proto__==Object.prototype);//false
console.log(f1.__proto__==Function.prototype);//true
//结果不言而喻，这三个方法并不是方法的属性而是Function的原型下面的方法

相同点：

1. 都能改变this的指向
2. 都能传递参数
3. 都能通过方法"."方法名调用

不同点：

1. 函数名不同
2. 参数传递方式不同（注意看第二个）
3. 改变this指向的时机不同(bind在复制时改变，其他两个在调用时改变)
4. 参数传递时机不同（注意看第三个）