JS 原生方法原理探究(一):深入解析如何实现 call、apply 和 bind

Chor
English

这是 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 调用的,就能实现这一点,这就是我们的主要目标。

实现要点

  1. 最终是通过函数去调用 myCall 的,所以 myCallcall 一样挂载在函数原型上。同时,也正因为是通过函数去调用 myCall 的,所以在 myCall 内部我们可以通过 this 拿到 myCall的调用者,也就是实际执行的那个函数。
  2. 按理说,myCall 是挂载在函数原型上,当我们通过一个非函数去调用 myCall 的时候,肯定会抛出错误,那么为什么还要在 myCall 中检查调用者的类型,并自定义一个错误呢?这是因为,当一个调用者 obj = {} 是一个对象,但是继承自 Function 的时候(obj.__proto__ = Function.prototype),它作为一个非函数实际上也是可以调用 myCall 方法的,这时候如果不进行类型检查以确保它是个函数,那么后面直接将它当作函数调用的时候,就会抛出错误了
  3. 传给 call 的 thisArg 如果是 null 或者 undefined,那么 thisArg 实际上会指向全局对象;如果 thisArg 是一个基本类型,那么可以使用 Object() 做一个装箱操作,将其转化为一个对象 —— 主要是为了确保后续可以以方法调用的方式去执行函数。那么可不可以写成 thisArg = thisArg ? Object(thisArg) : globalThis 呢?其实是不可以的,如果 thisArg 是布尔值 false,那么会导致 thisArg 最终等于 globalThis,但实际上它应该等于 Boolean {false}
  4. 前面说过,可以在 myCall 里通过 this 拿到实际执行的那个函数,所以 thisArg.fn = this 相当于将这个函数作为 thisArg 的一个方法,后面我们就可以通过 thisArg 对象去调用这个函数了。
  5. thisArg.fn = this 相当于是给 thisArg 增加了一个 fn 属性,所以返回执行结果之前要 delete 这个属性。此外,为了避免覆盖 thisArg 上可能存在的同名属性 fn,这里也可以使用 const fn = Symbol('fn') 构造一个唯一属性,然后 thisArg[fn] = this
  6. 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 也可以像 callapply 那样给函数绑定一个 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])
        }
    }
}

实现要点

1.bind 实现内部 this 绑定,需要借助于 apply,这里假设我们可以直接使用 apply 方法

2.先看比较简单的 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 完成的。

3.再来看比较麻烦一点的 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

阅读 202
1.8k 声望
5.8k 粉丝
0 条评论
你知道吗?

1.8k 声望
5.8k 粉丝
宣传栏