I try to extend a class with another, who has its constructor overrode, but when i instance this class, it doesn't have its own methods, but has its own properties.
Here's an example which doesn't work properly:
class A {
constructor () {
return {
pi: 3.14
}
}
}
class B extends A {
constructor () {
super();
this.c = 10;
}
d () {}
}
let b = new B();
console.log(b);
Here, b is :
Object {
c:10,
pi:3.14
}
So why the 'd' method is missing ?
EDIT:
Here is a concrete case:
I need to extend a class with HTMLElement, which i can instance and use like html element without registering with document.registerElement.
My code is:
class Element{
constructor(){
return document.createElement('div');
}
}
class Editor extends Element{
constructor(){
super();
}
}
and i want to use my class like this:
let editor = new Editor();
document.querySelector('body').appendChild(editor);
ECMAScript6 class methods are methods of an object's prototype object. You will find the method not in the object itself, but in obj.__proto__.
https://reinteractive.com/posts/235-es6-classes-and-javascript-prototypes
Here you can see and maybe understand what is going on internally with prototyped objects. And yes, the ES6 syntax is just a syntax change, not a new technology.
Related
In python there's something like __call__ for this. Consider the following example:
class MyClass {
__call__() { return 'called!' }
}
const myType = new MyClass();
myType(); // called!
The question is what should I replace __call__ with?
I was doing some research, and most of the answers recommend __proto__, but it doesn't seem to work.
It is not possible out-of-the-box, but you can extend Function, and use the Function constructor to forward a call to __call__. If you have multiple classes that need this feature, extend Function only once into -- let's say -- a Callable class, and then inherit your other classes from that:
class Callable extends Function {
constructor() {
super("...args", "return this.__call__(...args)");
return this.bind(this);
}
}
class Class extends Callable {
__call__() { return 'called!' }
}
let inst = new Class();
console.log(inst());
Background
In JavaScript an object is callable when, and only if, it has the [[Call]] internal slot. But there is (currently) no way to give any given object this slot via JavaScript code. One must start with a function object and extend that.
Adding a constructor, inheritance
The above solution allows the constructor to define properties in the usual way: the constructed object is an instance of the class:
class Callable extends Function {
constructor() {
super("...args", "return this.__call__(...args)");
return this.bind(this);
}
}
class Class extends Callable {
constructor(data) {
super();
this.x = data;
}
__call__() { return 'called!' }
}
let inst = new Class(42);
console.log(inst instanceof Class); // true
console.log(inst.x); // 42
console.log(inst());
You can use constructor.
class Example {
constructor() {
// gets called on class initialization
}
}
Inside the constructor you can also call other methods if you want.
However this won't create an invoke function like using PHP's __invoke if that's what you meant. If that's what you're looking for then I don't know.
I have a class A that is a subset of class B. It shares many of the properties and methods of class B.
Class A lacks implementation though. So I want all all functionality in class B to to go into class A.
ClassA.prototype = ClassB.prototype;
or
ClassA.prototype += ClassB.prototype
But it seems I have to:
ClassA.prototype.methodA = ClassB.prototype.methodA
ClassA.prototype.methodB = ClassB.prototype.methodB
ClassA.prototype.methodC = ClassB.prototype.methodC
ClassA.prototype.methodD = ClassB.prototype.methodD
for every single method and property. Is there no way I can put implementations in B into A at once?
It's true you can't overwrite the prototype property of functions created via class syntax, because it's both read-only and non-configurable. You can do it if you use function syntax instead as Fullstack Guy points out.
But you probably want to make ClassA extend ClassB:
class ClassA extends ClassB {
// ...
}
Live Example:
class ClassB {
methodA() {
console.log("methodA");
}
methodB() {
console.log("methodB");
}
methodC() {
console.log("methodC");
}
methodD() {
console.log("methodD");
}
}
class ClassA extends ClassB {
// ...
}
new ClassA().methodA();
If not, though, you can copy all the methods using a loop:
for (const name of Object.getOwnPropertyNames(ClassB.prototype)) {
const method = ClassB.prototype[name];
if (typeof method === "function") {
ClassA.prototype[name] = ClassB.prototype[name];
}
}
Live Example:
class ClassB {
methodA() {
console.log("methodA");
}
methodB() {
console.log("methodB");
}
methodC() {
console.log("methodC");
}
methodD() {
console.log("methodD");
}
}
class ClassA {
// ...
}
for (const name of Object.getOwnPropertyNames(ClassB.prototype)) {
const method = ClassB.prototype[name];
if (typeof method === "function") {
ClassA.prototype[name] = ClassB.prototype[name];
}
}
new ClassA().methodA();
But note that if ClassB is a subclass, super within the methods will continue to access ClassB's superclass methods, it won't either be invalid or access ClassA's superclass methods.
You can use Object.create to make a prototype of ClassA inherit from the prototyoe of ClassB:
function ClassB(){
}
ClassB.prototype.methodA = function(){
console.log("methodA");
}
function ClassA(){
//no implementation
}
//Make the prototype of Class A inherit from the ptottype of Class B
ClassA.prototype = Object.create(ClassB.prototype);
const classA = new ClassA();
classA.methodA();
The above is for function constructors, if you want to use ES6 classes, then you simply need to extend the ClassB:
class ClassB{
methodA(){ console.log("methodA"); }
}
class ClassA extends ClassB{
}
const classA = new ClassA();
classA.methodA();
// When you extend another class, the instance methods of super class are inherited
// in the prototype property of the child class
ClassA.prototype.methodA();
As #T.J. Crowder rightfully said the prototype property of the class Object is not configurable and as result you cannot assign another object to it. Also you cannot change the configurable to true once it has been set to false. The only option is to copy the member functions in a loop.
You can verify this through the Object.getOwnPropertyDescriptor() method:
class ClassA{
}
//configurable and writable is false
console.log(Object.getOwnPropertyDescriptor(ClassA, "prototype"));
I have an Octree class. A key feature of an Octree is that it can create its own children.
class Octree {
...
createChildren(){
...
/* for each of the 8 new children*/
this.children.push(new Octree(/*someargs*/))
...
}
}
Now I want to inherit off of the Octree class, however, I also want the children to become the inherited class. For example class LODWorldTree extends Octree, to additionally contain some renderer data for a game. However, if I call LODWorldTree.createChildren(), then LODWorldTree.children will be an array of Octrees instead of LODWorldTrees.
What is the best way to fix this problem? While writing this it occured to I could store Octree.myClass = /*some inherited class*/, and manually set this variable for all classes that inherit from Octree. Is there a better way to do something like this? Maybe with this.prototype?
You can utilize the fact that each object has a reference to it's own constructor via the prototype:
class A {
constructor() {
this.val = 1;
this.children = [];
this.typeName = `I'm A`;
}
addSelfChild() {
this.children.push(new this.constructor(this.val + 1));
}
}
let a = new A(1);
a.addSelfChild();
a.addSelfChild();
console.dir(a);
class B extends A {
constructor(val) {
super(val);
this.typeName = `I'm B`;
}
}
let b = new B(1);
b.addSelfChild();
b.addSelfChild();
console.dir(b);
Try to use constructor attribute:
this.children.push(new this.constructor(/*someargs*/));
this.constructor is the reference for constructor for current object, so invoking it will produce new instance of the same class
I'm trying to apply this to the constructor of an es6 class to get some kind of "constructor merging" like this:
class D {
constructor(name){
this.name=name
this.methodD=function(){}
}
}
class C extends D {
constructor(name,name2){
super(name)
this.name2=name2
}
}
function Custom(name,name2){
if (this instanceof Custom){
Function.prototype.bind.call(C.prototype.constructor,this,...arguments)
}
}
Custom.prototype.method=function(){}
const cc=new Custom('name','name2')
I'm expecting cc to be constructed using the same constructor as C, so getting cc.name='name';cc.methodD();
Thank you in advance for your help.
You could try to create new instance of C inside of Custom and redefine prototype, using es6 Object.setPrototypeOf().
Please note that in this case Custom will only return object which will be constructed like C and its prototype will not contain methods of C.prototype and D.prototype, only their own methods, like methodD of D class.
Also note, that according to MDN article, this method could affect performance of browser.
class D {
constructor(name){
this.name=name
this.methodD=function(){}
}
}
class C extends D {
constructor(name,name2){
super(name)
this.name2=name2
}
}
function Custom(name,name2){
let cls = new C(...arguments);
Object.setPrototypeOf(cls, Custom.prototype);
return cls;
}
Custom.prototype.method=function(){}
const cc=new Custom('name','name2')
console.log(cc.name)
console.log(cc.name2)
console.log(cc.methodD)
console.log(cc instanceof Custom)
Here is the thing. I have a main class called A.
I want this class to extend class B.
class A extends B {}
But in fact, I want the class B to extend C, D or E on a specific condition:
class B extends B1 {}
or
class B extends B2 {}
or
class B extends B3 {}
So the B class would be a "fake" class, just to check a condition and then extend the right class.
In the final, the result would be the same as:
class A extends B1 {}
or
class A extends B2 {}
or
class A extends B3 {}
I know this is possible in PHP, with abstract classes or wrapper classes for example.
But how to do that in JavaScript ES6?
Thanks
Weird, but possible:
class subClassFirst {
report() {
console.log(`Extended ${this.name} from the first class`);
}
}
class subClassSecond {
report() {
console.log(`Extended ${this.name} from the second class`);
}
}
class subClassThird {
report() {
console.log(`Extended ${this.name} from the third class`);
}
}
function classCreator(condition) {
let sub;
switch (condition) {
case 'first':
sub = subClassFirst;
break;
case 'second':
sub = subClassSecond;
break;
case 'third':
sub = subClassThird;
break;
}
return (class extends sub {
constructor(name) {
super();
this.name = name;
}
});
}
let myClass;
myClass = classCreator('first');
let mcf = new myClass('f');
myClass = classCreator('second');
let mcs = new myClass('s');
myClass = classCreator('third');
let mct = new myClass('t');
mcf.report();
mcs.report();
mct.report();
I found blog post that gave an easy es6 way that doesn't use util.inherits
https://www.mikedoesweb.com/2017/dynamic-super-classes-extends-in-es6/
Here is how I used a passed option to determine which class to extend and then obfuscated that in the export
import ClassB from ' '
import ClassA from ' '
const ext = {
classA: ClassA, // the default
classB: ClassB
// can do as many as you want
}
function ExtendsMyClass (opts= {}) {
if (!new.target) {
throw new Error('Uncaught TypeError: Class constructor Interrupt cannot be invoked without \'new\'')
}
// one could vet opts here too including opts.extend
class MyClass extends ext[opts.extend || 'classA'] {
constructor(opts = {}) {
super(opts)
....
}
} // end MyClass
return new MyClass(opts)
} // end dynamic extend
export default ExtendsMyClass
export { ExtendsMyClass as MyClass }
I'll probably make this into "wrapper" utility function that accepts also the child class as well. That way one can dynamically extend any class as opposed to the one off implementation above. Could even implement dynamic imports if it was set up an async function.
So classes in javascript are really not setup in the same classical inheritance way as other languages, the best way to do what you want is to set the prototype of the object you are dealing with. There are a few ways.
Object.setPrototypeOf(currentObj, newPrototype);
Where newPrototype is the object you are wanting to inherit from. Here are a couple good articles on it if you want to learn the inner workings.
http://yehudakatz.com/2011/08/12/understanding-prototypes-in-javascript/
https://github.com/getify/You-Dont-Know-JS/blob/master/this%20%26%20object%20prototypes/ch5.md
There's a Node JS function for that
const util = require("util");
class MySubClass {}
class MySuperClass {}
util.inherits(MySubClass, MySuperClass);