當前位置:才華齋>設計>網頁設計>

Javascript中call與apply的學習筆記示例

網頁設計 閱讀(1.88W)

先看MDN中對於call的解釋

Javascript中call與apply的學習筆記示例

call() 方法在使用一個指定的this值和若干個指定的引數值的前提下呼叫某個函式或方法.

注:該方法的作用和 apply() 方法類似,只有一個區別,就是call()方法接受的是若干個引數的列表,而apply()方法接受的是一個包含多個引數的陣列。

語法

(thisArg[, arg1[, arg2[, ...]]])

引數

thisArg

在fun函式執行時指定的this值。需要注意的是,指定的this值並不一定是該函式執行時真正的this值,如果這個函式處於非嚴格模式下,則指定為null和undefined的this值會自動指向全域性物件(瀏覽器中就是window物件),同時值為原始值(數字,字串,布林值)的this會指向該原始值的自動包裝物件。

arg1, arg2, ...

指定的引數列表。

MDN上的例子一開始並不是很好理解,這裡我貼出來,有興趣可以自己去看看 call-Javascript

這裡的thisArg解釋為在fun執行時指定的this值,也就是說使用了call後,fun中的this指向了thisArg?看程式碼

var p="456"; function f1(){ this.p="123"; } function f2() { (this.p); } f2(); //456 (f1()); //123 y(f1()); //123

第一次輸出是呼叫的全域性變數,之後由於call和apply的使用,f2中的this指向了f1,因此,輸出變成了123,其實也就是f1借用了f2的方法輸出了自己的p

這時將f1()中的'this.p刪除,會輸出三個456,也就證實了當this為null或者undefined時其實指向了全域性變數

至於指向原始值是指向它的包裝物件這裡,由於我理解的包裝物件都是臨時的,而且測試時只輸出了原始值的型別而不是object,這裡如何證明如果有知道的朋友希望可以和我討論下,謝謝!

既然call可以實現一個物件借用另一個物件,不就可以實現繼承了麼?看程式碼

function f1(){ er="father" } function f2() { (this); d="child"; } var test=new f2(); (er); //father

test中是沒有father的,由於f2()中的

(this);

這裡的this指向的就是f2,也就是f2借用了f1的方法,其實也就實現了繼承

下面講一下這裡的引數,這裡的引數是傳遞給fun的,看程式碼吧

function f1(){ this.p="123"; } function f2(x) { (this.p); (x); } (f1(),456); //123 //456

先輸出123是因為f1中的p,之後的456是傳遞給f2的引數,很容易理解

主要是注意call和apply中引數的區別

call是一個一個傳入的,而apply是傳入的一個數組

function f1(){ this.p="測試call"; } function f2(x,y,z) { (this.p); (x); (y); (z); } function f3(){ this.p="測試apply"; } (f1(),4,5,6); (f1(),[4,5,6]); y(f3(),[4,5,6]); y(f3(),4,5,6);

這裡可以看到結果

第一段測試call是正確輸出

第二段測試call由於傳入陣列,所以先輸出一個數組然後兩個undefined

第三段測試apply正確輸出

第四段由於引數格式錯誤直接報錯

這裡的區別應該很明顯了