玩轉Javascript函數上下文綁定——Dojo hitch/partial詳解

原文：http://dojotoolkit.org/documentation/tutorials/1.7/hitch/

原文作者：Tom Trenka

譯者：Ruan Qi

Dojo 1.7  難度層級：中級

在dojo工具包中，dojo/_base/lang模組對Javascript原生方法進行了封裝或增強，提供了不少相當有用的方法。本文將介紹Javascript中的函數對象（Function）的基礎知識，以及如何使用dojo.hitch綁定函數的上下文，另外還將介紹如何使用dojo.partial為函數綁定特定參數等實用技術。

在講解dojo.hitch和dojo.partial的用法之前，要先明白它們能解決什麼問題。Javascript編程中最常聽到的問題之一：this是什嗎？對物件導向編程來說，方法內部的this就是聲明該方法的對象，非常簡單！而對於Javascript，答案可不那麼簡單了。為求知其然並知其所以然，有必要瞭解Javascript中的函數上下文。

Javascript函數上下文

每當一個函數被調用時，Javascript會建立一個對應的上下文。上下文建立步驟如下：

1. 建立argument對象；
2. 建立函數的scope對象；
3. 初始化函數的局部變數；
4. 建立this屬性；

其中this指向的是正在調用該函數的對象。理解這一點對於理解Javascript中的函數運行非常關鍵，因為Javascript中函數的上下文是在函數被調用的時候才確定的。

這裡舉一個例子：有一個object，這個object其中一個方法被當做多個HTML節點的點擊事件的處理函數。下面是對應的代碼。

        var myObject = {            foo: "bar",            myHandler: function(evt){                //  this is very contrived but will do.                alert("The value of 'foo' is " + this.foo);            }        };         //  later on in the script:        dojo.query(".myNodes").forEach(function(node){            node.onclick = myObject.myHandler;        });

請看對應的Demo（http://dojotoolkit.org/documentation/tutorials/1.7/hitch/demo/demo.html）

當這些class為“myNodes”的button被點擊時，你可能會認為瀏覽器會彈出“The value of 'foo' is bar”的訊息，然而由於上面的myObject.myHandler綁定了節點的點擊事件，導致瀏覽器彈出了“The value of 'foo' is undefined”。這是因為myObject.myHandler被作為節點的上下文執行，並非被myObject自己執行。換句話說，Javascript解譯器認為當前的this指向了被點擊的節點而非myObject。

使用apply、call指定函數運行上下文

Javascript為函數對象提供了apply與call方法，用於切換函數的運行時上下文。兩種方法都可以通過傳入運行時上下文，從而顯式地指定this屬性的引用。舉例來說，我們希望上例中的節點被點擊時，觸發的myObject.myHandler的上下文為myObject。這裡使用call方法為例：

dojo.query(".myNodes").forEach(function(node){    node.onclick = function(evt){        return myObject.myHandler.call(myObject, evt);    };});

請看對應的Demo（http://dojotoolkit.org/documentation/tutorials/1.7/hitch/demo/call.html）

理解了Javascript函數的上下文基礎後，來看看dojo如何使用dojo.hitch來簡化這一過程。

使用dojo.hitch綁定函數運行時上下文

Dojo.hitch是dojo提供的一個用來簡化函數運行時上下文綁定的函數。簡單來說dojo.hitch建立了一個綁定了內容相關的新函數，使用者可以不用擔心心運行時的上下文變化會對函數產生影響。使用dojo.hitch也十分簡單：

        var foo = "bar"        var myFunction = function(){            return this.foo;        };        var myObject = { foo: "baz" };        // later on in your application        var boundFunction = dojo.hitch(myObject, myFunction);        // the first value will be "bar", the second will be "baz";        // the third will still be "bar".        myFunction();       // "bar"        boundFunction();    // "baz"        myFunction();       // "bar"

對應Demo（http://dojotoolkit.org/documentation/tutorials/1.7/hitch/demo/hitch.html）

可以看到，無論外部運行時上下文如何變化，dojo.hitch保證函數myFunction的內容物件始終是myObject。

arguments對象

還記得之前Javascript被調用時建立內容相關的步驟嗎？首先建立的就是arguments對象，arguments對象是一個函數的參數數組，以參數的傳入順序排列該數組內元素。

當函數定義完成後，其函數簽名就被固定下來。我們就不能增加或者刪除非匿名的函數參數。有時候這限制了函數調用的靈活性，我們不得不重寫新的函數來應付參數列表的變更，而dojo.partial方法打破了這個限制。

使用dojo.partial控制參數列表

首先看下面的例子（取自dojo/data模組），參數列表中有4個參數：

var putValue = function(store, item, attr, value){    return store.setValue(item, attr, value);}

然而後來在應用需要與putValue有相似的功能但參數列表不同的函數，如下所示：

//已聲明的myStore對象var myStore = new dojo.data.ItemWriteStore({…});someObject.setValueHandler = function(item, attr, value){    myStore.setValue(item, attr, value);};

dojo.partial是一個傳回值為函數的函數,可以用預定義的值鎖定函數的前幾個參數。我們可以使用dojo.partial來避免someObject.setValueHandler的重複定義，代碼如下：

var putValue = function(store, item, attr, value){    return store.setValue(item, attr, value);}...var myStore = new dojo.data.ItemWriteStore({...});//dojo.partial返回了首個參數為myStore的putValue函數someObject.setValueHandler = dojo.partial(putValue, myStore); //等同於運行putValue（myStore, someItem, “foo”, “bar”）someObject.setValueHandler(someItem, "foo", "bar");

這裡需要注意的是，dojo.partial並不鎖定函數的運行時上下文。

同時綁定運行時上下文和鎖定參數

如果我們希望同時綁定運行時上下文和鎖定參數，dojo.hitch本身就可以完成這兩個功能。dojo.hitch的頭兩個參數指的是要綁定的運行時上下文與對應函數，這兩個參數後面可接上任意多個作為第二個參數代表的對應函數的鎖定參數，代碼如下：

someObject.setValueHandler = dojo.hitch(someObject, putValue, myStore);// putValue的首個參數被鎖定為myStore,並且putValue中的this參數（如果有的話）指向someObjectsomeObject.setValueHandler(someItem, "foo", "bar");

總結

在本教程中，首先闡述了Javascript運行時內容相關的基礎，然後介紹如何使用dojo.hitch方法固定函數的運行時上下文，又瞭解了使用固定值鎖定參數列表的方法-dojo.partial,最後介紹了使用dojo.hitch同時實現這兩個功能。

Dojo.hitch在事件驅動的編程模型中十分有效，使用者無需關心函數運行時內容相關的變更，降低代碼的耦合性。