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

上下文调用综述：

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