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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章