CODEWITHSUNDEEP
javascriptecmascript-6
Mike Rifgin
Mike Rifgin

Reputation: 10745

Extending es6 classes programmatically

Using standard es5 I have this method that allows me to add methods to my library's prototype chain (it allows extension of the core library and also any components that are attached to the library):

 library.extend = function(extendId, extendObj) {
        //if it's an extension of the core library object...
        if(extendId === 'library') {
            library.prototype[extendObj.name] = extendObj.func;
        } else {
            library.component[extendId].prototype[extendObj.name] = extendObj;
        }
 };

Usage would be:

 /* create some new class */
 var somecomponent = function() {}
 somecomponent.protoype.somemethod = function() {}

/* extend the base libraries prototype chain with the new class*/
library.extend('library', somecomponent)

In es6 classes we also have prototypes but they are masked by the class syntax and you are supposed to add methods to the class using the extends method.

Because of this I'm not sure how I can programmatically add methods to es6 classes using a method similar to what I have above.

Upvotes: 5

Views: 2884

Answers (2)

Oriol
Oriol

Reputation: 288080

I think you have some confusion.

In ES5, functions created with function expression or declaration are both instantiable (i.e. constructors) and callable:

function f() {}
f();     // Function call
new f(); // Constructor instantiation

Then ES6 allows to create objects which are only callable or only instantiable:

var f = () => {}; // Arrow function
f();              // Function call
new f();          // Error: f is not a constructor

class f {};       // Class
f();              // Error: Cannot call a class as a function
new f();          // Constructor instantiation

That is, ES6 classes are just objects with a [[Construct]] internal method and a prototype property. You can treat them exactly as ES5 constructors.

So the usage would be

class somecomponent { /* create some new class */
  somemethod() {}
}

/* extend the base libraries prototype chain with the new class*/
library.extend('library', somecomponent)

where library.extend is the current one.

Upvotes: 3

Bergi
Bergi

Reputation: 664366

In es6 classes we also have prototypes but they are masked by the class syntax and you are supposed to add methods to the class using the extends keyword.

I'm not sure what you mean by "masked". Yes, it's different syntax, but the outcome is quite the same - class creates a constructor function with a .prototype property. So while the extends syntax is of course nicer to write, you cannot use it programmatically. Notice that extends is used for subclassing, not for extension of existing classes, so it doesn't fit your need anyway.

I'm not sure how I can programmatically add methods to ES6 classes using a method similar to what I have above.

Just continue to use exactly the method you already have. It's totally fine to do mixins in that style.

Upvotes: 2

Related Questions