1. Computing

Object Oriented JavaScript

20. Chaining Methods

By

JavaScript provides all sorts of shortcut ways of specifying your code which makes the code quicker to write. One of these that relates to objects is the chaining together of two or more methods which need to be run on eht same object. Instead of having to specify the object on the front of each method as we want to run it, we can chain all the methods together one after the other on the one object reference.We just need to define the methods the right way in order to allow it.

Let's look at an example of this to see how it works. Here's a section of the code where we define an object and then run several methods on the object.


var newB = new example();
newB.firstMethod('x');
newB.secondMethod('y');
newB.thirdMethod(1,15,'z');

As you can see from the code none of the values returned from any of out three methods are actually being used since none of them have the returned value assigned to anything. Quite probably the way you currently have these methods defined you don't have them returning anything at all. We are going to change that.

What we need to do with all these methods that do not currently return anything is to add one extra line of code to the end of each of the methods.


return this;

With that line of code in place our methods now each return the object that they belong to This is the only change that we need to make to methods in order to allow us to use method chaining. Of course we can't add that line if the method already returns a value but them methods that return values are not suited to method chaining in the first place as each of those needs to be specified separately in order to be able to assign the value that is returned.

With our methods that don't normally need to return a value now returning a reference to the object that they belong to it is no longer necessary for us to use three separate statements to call those three methods. We can now combine all three into one statement simply by chaining the methods together.


var newB = new example();
newB.firstMethod('x').secondMethod('y').thirdMethod(1,15,'z');

This works because the last statement in firstMethod() is return this; which in this case returns a reference to newB. This means that newB.firstMethod() after the method has run is equivalent to newB and so can be substituted for newB where we want the method to be run and the object to be available for further referencing.

All the Object Oriented JavaScript Tutorials

  1. What is Object Oriented JavaScript?
  2. The Benefits of OO JavaScript
  3. JavaScript's Built in Objects
  4. Extending Built In Objects
  5. Creating Objects from Existing Objects
  6. Creating New Objects Without Copying Existing Ones
  7. Dot Notation and "this"
  8. prototype
  9. Inheritance and "constructor"
  10. Associative Array Notation
  11. Create Method if Doesn't Exist
  12. "self" and Multiple Objects
  13. Defining Objects with JSON
  14. Namespaces
  15. Lazy Definition
  16. Extending Methods
  17. Copying Objects
  18. Private Properties and Privileged Methods
  19. Public Access to Private Methods
  20. Chaining Methods
  21. Singletons
  1. About.com
  2. Computing
  3. JavaScript
  4. Javascript Tutorials
  5. Object Oriented JavaScript
  6. Chaining Methods

©2014 About.com. All rights reserved.