The best known example, or is it complaint, about JavaScript's late binding is the mistake many beginners make when assigning an event handler that is also a method.
For example:
var myObject = {mySize: 99}; myObject.getSize=function() { alert(this.mySize); }; Button1.onclick=myObject.getSize;
Notice that assigning the Function object to a property of Button1 makes it a method of Button1 as well as of myObject - this is an example of one Function object serving two masters in that it is a method of myObject and Button1.
When you click the Button the Function is evaluated with this referencing the HTMLElement that is the Button. That is in this case the Function object is bound to the Button object.
The result is that the getSize function doesn't work and the beginner wastes a lot of time trying to debug the code. This is also how JavaScript gets a bad name.
Of course the correct way to do the job is to early bind the method.
With the addition of just bind(myObject) the event handler now works as the novice expects and displays the value of myObject.mySize.
It sometimes matters if methods are late or early bound - it all depends how you plan to use them.
Adding & Removing Object Methods
If you have an object then it is easy enough to add a new method.
myObject.myNewMethod=function(){....};
the myNewthod function simply has to make use of this within its body as if it was being define as an object literal.
[Rest In Book]
Overriding Object Methods
Another important use of the bind method is that it can be used to override methods in object instances. If an object already has a method called myMethod then simply redefining it overrides it. That is:
myObject.myMethod=function(){....};
overrides the existing myMethod and substitutes the new function.
This works but often you want to make use of the old definition of myMethod to implement the new version.
How can you do this?
A simple minded approach would try to use something like:
var oldMyMethod=myObject.myMethod;
However this doesn't work because when you try to call the old method this is set incorrectly. That is
oldMyMethod();
calls the old version of MyMethod with this set to the global scope, usually window.
The trick is to use bind to retain the correct call context:
oldMyMethod=myObject.myMethod.bind(myObject);
Now a call to oldMyMethod() really does call the method with this set to myObject.
You can use this technique to override methods with code that calls the old method to get the job done.
[Rest In Book]
Is the JavaScript way better?
JavaScript is certainly different and trying to make it look like the way other languages do the job is a big part of the problem.
The need to use a call context, i.e. this, is a consequence of treating functions as first class objects and this is very well worthwhile.
JavaScript takes an approach that has a synergy in that all of the parts fit together and, yes, give you more than the sum of the parts. As long as you understand all of the parts.
Summary
Functions are just objects and can be properties of other objects.
A method is a function property that makes use of the object it is a property of in its code.
To allow a method to reference the object it is a property of it is passed an execution context in this - which is a reference to the object involved in the function call. If a function is called using myObject.function() then this references myObject. We say that the function or method is bound to myObject.
Functions that are methods use this.myProperty to reference properties of the object they are bound to.
A Function object exists independently of any object that it is a property or method of. This means it can be referenced by other variables and the object it is bound to depends on how the function is called. A single Function object can be a method for many different objects and it can be just a Function object.
You can use apply and call to explicitly set the value of this and so borrow methods from other object and create ad-hoc methods that aren't properties of the object that they work with.
That is in JavaScript methods are late bound to their objects.
The bind method can be used to create a Function object bound to any specified object. That is myFunc.bind(myObject) creates a new Function object permanently bound to myObject with the same function body as myFunc.
You can late bind a method to an object using: myObject.property=function(parameters){ function body };
You can early bind a method to an object using:myObject.property=function(parameters){ function body }.bind(myObject);
In general you should use the default late bound method unless you need to assign or pass a method rather than a function when you should early bind.
Just JavaScript
There is a newer version of the draft of the book here.
A Radical Look At JavaScript
Contents
JavaScript Isn't Java, or C, or C# ... (Book Only)
Most books on JavaScript either compare it to the better known class based languages such as Java or C++ and even go on to show you how to make it look like the one of these.
Just JavaScript is an experiment in telling JavaScript's story "just as it is" without trying to apologise for its lack of class or some other feature. The broad features of the story are very clear but some of the small details may need working out along the way - hence the use of the term "experiment". Read on, but don't assume that you are just reading an account of Java, C++ or C# translated to JavaScript - you need to think about things in a new way.
Just JavaScript is a radical look at the language without apologies.
Coming Next
More functions - parameters, pass by value, expressions and constructors.
Working with lower-level data is very much part of graphics. This extract from Ian Elliot's book on JavaScript Graphics looks at how to use typed arrays to access graphic data.
JavaScript should not be judged as if it was a poor version of the other popular languages - it isn't a Java or a C++ clone. It does things its own way. In particular, it doesn't do inheritance [ ... ]
