【JS手写实现call】

最新推荐文章于 2024-04-14 02:42:26 发布

哈市南湖

最新推荐文章于 2024-04-14 02:42:26 发布

阅读量307

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_48163513/article/details/126456744

版权

本文详细解释了JavaScript中call方法的作用，即改变this的指向，并通过实例展示了如何使用call方法将一个对象的方法应用于另一个对象。此外，还提供了一个自定义的myCall实现，演示了如何在不直接修改原函数的情况下模拟call的功能，强调了上下文环境的切换和参数传递的重要性。

摘要由CSDN通过智能技术生成

1.简单说一下call的功能：

this总是指向调用某个方法的对象，但是使用call()和apply()方法时，就会改变this的指向。

obj1.(method).call(obj2,argument1,argument2)

大白话说就是：call的作用就是把obj1的方法放到obj2上使用，后面的argument1..这些做为参数传入。

2.实现其功能：

    <script>

    var name = 'ls'
    var person = {
        getName: function () {
            // console.log(this);  window
            // 怎么让这里的this变成person2  才能打印出'kb'  --->  从这个函数调用哪里入手
            return this.name
        }
    }

    var person2 = {
        name: 'zs'
        // fn(){    
        //     return this.name
        // }
    }
    //重要步骤1  myCall根据__proto__ 在Function的原型对象上找到myCall
    Function.prototype.myCall = function (context) {
        // 这里的this必须是函数
        if (typeof this !== 'function') {
            throw new Error('error')
        }

        // context   -->  person2   (参数)
        context = context || window

        // this  -->  person.getName  (因为是person.getName调用myCall 所以this就是person.getName)
        // console.log(this);
        var arg = [...arguments].slice(1)
        //重要步骤2  将person.getName 赋值给 context.fn
        // 需要假设person2上有一个方法
        context.fn = this   //将person.getName 赋值给假设的方法
        var result = context.fn(...arg)  //调用person.getName 

        return result
    }

    console.log(person.getName.myCall(person2, 1, 2, 3));

    </script>