How to Redefine a JavaScript Class's Method

Is it possible to redefine a JavaScript class's method?

is it possible to redefine the class's method later?

Yes. However, you must not assign the new function to a property of the Person constructor, but to the instance itself:

var p2 = new Person("Sue");
p2.sayHello();   // Hello, Sue
p2.sayHello = function() {
   alert('Hola, ' + this.name);
};
p2.sayHello();   // Hola, Sue

If you want to do this for all new instances automatically (and have not used the prototype for the method, which you easily could exchange as in @dystroy's answer), you will need to decorate the constructor:

Person = (function (original) {
    function Person() {
        original.apply(this, arguments);   // apply constructor
        this.sayHello = function() {       // overwrite method
            alert('Hola, ' + this.name);
        };
    }
    Person.prototype = original.prototype; // reset prototype
    Person.prototype.constructor = Person; // fix constructor property
    return Person;
})(Person);

Change the class of a Javascript variable

Make one of the classes extend the other?

class B {
  constructor(x, y) {
     this.x = x;
     this.y = y;
  }
}
class A extends B {
  constructor(x) {
    super();
    this.x = x;
  }
}

let a = new A(20);
console.log(a instanceof B);

How to redefine JavaScript (NOT CSS) classes, in the console?

None of the answers provide a solution without changing original code... So here is refined solution.

If in code you have something like this:

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

Then this means you've created a let variable named Polygon. You cannot redeclare Polygon, but you can reassign it.

So if you need to experiment in e.g. JS console just do:

Polygon = class {
  //... new stuff here
}

This will replace the original class but will not violate let restrictions.

You can try this out by pasting above code in the console, and then try new Polygon(1,2).

How do Javascript object instances retain methods after parent class is redefined?

You are mixing up names which point to objects and the objects themselves. When you use:

Person = function (name) {
  this.name = name;
}

you are not redefining the object that the name Person points to. You are just taking the name Person and pointing it to a new thing — a new function. The old Person.protoype is still in memory and the instance p holds a reference to it and p.constructor still points to the original Person function.

You can confirm this by grabbing a reference of the Person.prototype and comparing before and after the reassignment of the variable Person

function Person(name) {  this.name = name;}Person.prototype.greeting = function() {  return "Hello, " + this.name;}var p = new Person("Ryan");
// p's prototype is Person.prototypeconsole.log(Object.getPrototypeOf(p) === Person.prototype) // true
// grab a reference of the protoype for laterlet Pprotot = Person.prototype
// point variable Person at something elsePerson = function (name) {  this.name = name;}
// p's prototype is STILL the old Person.prototypeconsole.log(Object.getPrototypeOf(p) === Pprotot)    // still true
// p also still holds a reference to the old function (through the prototype)console.log(p.constructor)
// but it's not the same thing the variable Person now points toconsole.log(p.constructor === Person)

---

Related Topics