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