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.

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).
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);

• 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).
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 = '';

// 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"></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
var getTag = obTag.getTagCnt(tag, cnt);

Daily Test with Code Example

Which tag adds an image in web page?
<div> <img> <span>
<img src="" width="191" height="63" alt="Courses-Web" />
Which of these CSS codes displays the text oblique?
font-style: italic; text-decoration: underline; font-weight: 500;
#id {
  font-style: italic;
Click on the jQuery function used to hide with animation a HTML element.
click() hide() show()
$(document).ready(function() {
  $(".a_class").click(function(){ $(this).hide("slow"); });
Click on the correctly defined function in PHP.
fname function() {} function fname() {} function $fname() {};
function fname($a, $b) {
  echo $a * $b;
JavaScript Object Method Chaining

Last accessed pages

  1. Qwop (8221)
  2. Register and show online users and visitors (14103)
  3. Ajax-PHP Chat Script (27384)
  4. JavaScript code and PHP (13755)
  5. Create simple Website with PHP (12453)

Top accessed pages

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