改变this指向的三个函数call, apply, bind的实现

（一）call源码解析

先上一个call使用

function add(c, d) {
  return this.a + this.b + c + d;
}

const obj = { a: 1, b: 2 };

console.error(add.call(obj, 3, 4)); // 10

大统上的说法就是，call改变了this的指向。然后，介绍this xxx什么一大堆名词，反正不管你懂不懂，成功绕晕你就已经ok了，但是实际发生的过程，可以看成下面的样子。

const o = {
  a: 1,
  b: 2,
  add: function(c, d) {
    return this.a + this.b + c + d
  }
};

1. 给o对象添加一个add属性，这个时候 this 就指向了 o，
2. o.add(5,7)得到的结果和add.call(o, 5, 6)相同。
3. 但是给对象o添加了一个额外的add属性，这个属性我们是不需要的，所以可以使用delete删除它。

so, 基本为以下三部。

// 1. 将函数设为对象的属性
 o.fn = bar
// 2. 执行该函数
 o.fn()
// 3. 删除该函数
 delete o.fn

 

//基于ES3 实现call

Function.prototype.es3Call = function (context) {
  var content = context || window;
  content.fn = this;
  var args = [];
  // arguments是类数组对象，遍历之前需要保存长度，过滤出第一个传参
  for (var i = 1, len = arguments.length ; i < len; i++) {
    // 避免object之类传入
    args.push('arguments[' + i + ']');
  }
  var result = eval('content.fn('+args+')');
  delete content.fn;
  return result;
}
console.error(add.es3Call(obj, 3, 4)); // 10
console.log(add.es3Call({ a: 3, b: 9 }, 3, 4)); // 19
console.log(add.es3Call({ a: 3, b: 9 }, {xx: 1}, 4)); // 12[object Object]4

//基于ES6 实现call, 其实差别不大，es6新增… rest，这就可以放弃eval的写法

// ES6 call 实现
Function.prototype.es6Call = function (context) {
  var context = context || window;
  context.fn = this;
  var args = [];
  for (var i = 1, len = arguments.length; i < len; i++) {
    args.push('arguments[' + i + ']');
  }
  const result = context.fn(...args);
  return result;
}

console.error(add.es6Call(obj, 3, 4));
console.log(add.es3Call({ a: 3, b: 9 }, {xx: 1}, 4)); // 12[object Object]4

（二）apply源码解析

apply和call区别在于apply第二个参数是Array，而call是将一个个传入

// 基于es3实现

Function.prototype.es3Apply = function (context, arr) {
  var context = context || window;
  context.fn = this;
  var result;
  if (!arr) {
    result = context.fn();
  } else {
    // 获取参数
    var args = [];
    for (var i = 0, len = arr.length; i < len; i++) {
      args.push('arr[' + i + ']');
    }
    // 执行函数
    result = eval('context.fn(' + args + ')')
  }
  delete context.fn;
  return result
}

console.log(add.es3Apply(obj, [1, 'abc', '2'])); // 4abc
// console.log(add.apply(obj, [1, 2]));

// 基于es6实现

Function.prototype.es6Apply = function (context, arr) {
  var context = context || window;
  context.fn = this;
  var result;
  if (!arr) {
    result = context.fn();
  } else {
    if (!(arr instanceof Array)) throw new Error('params must be array');
    result = context.fn(...arr);
  }
  delete context.fn;
  return result
}

console.error(add.es6Apply(obj, [1, 2])); // 6

（三）bind源码解析

bind() 方法会创建一个新函数。
当这个新函数被调用时，bind() 的第一个参数将作为它运行时的 this，
之后的一序列参数将会在传递的实参前传入作为它的参数。

//ES3实现

Function.prototype.es3Bind = function (context) {
  if (typeof this !== "function") throw new TypeError('what is trying to be bound is not callback');
  var self = this;
  var args = Array.prototype.slice.call(arguments, 1);
  const fBound = function () {
    // 获取函数的参数
    var bindArgs = Array.prototype.slice.call(arguments);
    // 返回函数的执行结果
    // 判断函数是作为构造函数还是普通函数
    // 构造函数this instanceof fNOP返回true，将绑定函数的this指向该实例，可以让实例获得来自绑定函数的值。
    // 当作为普通函数时，this 指向 window，此时结果为 false，将绑定函数的 this 指向 context
    return self.apply(this instanceof fNOP ? this: context, args.concat(bindArgs));
  }
  // 创建空函数
  var fNOP = function () {};
  // fNOP函数的prototype为绑定函数的prototype
  fNOP.prototype = this.prototype;
  // 返回函数的prototype等于fNOP函数的实例实现继承
  fBound.prototype = new fNOP();
  // 以上三句相当于Object.create(this.prototype)
  return fBound;
}

var func = foo.es3Bind({a: 1}, '1st');
func('2nd');  // 1 100 1st 2nd
func.call({a: 2}, '3rd'); // 1 100 1st 3rd
new func('4th');  //undefined 100 1st 4th

//es6实现

Function.prototype.es6Bind = function(context, ...rest) {
  if (typeof this !== 'function') throw new TypeError('invalid invoked!');
  var self = this;
  return function F(...args) {
    if (this instanceof F) {
      return new self(...rest, ...args)
    }
    return self.apply(context, rest.concat(args))
  }
}

var func = foo.es3Bind({a: 1}, '1st');
func('2nd');  // 1 100 1st 2nd
func.call({a: 2}, '3rd'); // 1 100 1st 3rd
new func('4th');  //undefined 100 1st 4th

    var obj ={
        value: 1
    }
    function bar(yeah, ok){
        this.age = "18"
        console.log(yeah)
        console.log(ok)
        console.log(this.value)
    }
  var fbind =  bar.bind(obj,'我很棒')
   var fBind = new fbind('是的')
  console.log(fBind.age) //18
   //fbind('是的')  // 1

   // 实现   1、保存this返回一个函数  2、可以传入参数 3、一个绑定函数也能使用new操作符创建对象：这种行为就像把函数当成构造器。提供的this值被忽略，同时调用时的参数被提供给模拟函数
   Function.prototype.bind2 = function(context){
       var self = this
       //console.log(this) // this指向bar函数    接下来让this指向obj
       var args = Array.prototype.slice.call(arguments,1)  // 将类数组arguments转为真正的数组
      // console.log(args)
       var fResult =  function(){
        var args2 = Array.prototype.slice.call(arguments)
        // console.log(args2)
       // console.log(this)
        self.apply(this instanceof self? this : context,args.concat(args2)) // 三元表达式处解读 this是bar函数的实例吗 是返回this 不是返回context  为了兼容 2 、3点需求
       }
       fResult.prototype =bar.prototype   // bar函数的原型赋给fResult函数 就拥有bar函数属性与方法了 
       return fResul
   }
   var fbind2 = bar.bind2(obj,'孤独的人会走的更远')
   var fBind2 = new fbind2('脑子不用就会生锈')
   console.log(fBind2.age)
  // fbind2('脑子不用就会生锈')

 

原文链接：https://blog.csdn.net/u010377383/java/article/details/80646415