• 技术文章 >web前端 >js教程

    一文带你深入了解实现call、apply和bind方法

    青灯夜游青灯夜游2021-07-12 18:04:30转载124
    本篇文章通过代码示例,给大家深入解析一下如何实现 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 调用的,就能实现这一点,这就是我们的主要目标。

    实现要点

    手写实现 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,但是有一些不同的要点需要注意:

    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

    更多编程相关知识,请访问:编程教学!!

    以上就是一文带你深入了解实现call、apply和bind方法的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:segmentfault,如有侵犯,请联系admin@php.cn删除
    专题推荐:JavaScript call apply bind
    上一篇:浅谈一下Angular模板引擎ng-template 下一篇:javascript中怎么单行注释
    VIP会员

    相关文章推荐

    • javascript中创建对象的方法有哪几种• javascript怎么将字符串转小写• javascript中slice方法怎么用• javascript定义变量写法• javascript是不是弱语言• 在javascript中添加注释正确的是什么

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网