js中call和apply(函数的上下文调用模式)详解

    xiaoxiao2021-03-25  107

    上下文调用综述: <script>     //上下文模式:根据用户传递的参数,指定了函数内部不同的this的值     //核心:以call/apply方法来调用某个函数     //call/apply方法定义在哪里?Function.prototype对象中--->所有的函数都能访问到call/apply方法     //fn--->fn.__proto__(Function.prototype)-->fn.__proto__.__proto__(Object.prototype)     function fn(){} </script> call的第一个参数: <script>     function fn(){         console.log(this);     }     //call方法的第一个参数决定了函数内部的this的值     //第一种情况:传递null/undefined--->函数内部的this指向window     fn.call(null);     fn.call(undefined);     //第二种情况:传递数字、字符串、布尔值--->函数内部的this指向对应的基本包装类型的对象     fn.call(100);   //Number的实例     fn.call("hello");//String的实例     fn.call(true);  //Boolean的实例     //第三种情况:传递对象--->函数内部的this指向该对象     fn.call(/abc/);     fn.call([1,3,5]);     fn.call(function(){}); </script> apple的第一个参数: <script>     function fn(){         console.log(this);     }     //call方法的第一个参数决定了函数内部的this的值     //第一种情况:传递null/undefined--->函数内部的this指向window     fn.apply(null);     fn.apply(undefined);     //第二种情况:传递数字、字符串、布尔值--->函数内部的this指向对应的基本包装类型的对象     fn.apply(100);   //Number的实例     fn.apply("hello");//String的实例     fn.apply(true);  //Boolean的实例     //第三种情况:传递对象--->函数内部的this指向该对象     fn.apply(/abc/);     fn.apply([1,3,5]);     fn.apply(function(){}); </script> call方法的参数 <script>     function foo(a,b,c){         for (var i = 0; i < arguments.length; i++) {             console.log(arguments[i]);         }     }     //call方法第一个参数指定函数内部的this的值     //       第二个参数表示函数的第一个实参     //       第三个参数表示函数的第二个实参     //以此类推     foo.call(null,1,3,5); </script> apply方法的参数列表 <script>     function foo(a,b,c){         for (var i = 0; i < arguments.length; i++) {             console.log(arguments[i]);         }     }     //apply方法第一个参数指定函数内部的this的值     //        第二个参数必须是一个数组 or 伪数组     //              这个数组(伪数组)的第一个元素表示第一个实参,第二个元素表示第二个实参,以此类推     foo.apply(null,[1,3,5]); </script>
    转载请注明原文地址: https://ju.6miu.com/read-8454.html

    最新回复(0)