手写call, apply, bind

call, apply, bind这三个改变this指向的函数常常被用到，不管是开发仍是面试。了解其实现原理，是一名合格的前端程序员必备技能。

• 若是还不知道call, apply, bind的基本用法，请先自行百度

动手需知

在自行实现这几个方法前，你得知道几个基本的知识点：

• arguments是什么？ 借用MDN的说法：arguments对象是全部（非箭头）函数中均可用的局部变量。你可使用arguments对象在函数中引用函数的参数。此对象包含传递给函数的每一个参数
• slice的用法：slice(index)表明从下标index开始截取数组。（其余用法自行查询去） 那么接下来就是见证奇迹的时刻了。

call的实现

call的关键两点： 一、改变上下文指向； 二、传入多个参数。

Function.protoType.myCall = function(content){
  // call方法只能是方法才能调用
  if(typeof this !== "function"){
   throw new TypeError（"Error"）;
  }
  // 若是没有指定上下文，默认是全局对象window
  // 不要写成this.window。当this指向发生变化，可能找不到全局对象window
  content = content || window;
  let fn = Symbol(content);          // 避免属性重复
  let args = [...arguments].slice(1)
  //改变this指向
  content[fn] = this; //给content添加一个方法 指向this
  let result = content[fn](...args);  //传入参数
  delete content[fn];                     // 删除fn 方法，一个中间变量用完删除
  return result;
} 
复制代码

apply 的实现

apply的关键两点：一、改变上下文指向； 二、传入参数数组。 在实现原理上基本和call差很少，主要是参数的区别。

Function.protoType.myApply = function(content){
  // apply方法只能是方法才能调用
  if(typeof this !== "function"){
   throw new TypeError（"Error"）;
  }
  // 若是没有指定上下文，默认是全局对象window
  // 不要写成this.window。当this指向发生变化，可能找不到全局对象window
  content = content || window;
  let fn = Symbol(content);          // 避免属性重复
  let args = [...arguments][1];      // 记住传入的是数组！！！
 //改变this指向
  content[fn] = this; //给content添加一个方法 指向this
  let result ; 
  if(args){
     result = content[fn](...args);  //传入参数
  }else{
    result = content[fn]();  //传入参数
  }
  delete content[fn];                     // 删除fn 方法，一个中间变量用完删除
  return result;
} 
复制代码

bind 的实现

bind 的关键几点：一、改变上下文指向；二、传入多个参数；三、返回的是函数的方法名，不会当即执行。

Function.protoType.myBind = function(content){
    self = this;
  // bind方法只能是方法才能调用
  if(typeof this !== "function"){
   throw new TypeError（"Error"）;
  }
  // 能够支持柯里化传参，保存参数
  args = [...arguments].slice(1);
  function Fn (){
 // 考虑须要绑定的函数多是构造函数，this不会被绑定，可是参数仍然会传递。
      if(this instanceof Fn){
          return self(...args.concat(...arguments));//构造函数直接传参
      }else{
          return self.apply(content,args.concat(...arguments));// apply传的是数组
     }
  }
  return Fn;
}
复制代码

执行：

let Person = {
    name: 'Tom',
    say(x, y) {
        //console.log(this)
        console.log(`我叫${this.name}${x}${y}`)
    }
}
Person1 = {
    name: 'Tom1'
}
Person.say.myCall(Person1, ' call你干吗', ' 哈哈哈');
Person.say.myApply(Person1, [' apply你干吗', ' 哈哈哈',]);
Person.say.myBind(Person1, ' bind你干吗', ' 哈哈哈kk')()
复制代码

执行结果：

结果完美呈现，以上即是call, apply, bind的简单实现。