Dojo 学习笔记 之 Dojo hitch&partial

Posted 2020-10-06 冒牌工程师

原文： 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中，一个函数执行的真正上下文是在函数被调用时才能决定的。

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

 1 // Require the query resource, and wait until the DOM is ready
 2 require([‘dojo/query‘, ‘dojo/domReady!‘], function(query) {
 3     var myObject = {
 4         foo: "bar",
 5         myHandler: function(e) {
 6             // This is very contrived but will do.
 7             alert("The value of ‘foo‘ is " + this.foo);
 8         }
 9     };
10 
11     // later on in the script:
12     query(‘.myNodes‘).forEach(function(node) {
13         node.onclick = myObject.myHandler;
14     });
15 });

 

         当点击了具有‘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方法来包装我们的引用，如下：

1 query(‘.myNodes‘).forEach(function(node) {
2     node.onclick = function(e) {
3         myObject.myHandler.call(myObject, e);
4     }
5 });

 

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

 

        用lang.hitch绑定执行上下文

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

 1 // `foo` is intentionally global
 2 var foo = "bar";
 3 require([‘dojo/_base/lang‘], function(lang) {
 4     var myFunction = function() {
 5         return this.foo;
 6     };
 7     var myObject = {foo: ‘baz‘};
 8   
 9     // later on in your application
10     var boundFunction = lang.hitch(myObject, myFunction);
11 
12     // test
13     myFunction();  // "bar"
14     boundFunction();  // "baz"
15     myFunction();  // "bar"
16 });

 

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

 

        arguments对象

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

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

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

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

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

 

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

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

 

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

 1 // assuming we have a dojo/data store called "myStore"
 2 
 3 // our function
 4 var putValue = function(store, item, attr, value) {
 5     return store.setValue(item, attr, value);
 6 }
 7 
 8 // ...
 9 // their function signature
10 someObject.setValueHandler = function(item, attr, value) {
11     // placeholder function to be overriden
12 };
13 
14 // ...
15 // our solution using lang.partial
16 someObject.setValueHandler = lang.partial(putValue, myStore);
17 
18 // ...
19 // somewhere in the application when setValueHandler is invoked,
20 // our putValue function will already have the "store" arg
21 // set to a reference to "myStore"
22 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会用预定的上下文和预先设定的参数值来创建新的函数。如下：

1 someObject.setValueHandler = lang.hitch(someObject, putValue, myStore);
2 
3 // ...
4 // later on in the application, the setHandler is invoked
5 // again -- this time in the context of someObject
6 someObject.setValueHandler(someItem, ‘foo‘, ‘bar‘);

 

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

 

        总结

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

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