手写源码系列（一）：call、apply和bind

最近工作不是十分紧张，闲来无事，决定好好巩固一下基础知识。最近的风气是，各个公司都喜欢拿源码说事儿，那我们就借此机会，关注一下大家日常开发中经常用到的方法、属性的源码。

概念

在开始之前，我们非常有必要去了解、巩固一下call、apply和bind在开发中的具体作用。

// call
    var a = {
        name : "Cherry",

        func1: function () {
            console.log(this.name)
        },

        func2: function () {
            setTimeout(  function () {
                this.func1()
            }.call(a),100);
        }

    };

    a.func2() // "Cherry"
    
// apply 
    var a = {
        name : "Cherry",

        func1: function () {
            console.log(this.name)
        },

        func2: function () {
            setTimeout(  function () {
                this.func1()
            }.apply(a),100);
        }

    };

    a.func2()   // Cherry
    
// bind
  var a = {
        name : "Cherry",

        func1: function () {
            console.log(this.name)
        },

        func2: function () {
            setTimeout(  function () {
                this.func1()
            }.bind(a)(),100);
        }

    };

    a.func2()  // Cherry

相同点：都可以改变this指向。
不同点：call方法接受的是一个参数列表，apply的第二个参数为数组；bind方法返回的不是具体数值，而是函数。
如果想获取bind方法的返回值，可主动执行

function sayHelloTo (to) {
    console.log(`${this.name} say hello to ${to}`)
}

var Jerry = {
  name: 'Jerry'
}
sayHelloTo.call(Jerry, 'Tom')
//Jerry say hello to Tom.

var Foo = {
  name: 'Foo'
}
sayHelloTo.apply(Foo, ['Bar'])
//Foo say hello to Bar.

var XYZ = {
  name: 'XYZ'
}
var say = sayHelloTo.bind(XYZ)
say('ABC')
//XYZ say hello to ABC.

手写call方法

Function.prototype.myCall = function(context, ...args) {
  // 判断是否是undefined和null
  if (typeof context === 'undefined' || context === null) { //1
    context = window
  }
  let fnSymbol = Symbol()      //2
  context[fnSymbol] = this    // 3
  let fn = context[fnSymbol] (...args) //4
  delete context[fnSymbol] //5
  return fn  //6
}

我们利用上面的myCall方法，替换call来执行上面的例子，可以得到相同的结果

我们分别来解读一下上面备注的数字：
1、判断context的值，如果没有或者为undefined,则this指向window。（与call方法中，如果第一个参数行为保持一致）
2、为传入的context扩展一个属性。
3、将原函数指向这个属性。（this在调用时，指向call前面的函数）
4、执行原函数。
5、删除传入的对象的无用属性。
6、返回执行后的值。

这里需要注意的地方有两点：
1、要熟练使用es6相关知识(...args,Symbol)
2、之所以能获取到this.name,是因为此时的this指向的是context

手写apply方法

Function.prototype.myApply = function(context, args) { // 1
  // 判断是否是undefined和null
  if (typeof context === 'undefined' || context === null) {
    context = window
  }
  let fnSymbol = Symbol()
  context[fnSymbol] = this
  let fn = context[fnSymbol] (...args)
  return fn
}

注意传参不同。
告诉你个小秘密，如何记住传的是列表类还是数组呢？Array与apply都是A开头，那就传数组喽！call不是A开头，那就是列表！

手写bind方法

Function.prototype.myBind = function(context) {
// 判断是否是undefined和null
    if (typeof context === "undefined" || context === null) {
    	context = window;
    }
    self = this;
    return function(...args) {
    	return self.apply(context, args);
    }
}

可以借用apply或者call，间接实现bind，并且，注意开头提到的区别！
bind返回的是函数哦～

如果文章对的前端学习有帮助，别忘了点赞关注哦～

摘录自
较真的前端
this、apply、call、bind
MDN