手写call、apply、bind实现及详解

它们有什么不一样？怎么用？

call 接收多个参数，第一个为函数上下文也就是this，后边参数为函数自己的参数。

let obj = {
            name: "一个"
        }

        function allName(firstName, lastName) {
            console.log(this)
            console.log(`个人全名是“${firstName}${this.name}${lastName}”`)
        }
        // 很明显此时allName函数是没有name属性的
        allName('我是', '前端') //个人全名是“我是前端”  this指向window
        allName.call(obj, '我是', '前端') //个人全名是“我是一个前端” this指向obj
复制代码

apply

apply接收两个参数，第一个参数为函数上下文this，第二个参数为函数参数只不过是经过一个数组的形式传入的。

allName.apply(obj, ['我是', '前端'])//个人全名是“我是一个前端” this指向obj
复制代码

bind

bind 接收多个参数，第一个是bind返回值返回值是一个函数上下文的this，不会当即执行。

let obj = {
            name: "一个"
        }

        function allName(firstName, lastName, flag) {
            console.log(this)
            console.log(`个人全名是"${firstName}${this.name}${lastName}"个人座右铭是"${flag}"`)
        }
        allName.bind(obj) //不会执行
        let fn = allName.bind(obj)
        fn('我是', '前端', '好好学习每天向上')

        // 也能够这样用，参数能够分开传。bind后的函数参数默认排列在原函数参数后边
        fn = allName.bind(obj, "你是")
        fn('前端', '好好学习每天向上')
复制代码

接下来搓搓手实现call、apply和bind

实现call

let Person = {
            name: 'Tom',
            say() {
                console.log(this)
                console.log(`我叫${this.name}`)
            }
        }

        // 先看代码执行效果
        Person.say() //我叫Tom 
        Person1 = {
            name: 'Tom1'
        }

        // 咱们尝试用原生方法call来实现this指向Person1
        Person.say.call(Person1) //我叫Tom1

复制代码

经过第一次打印执行和第二次打印执行我发现，若是Person1有say方法那么Person1直接执行Person1.say() 结果就是我是Tom1,是的call就是这么实现的。 再看代码

Function.prototype.MyCall = function(context) {
            //context就是demo中的Person1
            // 必须此时调用MyCall的函数是say方法，那么咱们只须要在context上扩展一个say方法指向调用MyCall的say方法这样this
            console.log(this)
            context.say = this //Mycall里边的this就是咱们虚拟的say方法
            context.say()
        }
        // 测试
        Person.say.MyCall(Person1)//我叫Tom1
复制代码

perfect！爆棚的知足感！不过拿脚趾头想一想也不会这么简单，继续完善 咱们本身找茬 一、call支持多个参数，有可能一个也不没有 二、考虑多参数时要把参数传给扩展方法。 三、给上下文定义的函数要保持惟一不能是say 四、扩展完咱们须要吧自定义函数删除 接下来针对找茬问题一一解决

let Person = {
            name: 'Tom',
            say() {
                console.log(this)
                console.log(`我叫${this.name}`)
            }
        }
        Person1 = {
            name: 'Tom1'
        }
        //若是没有参数
        Person.say.call()
复制代码

没有指定this，this指向window

咱们也要这样

Function.prototype.MyCall = function(context) {
            // 若是没有参数咱们参考call的处理方式
            context = context || window
                //context就是demo中的Person1
                // 必须此时调用MyCall的函数是say方法，那么咱们只须要在context上扩展一个say方法指向调用MyCall的say方法这样this
            context.say = this //Mycall里边的this就是咱们虚拟的say方法
            context.say()
        }

        Person.say.MyCall()
复制代码

没毛病！ 继续解决

// 找茬2：咱们默认定义context.say = this  fn若是已经被占用 嘎嘎 sb了。 不怕 搞定它

        // say须要是一个惟一值 是否是忽然想到es6的新类型 Symbol   fn = Symbol() 不过咱们装逼不嫌事大 都说本身实现了

        function mySymbol(obj) {
            // 不要问我为何这么写，我也不知道就感受这样nb
            let unique = (Math.random() + new Date().getTime()).toString(32).slice(0, 8)
                // 牛逼也要严谨
            if (obj.hasOwnProperty(unique)) {
                return mySymbol(obj) //递归调用
            } else {
                return unique
            }
        }
//接下来咱们一并把多参数和执行完删除自定义方法删除掉一块搞定
        Function.prototype.myCall1 = function(context) {
            // 若是没有传或传的值为空对象 context指向window
            context = context || window
            let fn = mySymbol(context)
            context[fn] = this //给context添加一个方法 指向this
            // 处理参数 去除第一个参数this 其它传入fn函数
            let arg = [...arguments].slice(1) //[...xxx]把类数组变成数组，arguments为啥不是数组自行搜索 slice返回一个新数组
            context[fn](...arg) //执行fn
            delete context[fn] //删除方法
        }
        
        let Person = {
            name: 'Tom',
            say(age) {
                console.log(this)
                console.log(`我叫${this.name}我今年${age}`)
            }
        }

        Person1 = {
            name: 'Tom1'
        }

        Person.say.call(Person1,18)//我叫Tom1我今年18
复制代码

测试结果至关完美！

实现apply

接下来apply就简单多了，只有多参数时第二个参数是数组，就不一步步细说了。

Function.prototype.myApply = function(context) {
            // 若是没有传或传的值为空对象 context指向window
            if (typeof context === "undefined" || context === null) {
                context = window
            }
            let fn = mySymbol(context)
            context[fn] = this //给context添加一个方法 指向this
                // 处理参数 去除第一个参数this 其它传入fn函数
            let arg = [...arguments].slice(1) //[...xxx]把类数组变成数组，arguments为啥不是数组自行搜索 slice返回一个新数组
            context[fn](arg) //执行fn
            delete context[fn] //删除方法

        }
复制代码

实现bind

这个和call、apply区别仍是很大的，容我去抽根烟回来收拾它 仍是老套路先分析bind都能干些什么，有什么特色 一、函数调用，改变this 二、返回一个绑定this的函数 三、接收多个参数 四、支持柯里化形式传参 fn(1)(2)

Function.prototype.bind = function(context) {
            //返回一个绑定this的函数，咱们须要在此保存this
            let self = this
                // 能够支持柯里化传参，保存参数
            let arg = [...arguments].slice(1)
                // 返回一个函数
            return function() {
                //一样由于支持柯里化形式传参咱们须要再次获取存储参数
                let newArg = [...arguments]
                console.log(newArg)
                    // 返回函数绑定this，传入两次保存的参数
                    //考虑返回函数有返回值作了return
                return self.apply(context, arg.concat(newArg))
            }
        }

        // 搞定测试
        let fn = Person.say.bind(Person1)
        fn()
        fn(18)
复制代码

是的，完美，实现了绑定this，返回函数，不当即执行，能够柯里化形式传参。柯里化相关讲解请移步：segmentfault.com/a/119000001…

简版的实现就算完成了

欢迎吐槽or点赞！