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 adds a new line into a paragraph?
<b> <br> <p>
First line ...<br>
Other line...
Which CSS property can be used to add space between letters?
text-size word-spacing letter-spacing
#id {
  letter-spacing: 2px;
}
What JavaScript function can be used to get access to HTML element with a specified ID?
getElementById() getElementsByTagName() createElement()
var elm = document.getElementById("theID");
var content = elm.innerHTML;
alert(content);
Click on the "echo" correct instruction.
echo "CoursesWeb.net" echo "CoursesWeb.net"; echo ""CoursesWeb.net";
echo "Address URL: http://CoursesWeb.net";
JavaScript Object Method Chaining

Last accessed pages

  1. Bubbles3 (8621)
  2. Get search data from URL address in JavaScript (1501)
  3. Update and Delete MySQL data with data from Form (172)
  4. AJAX with POST and PHP (7442)
  5. Artist Room (74)

Top accessed pages

  1. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (47733)
  2. Read Excel file data in PHP - PhpExcelReader (35866)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (35489)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (31998)
  5. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (29264)