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 = 'https://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">https://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 HTML5 tag defines marked text? (can be used to highlight parts of text)
<mark> <embed> <span>
<p>Free corses: <mark>coursesweb.net</mark> for Web Development.</p>
Which CSS pseudo-class adds a style to an element when the mouse is over it?
:focus :hover :active
a:hover {
  font-weight: bold;
  color: #00da01;
}
Click on the function which returns a string value that represents the number rounded to the x digits after the decimal point.
toPrecision(x) toFixed(x) floor(x)
var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35
Indicate the PHP function which reads an entire file into an array.
[) file() readfile()
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
var_export($arr);
JavaScript Object Method Chaining

Last accessed pages

  1. Get Duration of Audio /Video file before Upload (5913)
  2. Follow the mouse cursor with a DIV inside a Parent (2703)
  3. Register and show online users and visitors (23278)
  4. Node.js Move and Copy Directory (1127)
  5. SHA1 Encrypt data in JavaScript (8256)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (390)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (332)
  3. Register and show online users and visitors (302)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (234)
  5. Insert, Select and Update NULL value in MySQL (223)