前言
call、apply、bind 的作用是改变函数运行时 this 的指向
先搞懂 this，自己初学的时候对 this 是一脸懵逼的 o((⊙﹏⊙))o...
this
总结了一下，this 实际上是在函数被调用时发生的绑定，它指向什么地方完全取决于函数在哪里被调用。但这里有个列外，构造函数的 this 和 es6 的箭头函数的 this 又有所不同。
1.函数调用
# Windowfunction print() { console.log(this);}print(); // 等价于window.print()2.对象属性调用
谁调用，this 指向谁
const obj = { name: 'outside', print() { console.log(this.name); }, extend: { name: 'inside', print() { console.log(this.name); }, },};obj.print(); // outsideobj.extend.print(); // inside第二个输出这里可能有点难理解，记住谁调用指向谁，是 extend 调用的，指向 extend
3.构造函数
构造函数的 this 将指向 new 出来的对象，在该例子中即 man
我们先看下面的代码：
class Man { constructor(name, age) { this.name = name; this.age = age; } print() { console.log(this.name, this.age); } extend = { name: 'inside', age: 99, print() { console.log(this.name, this.age); }, };}const man = new Man('小明', 18);console.log(man.print()); // 小明 18console.log(man.extend.print()); // inside 99第二个输出是不是有点奇怪，是的，我们打印一下 man 对象，发现其跟上一个例子情况是一样的,记住只是构造函数的 this 指向实例对象
4.箭头函数
箭头函数和匿名函数很像，不过箭头函数没有 this，箭头头函数的 this 是继承父执行上下文里面的 this
我们改写一下 3 中的 extend
class Man { constructor(name, age) { this.name = name; this.age = age; } print() { console.log(this.name, this.age); } extend = { name: 'inside', age: 99, print: () => { console.log(this.name, this.age); }, deep_pro: { name: 'deep_insise', age: 9999, print: () => { console.log(this); // Man {extend: {…}, name: "小明", age: 18} console.log(this.name, this.age); }, } };}const man = new Man('小明', 18);console.log(man.print()); // 小明 18console.log(man.extend.print()); // 小明 18console.log(man.extend.deep_pro.print()); // 小明 18call、apply、bind
上面说了一大堆，搞懂了 this，回到正题
call、apply、bind 的作用是改变函数运行时 this 的指向
- call、apply 作用是执行一个方法并改变 this，他们的区别是传入参数的方式不同
- bind 和前面两者不同的是只是返回一个改变了 this 的函数，需手动执行它
call 和 apply 容易混淆问题，我是这么记忆的：call 可以想象为打电话，打电话是一个一个接着打的不可能同时多个，所以 call 是传多个参数，apply 直接一个数组。
调用：
func.call(obj, arg1, arg2, ...);func.apply(obj, [arg1, arg2, ...]);我们试着用 call、apply、bind 改变 this：
class Caculate { constructor(name) { this.name = name; } add(a, b) { return this.name + a + b; }}const demo = new Caculate('构造函数:');console.log(demo.add('hello', ' world')); // 构造函数:hello world1.call
console.log(demo.add.call({ name: 'call改变:' }, 'hello', ' call')); // call改变:hello call2.apply
console.log(demo.add.apply({ name: 'apply改变:' }, ['hello', ' apply'])); // apply改变:hello apply3.bind
bind 和 call 一样，参数是一个一个传的
const bind_ = demo.add.bind({ name: 'bind改变:' }, 'hello', ' bind');console.log(bind_()); // "bind改变:hello bind"使用 bind 可以实现函数柯里化
柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术
demo.add.bind({ name: 'bind改变:' }, 'hello')(' bind');看到这里，相信你已经理解了，上面解释 this 的时候函数调用有两种形式：
print(); // 1.函数调用man.extend.print(); // 2.对象属性调用实际上我们可以把它用 call 重写为：
print.call(window);man.extend.print.call(man.extend);实现简单的 call、apply、bind
我们也可以动手实现简单的 call、apply、bind，有助于加深理解
call：
Function.prototype.call_ = function (context, ...args) { let context_ = context || window; // 让 fn 的上下文为 context context_.fn = this; const result = context_.fn(...args); delete context_.fn; return result;};apply：
Function.prototype.apply_ = function (context, args) { let context_ = context || window; // 让 fn 的上下文为 context context_.fn = this; let param_ = args || []; const result = context_.fn(param_); delete context_.fn; return result;};bind：
Function.prototype.bind_ = function (context, ...args) { let fn = this; return function () { fn.apply(context, args.concat(...arguments)); };};扩展
上面讲解 this 的时候讲到 this 实际上是在函数被调用时发生的绑定，它指向什么地方完全取决于函数在哪里被调用，但又有特例: 箭头函数和构造函数
其实我们可以用 bind 实现箭头函数,照搬上面的例子:
class Man { constructor(name, age) { this.name = name; this.age = age; } print() { console.log(this.name, this.age); } extend = { name: 'inside', age: 99, print: function print() { console.log(this.name, this.age); }.bind(this), // 手动绑定this };}const man = new Man('小明', 18);console.log(man.print()); // 小明 18console.log(man.extend.print()); 小明 18自己手写一个 new 操作符方法：
function Factory(fn, ...args) { const target = Object.create(fn.prototype); const res = fn.apply(target, args); return res instanceof Object ? res : target;}以上纯手敲 + 个人理解，如有不足，欢迎指出~
END