js中call與apply用法

2022-06-27 21:03:12 字數 2557 閱讀 4103

1

2兩者的格式和引數定義:

3 call( thisarg [,arg1,arg2,… ] ); //

引數列表,arg1,arg2,...

引數陣列,argarray

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

一、call 的簡單用法

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

9 [html] view plaincopyprint?

10

1112

1316

1718

"text

" id="

idtxt

" value="

input text

">

192038

3954

5556

然後,執行結果如下:

57global

var58

global

var59 member var

60input text

61func

62func2

63 測試環境:google chrome 10.0.648.45

64最後,分析結果

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

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

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

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

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

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

7172

二、call 繼承用法與改進

73js使用call模擬繼承

74測試**:

75 [html] view plaincopyprint?

76

7778

7982

8384116

117118

執行結果如下:

119baseb member

120baseb member

121 測試環境:google chrome 10.0.648.45

122結果分析:

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

124 (已在ie9、8、6

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

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

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

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

128129

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

130 真實原因是extendab物件的成員變數member在被baseb.call(this

);例項化時,被baseb的成員member覆蓋了,即extendab的成員member由basea member賦值成了baseb member

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

132 function basea() //

base class a

133139

}140

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

141basea member

142baseb member

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

144145

146147

繼承改進(prototype)

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

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

150改進舉例如下:

151 [html] view plaincopyprint?

152

153154

155158

159160188

189190

執行結果如下:

191 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用法

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