This lesson shows how to chain object methods in JavaScript.
With the help of method chaining we can call more than one method or function of the object in a single instruction.

object.method_1().method_2()
The way to chain method invocations is to define the methods (functions) with the special word this (to can be accessed outside), and to return the object instance in the code of the previous method (method_1() ).
• Syntax:
var className = function() {
  var thisob = this;      // to store the object instance

  this.method_1 = function(){
    // some JavaScript code

    return thisob;     // returns object instance
  }

  this.method_2 = function(){
    // JavaScript instructions
  }
}
- Here is an example, a JavaScript object used to calculate the area and perimeter of rectangle (see the comments in code, and test it yourself).
<script>
var Rectangle = function() {
  var thisob = this;      // to store the object instance
  var a = 0;
  var b = 0;

  // sets a and b values
  this.setAB = function(a1, b1){
    a = a1;
    b = b1;

    return thisob;     // returns object instance
  }

  // returns rectangle area
  this.area = function(){
    return a * b;
  }

  // returns rectangle perimeter
  this.perimeter = function(){
    return 2 * (a + b);
  }
}

// creates an object instance of the class
var obR = new Rectangle();

// sets the values and gets the area and perimeter
var area = obR.setAB(7, 8).area();
var perimeter = obR.setAB(7, 8).perimeter();

// test
alert('Area = '+ area +'\nPerimeter = '+ perimeter);
</script>

• You can chain more than two methods, the technique is the same, the public methods (that can be accessed outside) must be defined with the special word "this", and all the previous methods must return the object instance.
- Here is an example that chains three methods. A JavaScript object used to define HTML tag with ID, CSS class, and content (study the code and test it yourself).
<script>
var setTag = function() {
  var thisob = this;      // to store the object instance
  var id = '';            // tag id attribute
  var cls = '';           // tag class attribute

  // sets id
  this.setId = function(id1){
    id = ' id="'+ id1 +'"';

    return thisob;     // returns object instance
  }

  // sets class attribute
  this.setClass = function(cls1){
    cls = ' class="'+ cls1 +'"';

    return thisob;     // returns object instance
  }

  // returns the HTML tag and its content
  this.getTagCnt = function(tag, cnt){
    return '<'+ tag + id + cls +'>'+ cnt +'</'+ tag+ '>';
  }
}

// creates an object instance of the class
var obTag = new setTag();

// variables with tag type and content
var tag = 'div';
var cnt = 'http://coursesweb.net';

// chains methods to set ID, Class, and gets HTML <div> tag with these attributes and content in a single instruction
var getTag = obTag.setId('some_id').setClass('a_class').getTagCnt(tag, cnt);

// test
alert(getTag);       // <div id="some_id" class="a_class">http://coursesweb.net</div>
</script>
The instruction that chains the methods in the code above:
var getTag = obTag.setId('some_id').setClass('a_class').getTagCnt(tag, cnt);
It is the same with this:
// sets ID and css class, then gets the HTML tag with content
obTag.setId('some_id');
obTag.setClass('a_class');
var getTag = obTag.getTagCnt(tag, cnt);

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
}
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}
Indicate the PHP variable that contains data added in URL address after the "?" character.
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
JavaScript Object Method Chaining

Last accessed pages

  1. PHP-MySQL free course, online tutorials PHP MySQL code (41827)
  2. Qwop (39687)
  3. Drag Racer V3 (14587)
  4. Create simple Website with PHP (15204)
  5. Zuma Games (17987)

Popular pages this month

  1. Qwop (6862)
  2. Drag Racer V3 (4692)
  3. Bubbles3 (1916)
  4. List with All the Games (1605)
  5. Butterfly Kyodai (1507)