Redefining prototype vs appending to prototype in Javascript

Question

From here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

Performance considerations

function MyObject(name, message) {
  this.name = name.toString();
  this.message = message.toString();
}
MyObject.prototype = {
  getName: function() {
    return this.name;
  },
  getMessage: function() {
    return this.message;
  }
};

However, redefining the prototype is not recommended. The following example instead appends to the existing prototype:

function MyObject(name, message) {
  this.name = name.toString();
  this.message = message.toString();
}
MyObject.prototype.getName = function() {
  return this.name;
};
MyObject.prototype.getMessage = function() {
  return this.message;
};

Above quotes and codes are from the given link.
I want to understand how does the first code suggest that we are redefining the prototype and how does the second code suggest that we are appending the prototype?

What represents redefining and what represents appending in the above pieces of code?

`MyObject.prototype = ...` redefines the prototype with a new object. Adding a new property to the exisiting prototype doesn't redefine the entire object. — Teemu, Nov 05 '20 at 07:14
This is similar to why `element.style.color = 'red'` will work but `element.style = { color: 'red' }` will not. — Hao Wu, Nov 05 '20 at 07:17
@HaoWu With an exception, that setting the prototype of a function works well ... — Teemu, Nov 05 '20 at 07:18
@HaoWu I am from C++ background. I don't know much about Javascript. Please explain the code that you wrote in your comment. — Aquarius_Girl, Nov 05 '20 at 07:21

score 1 · Answer 1 · edited Nov 05 '20 at 07:22

1

first code MyObject.prototype = { ... } suggest redefining the prototype as we set the completely new object to the MyObject.prototype.

but the second code suggests appending as it only assigns the function by the specific key(getName and getMessage) of the object.

edited Nov 05 '20 at 07:22

adiga

34,372
9
61
83

answered Nov 05 '20 at 07:17

wangdev87

8,611
3
8
31

Fullstack Guy · Accepted Answer · 2020-11-05T07:48:59.480

When you redefine the prototype object you are creating a whole new object, instead of preserving the existing prototype with its properties, this is undesirable.

If we redefine the prototype object, it will break the inheritance hierarchy. Particularly instanceof and Object.prototype.isPrototypeOf won't work as expected.

Let's take an example and show a simple inheritance hierarchy with ChildClassOne and ChildClassTwo inheriting from ParentClass.

In the first case the inheritance is broken as the prototype is overriden with a completely new object which erases every information which was present already, instead of appending to the prototype received from the Object.create call.

In the second case it works as expected as the prototype is not replaced:

function ParentClass(param) {
  this.param = param;
}
ParentClass.prototype.getParam = function() {
  return this.param;
}

function ChildClassOne(param, name, message) {
  ParentClass.call(param);
  this.name = name.toString();
  this.message = message.toString();
}
//Inheriting through prototype
ChildClassOne.prototype = Object.create(ParentClass.prototype);
ChildClassOne.constructor = ChildClassOne;

//Prototype completely overriden, destroying the hierarchy
ChildClassOne.prototype = {
  getName: function() {
    return this.name;
  },
  getMessage: function() {
    return this.message;
  }
};

//the instanceof and isPrototypeOf is broken
const child1 = new ChildClassOne("bazz", "foo", "bar");
console.log(child1 instanceof ParentClass);
console.log(ParentClass.prototype.isPrototypeOf(child1));
console.log(ChildClassOne.prototype instanceof ParentClass)

function ChildClassTwo(param, name, message) {
  ParentClass.call(param);
  this.name = name.toString();
  this.message = message.toString();
}

//Inheriting through prototype
ChildClassTwo.prototype = Object.create(ParentClass.prototype);
ChildClassTwo.constructor = ChildClassTwo;

//Preserving the heirarchy information, by appending to existing prototype
ChildClassTwo.prototype.getName = function() {
  return this.name;
};
ChildClassTwo.prototype.getMessage = function() {
  return this.message;
}

//Works as expected
const child2 = new ChildClassTwo("bazz", "foo", "bar");
console.log(child2 instanceof ParentClass);
console.log(ParentClass.prototype.isPrototypeOf(child2));
console.log(ChildClassTwo.prototype instanceof ParentClass)

Redefining prototype vs appending to prototype in Javascript

2 Answers2