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

Question

When using a constructor function in JavaScript to create a class, is it possible to redefine the class's method later?

Example:

function Person(name)
{
    this.name = name;
    this.sayHello = function() {
        alert('Hello, ' + this.name);
    };
};

var p = new Person("Bob");
p.sayHello();   // Hello, Bob

Now I'd like to redefine sayHello like this:

// This doesn't work (creates a static method)
Person.sayHello() = function() {
   alert('Hola, ' + this.name);
};

so when I create another Person, the new sayHello method will be called:

var p2 = new Person("Sue");
p2.sayHello();   // Hola, Sue
p.sayHello();    // Hello, Bob

EDIT:

I realize I could send in an argument like "Hello" or "Hola" to sayHello to accomplish the different output. I also realize I could simply assign a new function to p2 like this:

p2.sayHello = function() { alert('Hola, ' + this.name); };

I'm just wondering if I can redefine the class's method so new instances of Person will use the new sayHello method.

Bergi · Accepted Answer · 2014-01-20 22:58:38Z

14

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

edited Jan 20, 2014 at 22:58

answered Jan 20, 2014 at 20:49

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

mike rodent Over a year ago

I tried your idea for "decorating the constructor". It doesn't currently seem to work, and I get a "requires new" error. I am not a JS expert but this may be something to do with newer versions of JS (I think I am currently using ES6 (async/await)... or is it ES7???).

Bergi Over a year ago

@mikerodent The above method does not work for ES6 classes. It's a bit more complicated there.

Pum Walters Over a year ago

Note that this only works for proper functions, not for arrow functions

Bergi Over a year ago

@PumWalters Sure, arrow functions are no constructors.

Pum Walters Over a year ago

@Bergi: I'm not sure I understand. An ordinary function can be assigned to an object property and will act as a method (i.e. will get 'this'). An arrow function will act as a function but not as a method (won't get 'this')

|

Denys Séguret · Accepted Answer · 2014-01-20 20:52:29Z

13

To have a different function for p2, you can just set the sayHello property of p2 :

p2.sayHello = function(){ 
    alert('another one');
}
p2.sayHello();

If you use prototype, then you can also change it for all instances of Person (and still you can overwrite it for a specific person) :

function Person(name)
{
    this.name = name;
};
Person.prototype.sayHello = function() {
    alert('Hello, ' + this.name);
};

var p = new Person("Bob");

// let's set a specific one for p2
p2.sayHello = function(){ 
    alert('another one');
}

// now let's redefine for all persons (apart p2 which will keep his specific one)
Person.prototype.sayHello = function(){ 
    alert('different!');
}

p.sayHello();  // different!
p2.sayHello(); // another one

edited Jan 20, 2014 at 20:52

answered Jan 20, 2014 at 20:45

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

1 Comment

tronman Over a year ago

I know about prototype and that I could assigned a new function to p2, but what I wanted was to change Person directly so new instances of Person would use the "Hola" function. Sorry I didn't make that more clear.

zemil · Accepted Answer · 2022-06-29 09:28:39Z

3

To solve your issue You can use Reflect object

class Person {
    public name: string;
    
    constructor(name: string) {
        this.name = name;
    }

    public sayHello(): void {
        console.log(`Hello, ${this.name}`)
    }
}

const p = new Person("Bob");

p.sayHello();   // Hello, Bob

Reflect.defineProperty(Person.prototype, 'sayHello', { value: function() {
    console.log(`Goodbye, ${this.name}`)
}})

p.sayHello();   // Goodbye, Bob

answered Jun 29, 2022 at 9:28

zemil

5,2663 gold badges45 silver badges44 bronze badges

7 Comments

Ian Y. Over a year ago

Is it possible to redefine the constructor in a similar way? I checked Reflect.construct() and it does not have the third parameter for redefining like Reflect.defineProperty() does.

zemil Over a year ago

@IanY. I recommend you create a child class, also you can check - stackoverflow.com/questions/55760091/…

Ian Y. Over a year ago

Is creating a child class the only solution? I prefer redefining the constructor of the original class.

zemil Over a year ago

@IanY. it's the best practice. what is your purpose to redefine a constructor without inheritance?

Ian Y. Over a year ago

Could you please explain why it's the best practice? I prefer to use the existing class so that there wouldn't be an unnecessary new class added into my code.

|

Collectives™ on Stack Overflow

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

3 Answers 3

6 Comments

1 Comment

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related