Javascript呼叫函數方法的幾種方式介紹_javascript技巧

javascript語法靈活，同一個功能有五六種實作方式並不罕見，然後再加上有些反人類的原型繼承和非同步特性，就更讓人一頭霧水了。我常常搞不清楚call,apply之間的差別，今天就記錄一下，以免再忘了。

在javascript中，方法可以透過以下幾種方式執行：

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

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

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

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

5.func.apply()，call的雙胞胎兄弟。

func()

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

複製程式碼 程式碼如下:

var a ={};
var func = function(x) {
    console.log(this);
};
a.onclick = function() {
    var x = 100;
    func(x);
};
a.onclick();

可以把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) {
    console.log(this);
};
a.onclick = function() {
    var x = 100;
    func.bind(this)(x);  // bind here
};
a.onclick();

這樣，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     b.a.func();
}
console.log(a.x);
console.log(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     b.a.func.call(b);  // bind this to b
}
console.log(a.x);
console.log(b.x);

這個栗子舉得不好，有點牽強附會，而且這是一種很容易讓人迷惑的代碼風格，有適用的場景，但不是處處都可用。