AJAX In Action [293]
The alert box will display the text Beech: leaf=green, serrated edge, bark=smooth. So far, so good. Now let us define a class to represent a dog: function Dog(name,bark){
this.name=name;
this.bark=bark;
}
Licensed to jonathan zheng Methods and functions 609 and create an instance of our Dog class: var Snowy=new Dog("snowy","wau! wau!"); Snowy wants to show us his bark, but, although we’ve defined it for him, he has no function through which to express it. He can, however, hijack the Tree class’s function: var tmpFunc=Beech.describe; tmpFunc.call(Snowy); Remember, the first argument to function.call() is the context object, that is, the object that the special variable this will resolve to. The previous code will generate an alert box displaying the text Snowy: leaf=undefined, bark=wau! wau!. Well, it’s better than nothing for the poor dog. So what’s going on here? How can a dog call a function that really belongs to a tree? The answer is that the function doesn’t belong to the tree. Despite being peppered with references to this, assigning the function to the Tree prototype binds it only inasmuch as it enables us to use the shorter MyTree.describe() notation. Internally, the function is stored as a piece of text that gets evaluated every time it is called, and that allows the meaning of this to differ from one invocation to the next. Borrowing functions is a neat trick that we can use in our own code, but in production-quality code, we’d prefer to see someone implement a bark() method for Snowy of his very own. The real reason for discussing this behavior is that when you are writing event-handling code, the web browser will do it for you behind the scenes. B.3.4 Ajax event handling and function contexts Ajax event handlers are pretty much the same as most GUI toolkit languages, with specialized categories for mouse and keyboard events, as we saw in chapter 4. Our example uses the onclick handler, fired when a mouse is clicked on a visible element. A full discussion of DHTML event handling is beyond the scope of this book, but let’s take the time here to highlight a particular issue that can often trip up the unwary. Event handlers can be declared either as part of the HTML markup; for example or programmatically; for example: Licensed to jonathan zheng 610 APPENDIX B JavaScript for object-oriented programmers function clickHandler(){ alert(this.id); } myDiv.onclick=clickHandler; Note that in the programmatic case, we pass a reference to the Function object (that is no () after the clickHandler). When declaring the function in the HTML, we are effectively declaring an anonymous function inline, equivalent to myDiv.onclick=function(){ alert(this.id); } Note that in both cases, the function has no arguments assigned to it, nor is there any way for us to pass in arguments with the mouse click. However, when we click on the DOM element, the function is called with an Event object as the argument and the element itself as the context object. Knowing this can save a lot of grief and puzzlement, particularly when you’re writing object-based code. The key source of confusion is that the DOM node is always passed as context, even if the function is attached to the prototype of a different object. In the following example, we define a simple object with an event handler for a visible GUI element that it knows about. We can think of the object as the Model in MVC terms, with the event handler taking the role of Controller, and the DOM element being the View. function myObj(id,div){ this.id=id; this.div=div; this.div.onclick=this.clickHandler; } The constructor takes an internal ID and a DOM element, to which it assigns an onclick handler. We define the event handler as follows: myObj.prototype.clickHandler=function(event){ alert(this.id); } So, when we click on