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

javascript的方法

網頁設計 閱讀(2.88W)

在javascript中,方法可以通過以下幾種方式執行:

javascript的方法

(),這是最直接最常見的呼叫方式,也符合一般人的思維邏輯,但是在某些情況下有一些不足,下面會解釋。

2.(function(arg){})(window),匿名方法呼叫,在構造名稱空間時比較有用,後面的括號中的引數與匿名方法中的入參一一對應。

(sth)(),mozilla手冊中提到bind是在ECMA-262 5th Edition中新增的一個特性,這裡單獨列出來作為一種呼叫方式是因為它彌補了直接呼叫中不能繫結作用域的缺陷。

(),這是第二種呼叫方式,每個方法的原型中都定義了call方法,用來執行當前方法。

y(),call的雙胞胎兄弟。

func()

這是最常見的呼叫方式,在任何語言中隨處可見。func(x, y)可以傳入不同的引數。在某些語言,例如php,java中,這種呼叫足以解決一切問題。但是javascript是一門函式式語言,閉包的概念和一個奇怪的關鍵詞this決定了這種呼叫方式的不足。this應該可以解釋為當前程式碼段的作用域,會隨著程式碼執行到不同的片段而改變,但是某些情況下我們不希望這個this被改變,例如繫結在某些dom上的事件,我們肯定不希望他們被呼叫的時候this被轉移到了window物件上,但有時候確實如此,再比如下面的程式碼。

複製程式碼 程式碼如下:

var a ={};

var func = function(x) {

(this);

};

ick = function() {

var x = 100;

func(x);

};

ick();

可以把a想象成頁面中的.一個連結,由於我們只是想將定義好的方法繫結到onclick事件上,而不是立刻呼叫它,而且這個方法擁有一個引數,所以我們需要用一個匿名方法將他包起來傳遞給a的onclick事件。這樣就有了一個問題,func中的this變成了全域性物件window,顯然我們並不希望如此。這個時候,使用func()這種直接呼叫的方式就不行了,於是我們需要將func外的this繫結到func方法上。於是就有了bind,call,apply方法。

bind

bind的目的非常簡單,返回一個綁定了this物件的相同方法。上面的程式碼修改一行就可以實現繫結this在a物件上目的。

複製程式碼 程式碼如下:

var a ={};

var func = function(x) {

(this);

};

ick = function() {

var x = 100;

(this)(x); // bind here

};

ick();

這樣,onclick事件的this就不會像無頭蒼蠅一樣到處亂跑啦。

call & apply

call和apply要放在一起講,因為他們實在太像了。他們都支援多引數,而且第一個引數都是即將繫結的this物件,第二個引數則是他們的區別所在,call使用獨立的引數作為呼叫方法的入參,apply使用一個陣列作為入參。有的時候我們並不是不想改變this物件,而是想人為的將他繫結到別的物件上,這個時候call和apply是很好用的。(並不是說不能用bind,不過貌似bind出現的比較晚,可能瀏覽器相容性不好)。舉個栗子:

複製程式碼 程式碼如下:

a = {

func: function() {

this.x += 1;

},

x: 0

};

b = {

a: a,

x: 20

};

for(var i = 0; i < 10; i++){

();

}

(a.x);

(b.x);

上面的a和b物件中都有x,我們希望func能針對性的修改對應的x,但是直接呼叫只可能修改func作用域中的x,也就是a.x。修改一下程式碼,就可以實現修改b.x目的

複製程式碼 程式碼如下:

a = {

func: function() {

this.x += 1;

},

x: 0

};

b = {

a: a,

x: 20

};

for(var i = 0; i < 10; i++){

(b); // bind this to b

}

(a.x);

(b.x);