手写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

《手写call、apply、bind及相干面试题剖析》

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

《手写call、apply、bind及相干面试题剖析》
perfect!爆棚的满足感!不过拿脚趾头想一想也不会这么简朴,继承圆满
我们本身找茬
1、call支撑多个参数,有能够一个也不没有
2、斟酌多参数时要把参数传给扩大要领。
3、给上下文定义的函数要坚持唯一不能是say
4、扩大完我们须要吧自定义函数删除
接下来针对找茬题目逐一处置惩罚

        let Person = {
            name: 'Tom',
            say() {
                console.log(this)
                console.log(`我叫${this.name}`)
            }
        }
        Person1 = {
            name: 'Tom1'
        }
        //假如没有参数
        Person.say.call()

《手写call、apply、bind及相干面试题剖析》

没有指定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()

《手写call、apply、bind及相干面试题剖析》
没缺点!
继承处置惩罚

// 找茬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都能干些什么,有什么特性

    1、函数挪用,转变this
    2、返回一个绑定this的函数
    3、吸收多个参数
    4、支撑柯里化情势传参 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)

《手写call、apply、bind及相干面试题剖析》

是的,圆满,完成了绑定this,返回函数,不马上实行,能够柯里化情势传参。柯里化相干解说请移步:https://segmentfault.com/a/11…

简版的完成就算完成了

迎接吐槽or点赞!

    原文作者:我是一个前端
    原文地址: https://segmentfault.com/a/1190000017942635
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞