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()

To can chain multiple methods, the previous method (method_1() ) must return the object instance (this).

Syntaxa:
class className {
 constructor(){
 //here you can define the properties
 }

 metoda_1(){
 //JavaScript code

 return this; // returns the object instance
 }

 metoda_2(){
 //JavaScript instructions
 }
}

- Here's an example, a JavaScript class that can calculate the area and perimeter of the rectangle (see the comments in code and test it).
class Rectangle {
 constructor(){
 //properties
 this.a =0;
 this.b =0;
 }

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

 return this; // returns the object instance
 }

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

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

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

//Set the values to get the area and perimeter
var area = obR.setAB(7, 8).area();
var perimeter = obR.setAB(7, 8).perimeter();

// test
document.write('Area = '+ area +'<br>Perimeter = '+ perimeter);

Chaining multiple methods

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 this keyword, 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).
class setTag {
 constructor(){
 //properties
 this.id = ''; // id attribute
 this.cls = ''; // class attribute
 }

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

 return this; // returns the object instance
 }

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

 return this; // returns the object instance
 }

 // returns the HTML and content
 getTagCnt(tag, cnt){
 return '<'+ tag + this.id + this.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';

//call methods chained to set ID, "class", and gets a <div> with those attributes
var getTag = obTag.setId('some_id').setClass('a_class').getTagCnt(tag, cnt);

// test
document.write(getTag); //<div id="some_id" class="a_class">https://coursesweb.net</div>
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 is used to add lists into <ul> and <ol> elements?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>
Which value of the "display" property creates a block box for the content and ads a bullet marker?
block list-item inline-block
.some_class {
  display: list-item;
}
Which instruction converts a JavaScript object into a JSON string.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicate the PHP class used to work with HTML and XML content in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
Defining classes with Methods that can be chained

Last accessed pages

  1. PHP getElementById and getElementsByTagName (23092)
  2. Simple Admin Login PHP Script (1673)
  3. Select in MySQL, Output results in HTML Table (6553)
  4. Insert, Select and Update NULL value in MySQL (33235)
  5. setTimeout and this with bind() method in JavaScript class (622)

Popular pages this month

  1. Contact page - CoursesWeb (1957)
  2. Tabs effect with CSS (1944)
  3. Insert, Select and Update NULL value in MySQL (1039)
  4. Read Excel file data in PHP - PhpExcelReader (833)
  5. PHP getElementById and getElementsByTagName (513)