Should I use a prototype or not?

Question

I am creating a Vector class that can basically contain three numeric values. However, many operations can be performed on such a vector — for example, obtaining a value, adding or subtracting another vector, etc.

I was wondering if these functions should be encoded as a prototype of a function of the Vector class or what I should define them in the constructor.

So which of these two methods is preferable?

function Vector3D(x, y, z) { this.x = x; this.y = y this.z = z; } Vector3D.prototype.magnitude = function() { return Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z); }; 

or

 function Vector3D(x, y, z) { this.x = x; this.y = y; this.z = z; this.magnitude = function() { return Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z); }; } 

Answer 1

This is exactly the situation using the prototype. For this, I see two main advantages:

• Functions are not created multiple times . If you define functions inside the constructor, for every function you define, every anonymous function is created every time the constructor is called. Prototypes are static objects, and each Vector3D instance will simply reference prototype functions.
• A prototype is the only object that can be easily manipulated . It gives more flexibility; Unfortunately, I can only give a few examples of what this has to offer:
  • If you want to create a child class like Vector3DSpecial, you can just clone Vector3D.prototype and assign it to Vector3DSpecial.prototype . Although you can also do this using the constructors Vector3DSpecial.prototype = new Vector3D(); Designers may contain side effects that will be performed in this simple purpose of the prototype, and therefore should be avoided. With prototypes, you can even select only certain functions in a prototype to copy to a new class.
  • Adding methods to Vector3D is just a matter of adding prototype properties and makes it easier to split / organize your code into multiple files or let you dynamically add methods to other parts of the code. Of course, you can make a combination of adding methods in the constructor and prototype, but this is inconsistent and most likely will lead to more complexity in the future along the way.

When did I use a non- prototype? For singleton objects, for example, a controller that interacts with the page and can delegate work to other objects. One such example is the global “notification”. Here, the extension is unlikely, and the object is created only once, which makes the prototype additional (conceptual) complexity.

Answer 2

Prototype methods will only work for public properties, if you keep track of x, y, z as "private" variables, the prototype will not work.

I would use the latter, because you may need methods that work only with private / internal variables, but it all depends on the context.

 function Vector3D(x, y, z) { // x, y, z is automatically in this scope now, but as private members. this.magnitude = function() { return Math.sqrt(x * x + y * y + z *z); } } 

Answer 3

ECMA 6 http://es6-features.org/#BaseClassAccess

 class Shape { … toString () { return `Shape(${this.id})` } } class Rectangle extends Shape { constructor (id, x, y, width, height) { super(id, x, y) … } toString () { return "Rectangle > " + super.toString() } } class Circle extends Shape { constructor (id, x, y, radius) { super(id, x, y) … } toString () { return "Circle > " + super.toString() } } 

ECMA 5

 var Shape = function (id, x, y) { … }; Shape.prototype.toString = function (x, y) { return "Shape(" + this.id + ")" }; var Rectangle = function (id, x, y, width, height) { Shape.call(this, id, x, y); … }; Rectangle.prototype.toString = function () { return "Rectangle > " + Shape.prototype.toString.call(this); }; var Circle = function (id, x, y, radius) { Shape.call(this, id, x, y); … }; Circle.prototype.toString = function () { return "Circle > " + Shape.prototype.toString.call(this); };