手写JS函数原型方法【学习记录】

117 阅读1分钟
Function.prototype.MyCall = function () {
            //这里主要作用是把arguments转化为正式的数组,然后就可以使用数组的方法了,如果不是正式的数组就使用不了shift方法
            //也可以用for循环创建一个新的数组
            const ars = Array.prototype.slice.call(arguments)
            //拿到{ x:1}
            //就是拿到this嘛
            // const t = {x:1}
            const t = ars.shift()
            // 在MyCall里面的this就是一个函数,谁调用他,this就指向谁
            // 为什么这里的this为什么会指向fn调用者?复习一下js里面的this指向知识点
            const self = this
            //往t里面添加一个函数fn
            t.fn = self
            //拿返回值
            const res = t.fn(...ars)
            // 为什么要删除fn这个属性?如果不删除的话,他就会出现在{x:1}里面 => {x:1,fn:function(){}},相当于改变了这个this指向目标的对象的内容了,所以需求删除
            delete t.fn
            
        }
        function fn(a, b) {
            //this.name = '11'
            console.log('a', a);
            console.log('b', b);
            console.log('this', this);
            return '我是返回值'
        }
        fn.MyCall({ x: 1 }, 10, 30)
        var obj = {
            fun: function () {
                //this指向函数所在的对象
                console.log(this);
            }
        }
        //fun里面的this指向于他所在的对象
        //obj.fun()

如何设置this指向

里面的难点主要在于怎么理解如何设计能让this指向{x:1},就是先拿到调用call的函数fn,然后把这个调用call的函数放进{x:1}这个对象里面,当obj.fn()这样去调用时,fn()的this就指向obj了,即{x:1}\