call()实现原理（function原型上的方法）

最新推荐文章于 2025-05-29 16:31:35 发布

胖妮儿

最新推荐文章于 2025-05-29 16:31:35 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：原生js实现方法原理文章标签： call实现原理 function原型实现原理

本文链接：https://blog.youkuaiyun.com/pony_pony/article/details/79064595

原生js实现方法原理专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了 JavaScript 中 call() 方法的实现原理，并通过具体示例展示了如何使用该方法来改变函数调用时的 this 指向。通过对 call() 方法的自定义实现，读者可以深入理解 JavaScript 的上下文环境及作用域链。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>call()实现原理</title>
</head>
<body>

</body>
</html>
<script type="text/javascript">
    //让.前面的函数执行
    Function.prototype.call=function () {
        //this:当前实例其实就是谁执行的call方法就是谁
        //call前面的函数就是this,既然call可以让前面的函数执行
        // 在这里就是this执行
        //第一个参数没传,null,undefined,直接让this()
        var ary=[...arguments].slice(1);
        if(arguments[0]==undefined){
            this(...ary);
            //eval("this("+ary+")");
        }else {
            //为了保证你传进来的参第一个数是一个引用数据类型
            var obj=Object(arguments[0]);//将参数变成一个对象

            obj.__proto__.fn=this;
            obj.fn(...ary);
            delete obj.__proto__.fn;
        }

    };
    function fn(n) {
        console.log(n);
        console.log(this);
    }
    function fn1() {
        console.log("我是fn1");
    }
    var o={a:1};
    fn.call(o,1);
</script>
<script>

   Function.prototype.call=function () {
       var ary=[...arguments].slice(1);
       if(arguments[0]==undefined){
         this(...ary);
       }else {
           var obj=Object(arguments[0]);
           obj.__proto__.fn=this;
           obj.fn(...ary);
           delete obj.__proto__.fn;
       }
       return this;
   };
    var obj={b:1};
   function ff(x) {
       console.log(this);
   };
   console.log(ff.call(obj, 1, 2).name);
</script>