js中call與apply用法

2022-07-27 20:18:16 字數 2066 閱讀 5545

兩者的格式和引數定義:

call( thisarg [,arg1,arg2,… ] );       // 引數列表,arg1,arg2,...

上面兩個函式內部的this指標,都會被賦值為thisarg,這可實現將函式作為另外乙個物件的方法執行的目的

一、call 的簡單用法

首先,我們先看個簡單的例子(call):

然後,執行結果如下:

global var

global var

member var

input text

func

func2

測試環境:google chrome 10.0.648.45

最後,分析結果

1、全域性物件window呼叫函式gfunc,this指向window物件,因此this.value為global var

2、函式gfunc呼叫call方法,this預設指向第乙個引數window物件,因此this.value也為global var

3、函式gfunc呼叫call方法,this預設指向第乙個引數new mfunc(),即mfunc的物件,因此this.value為mfunc的成員變數member var

4、函式gfunc呼叫call方法,this預設指向第乙個引數input text控制項,即id=『idtxt』的控制項,因此this.value為input控制項的value值input text

5、函式func2呼叫call方法,this預設指向第乙個引數func函式物件,因此this.value為this.a,即func

6、函式func2呼叫call方法,第二個引數屬於函式物件func2的引數,因此alert(x)為第二個引數func2

二、call 繼承用法與改進

js使用call模擬繼承

測試**:

執行結果如下:

baseb member

baseb member

測試環境:google chrome 10.0.648.45

結果分析:

預期的結果,應該是輸出 basea member 和 baseb member,但實際輸出卻是 baseb member 和 baseb member

(已在ie9、8、6,maxthon、chrome、ff、opera、safari、360等瀏覽器測試過,結果都是後者:baseb member)

至此,機器是不會錯的,這就需要我們深入分析

我們可能會很容易想到是this引起的,this兩次都指向了baseb物件,但是推測真是這樣嗎?

為了**實質,我們借助chrome瀏覽器的除錯工具,下斷點,進行除錯,結果發現:

當呼叫extend.showselfa();時,此時的this指向extendab(並不是我們推測的兩次都指向baseb物件)

真實原因是extendab物件的成員變數member在被baseb.call(this);例項化時,被baseb的成員member覆蓋了,即extendab的成員member由basea member賦值成了baseb member

當然,我們也可以對上面basea**稍作修改,來驗證我們除錯分析的正確性:

function basea()// base class a

}再次執行chrome等瀏覽器,結果如下:

basea  member

baseb member

結果和我們的預期相同,同時chrome除錯資訊也驗證了我們的正確性:

繼承改進(prototype)

以上模擬繼承方法,仔細分析不是最好的。

因為每次在函式(類)中定義了成員方法,都會導致例項有副本,因此可以借助prototype原型,進行改進

改進舉例如下:

執行結果如下:

obj: man and women

js中call與apply用法

兩者的格式和引數定義 call thisarg arg1,arg2,引數列表,arg1,arg2,上面兩個函式內部的this指標,都會被賦值為thisarg,這可實現將函式作為另外乙個物件的方法執行的目的 一 call 的簡單用法 首先,我們先看個簡單的例子 call 然後,執行結果如下 globa...

js中call與apply用法

兩者的格式和引數定義 call thisarg arg1,arg2,引數列表,arg1,arg2,上面兩個函式內部的this指標,都會被賦值為thisarg,這可實現將函式作為另外乙個物件的方法執行的目的 一 call 的簡單用法 首先,我們先看個簡單的例子 call 然後,執行結果如下 globa...

js中call與apply用法

1 2兩者的格式和引數定義 3 call thisarg arg1,arg2,引數列表,arg1,arg2,引數陣列,argarray 5上面兩個函式內部的this指標,都會被賦值為thisarg,這可實現將函式作為另外乙個物件的方法執行的目的67 一 call 的簡單用法 8首先,我們先看個簡單的...