Extending es6 classes programmatically

Question

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.

Without showing how you use this code, it's very hard to understand what you're asking. However... Generally ES2015 classes can be considered to be "normal" (ES5) functions. — Amit
– Amit, Commented Nov 17, 2015 at 10:13
you should be able to extend prototype. class is more-less just syntactic sugar. — webduvet
– webduvet, Commented Nov 17, 2015 at 10:14
@ Amit I've added a usage example, although I think the code speaks for itself really....it's just extending a prototype chain. — Mike Rifgin
– Mike Rifgin, Commented Nov 17, 2015 at 10:19
@webduvet - so I should just basically continue with directly extending the prototype then... — Mike Rifgin
– Mike Rifgin, Commented Nov 17, 2015 at 10:20

Oriol · Accepted Answer · 2015-11-17 15:01:55Z

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.

Bergi · Accepted Answer · 2015-11-17 12:50:08Z

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.

Collectives™ on Stack Overflow

Extending es6 classes programmatically

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related