Custom shapes objects using polymorphism in JavaScript I have made the following example and want to know if it properly represents polymorphism in JavaScript.



var customShape = function(){
    this.sides = 4;
    this.length = 5;
    this.perimeter = 4 * this.length; 
};

customShape.prototype.noOfSides = function(){
    return ("Total No of Sides = " + 4);
}

var rect = new customShape();
var square = new customShape();
var triangle = new customShape();
triangle.noOfSides = function(){
    return ("Total No of Sides = " + 3);
}

console.log(rect.noOfSides());
console.log(square.noOfSides());
console.log(triangle.noOfSides());




My intention was to make a function noOfSides() which works for different objects.

References:


What is polymorphism, what is it for, and how is it used?
What is polymorphism? Explain with an example?
What is polymorphism in Javascript?
Basic javascript inheritance and polymorphism
[I] want to know if it properly represents PolyMorphism in JavaScript?


Your code could be considered a representation of polymorphism when considering that the noOfSides() function was changed for a single instance of the customShape type, but that doesn't really apply to all objects of that type. Traditionally in Object-Oriented programming, sub-typing would be used to create sub-classes that inherit the properties and methods of the base class. 

You created instances of customShape, but didn't really make any objects that inherit that functionality. For instance, you made the triangle instance and added a function (like a method) to that one instance:


var triangle = new customShape();
triangle.noOfSides = function(){
    return ("Total No of Sides = " + 3);
}



Looking at the fourth reference you included, look at the Padawan inheritance example


var jedi = function(name, age) {
    Padawan.call(this, name, age);
};
jedi.prototype = Object.create(Padawan.prototype);



Similarly, you could make a constructor for a triangle. The customShape constructor doesn't appear to accept any parameters, though it could accept the number of sides, in which case the triangle constructor could pass that in as an argument to the call to customShape.call(), but for now, the sides property can be set after that call.

function triangle() {
    //initialization code
    customShape.call(this);
    this.sides = 3;
}


And then set the prototype for the triangle to an object with the customShape prototype:

triangle.prototype = Object.create(customShape.prototype);


Then you don't need to add an additional noOfSides() function for the triangle. See a demonstration below. Note that I updated the noOfSides() method to utilize this.sides instead of a hard-coded value (like Matt Fletcher mentioned in a comment on your SO question, and also did in the jsbin example he made and linked in another comment).



var customShape = function(){
    this.sides = 4;
    this.length = 5;
    this.perimeter = 4 * this.length; 
};

customShape.prototype.noOfSides = function(){
    return ("Total No of Sides = " + this.sides);
}

var rect = new customShape();
var square = new customShape();
var triangle = function() {
    customShape.call(this);
    this.sides = 3;
}
triangle.prototype = Object.create(customShape.prototype);

var tri = new triangle();
console.log('rect: ', rect.noOfSides());
console.log('square: ', square.noOfSides());
console.log('triangle: ', tri.noOfSides());




Matt Fletcher has good points in his comment at 2017-11-29 12:37:29Z:


  @Deadpool Fine. This is a somewhat improved version: jsbin.com/jazasav/edit?html,js,console ... but it still makes little sense, because "length" can differ on all sides. Also these shapes and their values don't follow such simple mathematical rules. In a real world example you'd need to be able to pass in much more complex data and get it to process it in a more complex way. Perhaps use the whole "Animal" inheritance pattern to better explain it, if that's what you're planning on doing. I just would like to know what you're actually trying to gain from generating polymorphic obj


And Matt's jsbin includes an ES2015 example, which should be fsmiloar to OOP users in other languages like C++, Java, PHP, etc.



// ES6 style

class CustomShape {
  constructor(sides, length) {
    this.sides = sides;
    this.length = length;
    this.perimeter = sides * length;
  }
  noOfSides() {
    return ("Total No of Sides = " + this.sides);
  }
}

class Square extends CustomShape {
  constructor(length) {
    super(4, length);
  }
}

const mySquare = new Square(5);
console.log(mySquare.noOfSides());