Dojo 学习笔记 之 Dojo hitch&partial

原文： http://dojotoolkit.org/documentation/tutorials/1.10/hitch/index.html

版本： Dojo 1.10

为了更好地使用JavaScript原生函数，dojo/_base/lang模块提供了很多非常有用的方法。这里，我们来学习JavaScript函数（Function）对象基础，及如何使用lang.hitch来绑定函数的上下文。在此基础上，学习如何使用lang.partial来绑定函数的特定参数，及如何使用lang.hitch实现这两个操作。

在开始学习之前，你需要对Dojo Toolkit基础知识有一定的了解，如dojo/query, Dojo's Array helpers等。

在理解如何及何时使用lang.hitch和lang.partial之前，我们需要知道它们解决了什么问题。JavaScript中最容易被误解的一个概念是：this是什么？通常，在面向对象编程中，当一个对象的方法被调用时，this就指向这个对象。然而在JavaScript中并不是这样，为了更好的理解它，我们要先理解执行上下文（execution context）概念。

JavaScript中的执行上下文

在JavaScript中，无论何时调用一个函数，就会创建它的执行上下文。这个上下文的创建步骤是：

1）创建arguments对象；

2）创建函数的scrope对象；

3）初始化函数的变量；

4）创建this属性。

这里的this属性是开发者最容易迷惑的地方，它就是调用该函数的上下文或scope的对象一个引用。理解这一点是理解JavaScript如何工作的关键，因为JavaScript中，一个函数执行的真正上下文是在函数被调用时才能决定的。

下面是一个例子： 假如我们有一个对象，对象中的一个方法将被用作文档中的某些节点的事件处理函数。

 // Require the query resource, and wait until the DOM is ready
 require(['dojo/query', 'dojo/domReady!'], function(query) {
     var myObject = {
         foo: "bar",
         myHandler: function(e) {
             // This is very contrived but will do.
             alert("The value of 'foo' is " + this.foo);
         }
     };

     // later on in the script:
     query('.myNodes').forEach(function(node) {
         node.onclick = myObject.myHandler;
     });
 });

当点击了具有‘myNodes’类的任何一个DOM节点时，你可能会认为上面的函数定义会弹出一个JavaScript警示框提示“The value of 'foo' is bar”，然而，由于我们设定myObject.myHandler为节点点击的事件处理器，我们将会得到“The value of 'foo' is undefined”提示信息。看看原因：

node.onclick =  myObject.myHandler; 这个表达式myObject.myHandler调用了myHandler函数，事实上，myHandler函数是在myObject对象中定义这一事实已经被忽视了，现在node.onclick是myHandler函数的引用，注意这里只是myHandler这个函数，而并不是myObject的上下文。DOM事件处理器运行的上下文是触发这个事件的节点，也就是说，不考虑它是在哪及如何定义的，这个函数如同是该节点的一个方法一样被执行，结果就是在执行时myHandler函数内部的this值是当前触发事件的节点。

注意：如果觉得这很迷惑，牢记一点：根本原因是因为如同其它非基本类型，Function对象是引用传递，而不是值传递。

用.apply和.call方法改变执行上下文

由于JavaScript函数执行上下文是在函数被调用时决定的，它提供了一种在执行时通过Function.apply和Function.call来改变上下文（即this）的方法。很简单，两个方法均允许传递一个对象作为执行函数的上下文。例如，如果你想保证上面例子的handler是在myObject上下文中执行的，可以使用Function.call方法来包装我们的引用，如下：

 query('.myNodes').forEach(function(node) {
     node.onclick = function(e) {
         myObject.myHandler.call(myObject, e);
     }
 });

在大多数情况下，会使用Function.apply方法，并从外部函数传递arguments对象。然而，当一个函数的参数已知时，推荐使用call方法，因为当JavaScript解释器不需要直接访问arguments对象时，会获得稍微高的性能。

用lang.hitch绑定执行上下文

Dojo Toolkit提供了一种简便的方法lang.hitch来绑定函数的上下文，简单来说，lang,hitch创建了一个Function对象，绑定给了一个特定的上下文，这样就可以实现安全地调用函数，而不需要担心函数上下文的变化。下面是一个例子：

 // `foo` is intentionally global
 var foo = "bar";
 require(['dojo/_base/lang'], function(lang) {
     var myFunction = function() {
         return this.foo;
     };
     var myObject = {foo: 'baz'};

     // later on in your application
     var boundFunction = lang.hitch(myObject, myFunction);

     // test
     myFunction();  // "bar"
     boundFunction();  // "baz"
     myFunction();  // "bar"
 });

lang.hitch确保了一个特定函数，绑定了一个特定执行上下文，调用时不再需要考虑执行时上下文的变化。

arguments对象

arguments对象是一个类数组对象，保存了传递给当前函数的参数列表。另外，在创建上下文时，该对象的任何命名变量已被创建，因此，这些值可以在函数内部使用，如同当前函数自身的变量一样。记住，arguments对象并不是一个真正的Array对象，尽管它与Array对象有许多相似的地方，但它是只读的，也就意味着Array对象的其他一些方法不能对arguments对象使用（如Array.prototype.slice等）。

当定义了一个函数时，函数的签名就固定下来了，不能通过除非重新定义该函数的其他任何方法增加或删除命名参数。这样也就带来了一个问题，尤其是当你需要使用一个函数签名，而不去真正复制或重写原始函数，Dojo Toolkit提供了一个简单的方法来实现这个功能——lang.partial方法。

用lang.partial改变函数的参数列表

经常会遇到的一个问题是，一个函数定义了多个参数，但是有时我们只需要部分参数。例如，假如我们有一个函数有4个参数（取自dojo/data）：

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

但是，可能在项目的其它地方有一个类似的定义，只有3个参数：

 someObject.setValueHandler = function(item, attr, value) {
     // placeholder function to be overriden
 };

用lang.partial，你可以创建一个新的预先设置好参数值的函数，在上面的例子中，可以通过预先设定好store的值，然后将someObject.setValueHandler设置为部分函数的引用，如下：

 // assuming we have a dojo/data store called "myStore"

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

 // ...
 // their function signature
 someObject.setValueHandler = function(item, attr, value) {
     // placeholder function to be overriden
 };

 // ...
 // our solution using lang.partial
 someObject.setValueHandler = lang.partial(putValue, myStore);

 // ...
 // somewhere in the application when setValueHandler is invoked,
 // our putValue function will already have the "store" arg
 // set to a reference to "myStore"
 someObject.setValueHandler(someItem, "foo", "bar");

对上面的解释：

1. 首先定义了一个具有4个参数的函数；

2. 发现setValueHandler函数只需要3个参数，并且我们不可以修改；

3. 我们在putValue基础上创建了一个新的函数，并且putValue的第一个参数store的值被初始设定为myStore；

4. 新的部分函数被调用时只传递了3个参数，但是此时部分函数的第一个参数的值已经被设定为myStore.

需要注意的是，不像lang.hitch方法，lang.partial并不会预先设定返回部分函数的执行上下文，换句话说，根据你使用新部分函数的不同，this的值可能有变化。

在使用lang.partial时，将函数的一个参数代表执行上下文，你可以通过设定一个对象的引用作为对象的执行上下文，从而可以同时获得二者的优势。

结合hitch和partial的优势

如果你想同时具有hitch和partial的优势，lang.hitch可以同时具有二者，你可以在上下文和方法名后添加任意多个值，lang.hitch会用预定的上下文和预先设定的参数值来创建新的函数。如下：

 someObject.setValueHandler = lang.hitch(someObject, putValue, myStore);

 // ...
 // later on in the application, the setHandler is invoked
 // again -- this time in the context of someObject
 someObject.setValueHandler(someItem, 'foo', 'bar');

hitch和partial是了解函数式编程的基础，Dojo Toolkit中通过dojox/lang/functional命名空间提供了很多函数式编程技巧，推荐看一看。

总结

这里我们回顾了JavaScript Function对象——包括函数的调用过程。然后引入了lang.hitch，允许你去绑定一个函数的执行上下文，在些基础上，我了学习了如何使用lang.partial预设一个函数的参数值，最后介绍了如何使用lang.hitch同时绑定上下文和参数值。

由于lang.hitch允许预先绑定函数执行上下文，因此它在事件驱动的编程技术（或者基于回调的编程）中非常有用。