Focus on FE learning

这是 JS 原生方法原理探究系列的第一篇文章。本文会介绍如何实现 call、apply 和 bind 方法。关于这几个方法的具体用法，MDN 已经描述得很清楚了，这里不再赘述。

手写实现 call

ES3 版本

Function.prototype.myCall = function(thisArg){
    if(typeof this != 'function'){
        throw new Error('The caller must be a function')
    }
 	if(thisArg === undefined || thisArg === null){
        thisArg = globalThis
    } else {
        thisArg = Object(thisArg)
    }   
    var args = []
    for(var i = 1;i < arguments.length;i ++){
        args.push('arguments[' + i + ']')
    }
    thisArg.fn = this
    var res = eval('thisArg.fn(' + args + ')')
    delete thisArg.fn
    return res
}

ES6 版本

Function.prototype.myCall = function(thisArg,...args){
	if(typeof this != 'function'){
        throw new Error('The caller must be a function')
    }
    if(thisArg === undefined || thisArg === null){
        thisArg = globalThis
    } else {
        thisArg = Object(thisArg)
    }
    thisArg.fn = this
    const res = thisArg.fn(...args)
    delete thisArg.fn
    return res
}

通过 call 调用函数的时候，可以通过传给 call 的 thisArg 指定函数中的 this。而只要使得函数是通过 thisArg 调用的，就能实现这一点，这就是我们的主要目标。

实现要点

最终是通过函数去调用 myCall 的，所以 myCall 和 call 一样挂载在函数原型上。同时，也正因为是通过函数去调用 myCall 的，所以在 myCall 内部我们可以通过 this 拿到 myCall的调用者，也就是实际执行的那个函数。
按理说，myCall 是挂载在函数原型上，当我们通过一个非函数去调用 myCall 的时候，肯定会抛出错误，那么为什么还要在 myCall 中检查调用者的类型，并自定义一个错误呢？这是因为，当一个调用者 obj = {} 是一个对象，但是继承自 Function 的时候（obj.__proto__ = Function.prototype），它作为一个非函数实际上也是可以调用 myCall 方法的，这时候如果不进行类型检查以确保它是个函数，那么后面直接将它当作函数调用的时候，就会抛出错误了
传给 call 的 thisArg 如果是 null 或者 undefined，那么 thisArg 实际上会指向全局对象；如果 thisArg 是一个基本类型，那么可以使用 Object() 做一个装箱操作，将其转化为一个对象 —— 主要是为了确保后续可以以方法调用的方式去执行函数。那么可不可以写成 thisArg = thisArg ? Object(thisArg) : globalThis 呢？其实是不可以的，如果 thisArg 是布尔值 false，那么会导致 thisArg 最终等于 globalThis，但实际上它应该等于 Boolean {false}。
前面说过，可以在 myCall 里通过 this 拿到实际执行的那个函数，所以 thisArg.fn = this 相当于将这个函数作为 thisArg 的一个方法，后面我们就可以通过 thisArg 对象去调用这个函数了。
thisArg.fn = this 相当于是给 thisArg 增加了一个 fn 属性，所以返回执行结果之前要 delete 这个属性。此外，为了避免覆盖 thisArg 上可能存在的同名属性 fn，这里也可以使用 const fn = Symbol('fn') 构造一个唯一属性，然后 thisArg[fn] = this。
ES3 版本和 ES6 版本主要的区别在于参数的传递以及函数的执行上：
1. ES6 因为引入了剩余参数，所以不管实际执行函数的时候传入了多少个参数，都可以通过 args 数组拿到这些参数，同时因为引入了展开运算符，所以可以展开 args 参数数组，把参数一个个传递给函数执行
2. 但在 ES3 中没有剩余参数这个东西，所以在定义 myCall 的时候只接收一个 thisArg 参数，然后在函数体中通过 arguments 类数组拿到所有参数。我们需要的是 arguments 中除第一个元素（thisArg）之外的所有元素，怎么做呢？如果是 ES6，直接[...arguments].slice(1)就可以了，但这是 ES3，于是我们只能从索引 1 开始遍历 arguments，然后 push 到一个 args 数组中了。而且还要注意的是，这里 push 进去的是字符串形式的参数，这主要是为了方便后续通过 eval 执行函数的时候，将参数一个一个传递给函数。
3. 为什么必须通过 eval 才能执行函数呢？因为我们不知道函数实际上要接收多少个参数，况且也用不了展开运算符，所以只能构造一个可执行的字符串表达式，显式地传入函数的所有参数。

手写实现 apply

apply 的用法和 call 很类似，因此实现也很类似。需要注意的区别是，call 在接受一个 thisArg 参数之后还可以接收多个参数（即接受的是参数列表），而 apply 在接收一个 thisArg 参数之后，通常第二个参数是一个数组或者类数组对象：

fn.call(thisArg,arg1,arg2,...)
fn.apply(thisArg,[arg1,arg2,...])

如果第二个参数传的是 null 或者 undefined，那么相当于是整体只传了 thisArg 参数。

ES3 版本

Function.prototype.myApply = function(thisArg,args){
    if(typeof this != 'function'){
        throw new Error('the caller must be a function')
    } 
    if(thisArg === null || thisArg === undefined){
        thisArg = globalThis
    } else {
        thisArg = Object(thisArg)
    }
    if(args === null || args === undefined){
        args = []
    } else if(!Array.isArray(args)){
        throw new Error('CreateListFromArrayLike called on non-object')
    }
    var _args = []
    for(var i = 0;i < args.length;i ++){
        _args.push('args[' + i + ']')
    }
    thisArg.fn = this
    var res = _args.length ? eval('thisArg.fn(' + _args + ')'):thisArg.fn()
    delete thisArg.fn
    return res
}

ES6 版本

Function.prototype.myApply = function(thisArg,args){
    if(typeof thisArg != 'function'){
        throw new Error('the caller must be a function')
    } 
    if(thisArg === null || thisArg === undefined){
        thisArg = globalThis
    } else {
        thisArg = Object(thisArg)
    }
    if(args === null || args === undefined){
        args = []
    } 
    // 如果传入的不是数组，仿照 apply 抛出错误
    else if(!Array.isArray(args)){
        throw new Error('CreateListFromArrayLike called on non-object')
    }
    thisArg.fn = this
    const res = thisArg.fn(...args)
    delete thisArg.fn
    return res
}

实现要点

基本上和 call 的实现是差不多的，只是我们需要检查第二个参数的类型。

手写实现 bind

bind 也可以像 call 和 apply 那样给函数绑定一个 this，但是有一些不同的要点需要注意：

bind 不是指定完 this 之后直接调用原函数，而是基于原函数返回一个内部完成了 this 绑定的新函数
原函数的参数可以分批次传递，第一批可以在调用 bind 的时候作为第二个参数传入，第二批可以在调用新函数的时候传入，这两批参数最终会合并在一起，一次传递给新函数去执行
新函数如果是通过 new 方式调用的，那么函数内部的 this 会指向实例，而不是当初调用 bind 的时候传入的 thisArg。换句话说，这种情况下的 bind 相当于是无效的

ES3 版本

这个版本更接近 MDN 上的 polyfill 版本。

Function.prototype.myBind = function(thisArg){
    if(typeof this != 'function'){
        throw new Error('the caller must be a function')
    }
    var fnToBind = this
    var args1 = Array.prototype.slice.call(arguments,1)
    var fnBound = function(){
        // 如果是通过 new 调用
        return fnToBind.apply(this instanceof fnBound ? this:thisArg,args1.concat(args2))
    }
    // 实例继承
    var Fn = function(){}
    Fn.prototype = this.prototype
    fnBound.prototype = new Fn()
    return fnBound
}

ES6 版本

Function.prototype.myBind = function(thisArg,...args1){
    if(typeof this != 'function'){
        throw new Error('the caller must be a function')
    }
    const fnToBind = this
    return function fnBound(...args2){
        // 如果是通过 new 调用的
        if(this instanceof fnBound){
            return new fnToBind(...args1,...args2)
        } else {
            return fnToBind.apply(thisArg,[...args1,...args2])
        }
    }
}

实现要点

bind 实现内部 this 绑定，需要借助于 apply，这里假设我们可以直接使用 apply 方法
先看比较简单的 ES6 版本:
1. 参数获取：因为 ES6 可以使用剩余参数，所以很容易就可以获取执行原函数所需要的参数，而且也可以用展开运算符轻松合并数组。
2. 调用方式：前面说过，如果返回的新函数 fnBound 是通过 new 调用的，那么其内部的 this 会是 fnBound 构造函数的实例，而不是当初我们指定的 thisArg，因此 this instanceof fnBound会返回 true，这种情况下，相当于我们指定的 thisArg 是无效的，new 返回的新函数等价于 new 原来的旧函数，即 new fnBound 等价于 new fnToBind，所以我们返回一个 new fnToBind 即可；反之，如果 fnBound 是普通调用，则通过 apply 完成 thisArg 的绑定，再返回最终结果。从这里可以看出，bind 的 this 绑定，本质上是通过 apply 完成的。
再来看比较麻烦一点的 ES3 版本：
1. 参数获取：现在我们用不了剩余参数了，所以只能在函数体内部通过 arguments 获取所有参数。对于 myBind，我们实际上需要的是除开第一个传入的 thisArg 参数之外的剩余所有参数构成的数组，所以这里可以通过 Array.prototype.slice.call 借用数组的 slice 方法（arguments 是类数组，无法直接调用 slice），这里的借用有两个目的：一是除去 arguments 中的第一个参数，二是将除去第一个参数之后的 arguments 转化为数组（slice 本身的返回值就是一个数组，这也是类数组转化为数组的一种常用方法）。同样地，返回的新函数 fnBound 后面调用的时候也可能传入参数，再次借用 slice 将 arguments 转化为数组
2. 调用方式：同样，这里也要判断 fnBound 是 new 调用还是普通调用。在 ES6 版本的实现中，如果是 new 调用 fnBound，那么直接返回 new fnToBind()，这实际上是最简单也最容易理解的方式，我们在访问实例属性的时候，天然就是按照 实例 => 实例.__proto__ = fnToBind.prototype 这样的原型链来寻找的，可以确保实例成功访问其构造函数 fnToBInd 的原型上面的属性；但在 ES3 的实现中（或者在网上部分 bind 方法的实现中），我们的做法是返回一个 fnToBind.apply(this)，实际上相当于返回一个 undefined 的函数执行结果，根据 new 的原理，我们没有在构造函数中自定义一个返回对象，因此 new 的结果就是返回实例本身，这点是不受影响的。这个返回语句的问题在于，它的作用仅仅只是确保 fnToBind 中的 this 指向 new fnBound 之后返回的实例，而并没有确保这个实例可以访问 fnToBind 的原型上面的属性。实际上，它确实不能访问，因为它的构造函数是 fnBound 而不是 fnToBind，所以我们要想办法在 fnBound 和 fnToBind 之间建立一个原型链关系。这里有几种我们可能会使用的方法：
```
// 这里的 this 指的是 fnToBind
fnBound.prototype = this.prototype
```
  这样只是拷贝了原型引用，如果修改 fnBound.prototype，则会影响到 fnToBind.prototype，所以不能用这种方法
```
// this 指的是 fnToBind
fnBound.prototype = Object.create(this.prototype)
```
  通过 Object.create 可以创建一个 __proto__ 指向 this.prototype 的实例对象，之后再让 fnBound.prototype 指向这个对象，则可以在 fnToBind 和 fnBound 之间建立原型关系。但由于 Object.create 是 ES6 的方法，所以无法在我们的 ES3 代码中使用。
```
// this 指的是 fnToBind
const Fn = function(){}
Fn.prototype = this.prototype
fnBound.prototype = new Fn()
```
  这是上面代码采用的方法：通过空构造函数 Fn 在 fnToBind 和 fnBound 之间建立了一个联系。如果要通过实例去访问 fnToBind 的原型上面的属性，可以沿着如下原型链查找：
  实例 => 实例.__proto__ = fnBound.prototype = new Fn() => new Fn().__proto__ = Fn.prototype = fnToBind.prototype

JS 原生方法原理探究（一）：如何实现 call、apply 和 bind？

手写实现 call

ES3 版本

ES6 版本

实现要点

手写实现 apply

ES3 版本

ES6 版本

实现要点

手写实现 bind

ES3 版本

ES6 版本

实现要点