Javascript function context binding-details about Dojo hitch/partial

In the dojo toolkit, the dojo/_ base/lang module packs or enhances Javascript native methods and provides a lot of useful methods. This article describes the basic knowledge of Function objects in Javascript and how to use dojo. hitch binds the context of the function. It also describes how to use dojo. partial binds specific parameters to a function and other practical technologies.

Before explaining the usage of dojo. hitch and dojo. partial, you must first understand what problems they can solve. One of the most common problems in Javascript programming is: What is this? For object-oriented programming, this inside the method is the object that declares the method, which is very simple! For Javascript, the answer is not that simple. To learn and understand the context of functions in Javascript, it is necessary to understand the context of functions.

Javascript function Context

When a function is called, Javascript creates a corresponding context. To create a context, follow these steps:

Create an argument object;
Create a function scope object;
Initialize the local variable of the function;
Create this attribute;
This indicates the object that is calling the function. Understanding this is critical to understanding the function running in Javascript, because the context of the function in Javascript is determined only when the function is called.

Here is an example: there is an object. One of the methods of this object is treated as the processing function of click events of Multiple HTML nodes. The following is the corresponding code.

[Javascript] 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;
});
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;
});
See the corresponding Demo (http://dojotoolkit.org/documentation/tutorials/1.7/hitch/demo/demo.html)

When The buttons whose class is "myNodes" are clicked, you may think that The browser will pop up The message "The value of 'foo' is bar". However, The above myObject. "The value of 'foo' is undefined" is displayed in The browser because myHandler is bound to a node click event ". This is because myObject. myHandler is executed as the context of the node, not by myObject itself. In other words, the Javascript interpreter assumes that the current this point is directed to the clicked node rather than the myObject.

Use apply and call to specify the function running Context

Javascript provides the apply and call methods for function objects to switch the runtime context of functions. Both methods can explicitly specify the reference of this attribute by passing in the runtime context. For example, we want the context of myObject. myHandler triggered when the node in the previous example is clicked to be myObject. The call method is used as an example:

[Javascript] dojo. query (". myNodes"). forEach (function (node ){
Node. onclick = function (evt ){
Return myObject. myHandler. call (myObject, evt );
};
});
Dojo. query (". myNodes"). forEach (function (node ){
Node. onclick = function (evt ){
Return myObject. myHandler. call (myObject, evt );
};
});

See the corresponding Demo (http://dojotoolkit.org/documentation/tutorials/1.7/hitch/demo/call.html)

After understanding the context basics of Javascript Functions, let's take a look at how dojo uses dojo. hitch to simplify this process.

Use dojo. hitch to bind the context of the function Runtime

Dojo. hitch is a function provided by dojo to simplify context binding during function runtime. To put it simply, dojo. hitch creates a new function bound to the context. You don't have to worry about the impact of context changes on the Function during running. Using dojo. hitch is also very simple:

[Javascript] 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"
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"

Corresponding Demo (http://dojotoolkit.org/documentation/tutorials/1.7/hitch/demo/hitch.html)

As you can see, no matter how the context changes during external running, dojo. hitch ensures that the context object of the function myFunction is always myObject.

Arguments object

Do you still remember the steps for creating context when Javascript was called before? The arguments object is created first. The arguments object is a function parameter array that sorts the elements in the array in the input order of parameters.

After the function is defined, the function signature is fixed. We cannot add or delete non-Anonymous function parameters. Sometimes this limits the flexibility of function calling. We have to rewrite the new function to handle changes to the parameter list, and the dojo. partial method breaks this restriction.

Use dojo. partial to control the parameter list

First, let's take a look at the following example (taken from the dojo/data Module). The parameter list contains four parameters:

[Javascript] var putValue = function (store, item, attr, value ){
Return store. setValue (item, attr, value );
}
Var putValue = function (store, item, attr, value ){
Return store. setValue (item, attr, value );
}
However, in the application, functions similar to putValue but with different parameter lists are needed, as shown below:

[Javascript] // declared myStore object
Var myStore = new dojo. data. ItemWriteStore ({...});
SomeObject. setValueHandler = function (item, attr, value ){
MyStore. setValue (item, attr, value );
};
// Declared myStore object
Var myStore = new dojo. data. ItemWriteStore ({...});
SomeObject. setValueHandler = function (item, attr, value ){
MyStore. setValue (item, attr, value );
};
Dojo. partial is a function that returns a function. You can use a predefined value to lock the first several parameters of the function. We can use dojo. partial to avoid repeated definitions of someObject. setValueHandler. The Code is as follows:

[Html] var putValue = function (store, item, attr, value ){
Return store. setValue (item, attr, value );
}
...
Var myStore = new dojo. data. ItemWriteStore ({...});
// Dojo. partial returns the putValue function whose first parameter is myStore.
SomeObject. setValueHandler = dojo. partial (putValue, myStore );

// Equivalent to running putValue (myStore, someItem, "foo", "bar ")
SomeObject. setValueHandler (someItem, "foo", "bar ");
Var putValue = function (store, item, attr, value ){
Return store. setValue (item, attr, value );
}
...
Var myStore = new dojo. data. ItemWriteStore ({...});
// Dojo. partial returns the putValue function whose first parameter is myStore.
SomeObject. setValueHandler = dojo. partial (putValue, myStore );
 
// Equivalent to running putValue (myStore, someItem, "foo", "bar ")
SomeObject. setValueHandler (someItem, "foo", "bar ");

It should be noted that dojo. partial does not lock the runtime context of the function.

Bind runtime context and lock parameters at the same time

If we want to bind runtime context and lock parameters at the same time, dojo. hitch itself can complete these two functions. Dojo. the first two parameters of hitch refer to the runtime context to be bound and the corresponding function. These two parameters can be followed by any number of lock parameters of the corresponding function represented by the second parameter, the Code is as follows:

[Html] someObject. setValueHandler = dojo. hitch (someObject, putValue, myStore );
 
// The first putValue parameter is locked to myStore, And the this parameter in putValue (if any) points to someObject
SomeObject. setValueHandler (someItem, "foo", "bar ");
SomeObject. setValueHandler = dojo. hitch (someObject, putValue, myStore );

// The first putValue parameter is locked to myStore, And the this parameter in putValue (if any) points to someObject
SomeObject. setValueHandler (someItem, "foo", "bar ");

 

Summary

In this tutorial, the context basics of Javascript runtime are described first, and then how to use dojo. the hitch method fixed the runtime context of the function and learned how to use the fixed value to lock the parameter list-dojo. partial. hitch implements both features at the same time.

Dojo. hitch is very effective in the event-driven programming model. You do not need to worry about context changes during function runtime, reducing code coupling.

 

 

From the Chinese blog of Dojo