I need to extend a singleton class in JavaScript .

The problem that I am facing is that I get the class instance which I am extending from instead of only getting the methods of the class.

I have tried to remove super to not get the instance but then I got an error

Must call super constructor in derived class before accessing 'this' or returning from derived constructor

Code example:

let instanceA = null;
let instanceB = null;

class A {
  constructor(options) {
    if (instanceA === null) {
      this.options = options;
      instanceA = this;
    }
    return instanceA;
  }
}

class B extends A {
  constructor(options) {
    if (instanceB === null) {
      super()
      console.log('real class is ' + this.constructor.name)
      this.options = options
      instanceB = this;
    }
    return instanceB;
  }
}

const a = new A({
  i_am_a: "aaaaaa"
});

const b = new B({
  i_am_b: "bbbbbb"
}) // this change a 

console.log(b.options)

console.log(a.options)

I need to extend a singleton class in JavaScript .

The problem that I am facing is that I get the class instance which I am extending from instead of only getting the methods of the class.

I have tried to remove super to not get the instance but then I got an error

Must call super constructor in derived class before accessing 'this' or returning from derived constructor

Code example:

let instanceA = null;
let instanceB = null;

class A {
  constructor(options) {
    if (instanceA === null) {
      this.options = options;
      instanceA = this;
    }
    return instanceA;
  }
}

class B extends A {
  constructor(options) {
    if (instanceB === null) {
      super()
      console.log('real class is ' + this.constructor.name)
      this.options = options
      instanceB = this;
    }
    return instanceB;
  }
}

const a = new A({
  i_am_a: "aaaaaa"
});

const b = new B({
  i_am_b: "bbbbbb"
}) // this change a 

console.log(b.options)

console.log(a.options)

• javascript
• oop
• es6-class

• 3 Why are you using classes for singletons? A simple object literal and object assign would suffice. – pishpish Commented Sep 5, 2018 at 15:23
• 1 Returning values from constructors is an interesting subject. See eg stackoverflow./questions/3350215/… – Chris Lear Commented Sep 5, 2018 at 15:26
• Could you change instanceA to be const instanceA = new A({ ... etc ...})? Also remove the return statement in class A? Then you might be able to get away with extending A... – bozdoz Commented Sep 5, 2018 at 16:30
• @bozdoz if i do that then the class wont be a singleton anymore. every time you will do new A you will get a new instance – Amit Wagner Commented Sep 5, 2018 at 19:41
• Check out this solution: stackoverflow./questions/26205565/… – bozdoz Commented Sep 5, 2018 at 20:12

5 Answers 5

So, first of all there's a misconception here:

I have tried to remove super to not get the instance but then I got an error

super() calls the parent class' constructor on the created instance of the child class (i.e. what this is referencing). It does not return a parent class instance. See here for more information.

So, calling super() does not violate the singleton property of the parent class at all. It may well be only constructed a single time if implemented correctly.

With that in mind, you should improve your code a little bit.

A sensible change would be to remove the instance management from the constructors. One solution would be to use static constructors which either create the singleton if no instance exists or return the created instance.

Another one is to drop the arguments to the singleton class constructors. It doesn't really make sense to pass arguments to a class which is supposed to be instantiated once (you're never gonna do anything with the constructor arguments again). You could just make the arguments properties of the singleton right away. Here's a SO answer supporting this point for Java singletons.

A plete example with static constructors and without arguments looks like this:

let instanceA = null;
let instanceB = null;

let counters = { A: 0, B: 0 }; // count class instantiations

class A {
  static getInstance() {
    if (instanceA === null) {
      instanceA = new A();
    }
    return instanceA;
  }
  whoami() {
    const name = this.constructor.name;
    return `${name} #${counters[name]}`;
  }
  constructor() {
    counters[this.constructor.name] += 1;
  }
}

class B extends A {
  static getInstance() {
    if (instanceB === null) {
      instanceB = new B();
    }
    return instanceB;
  }
  constructor() {
    super();
  }
}

const a1 = A.getInstance();
const a2 = A.getInstance();
const a3 = A.getInstance();
const b1 = B.getInstance();
const b2 = B.getInstance();
const b3 = B.getInstance();
console.log(a1.whoami());
console.log(a2.whoami());
console.log(a3.whoami());
console.log(b1.whoami());
console.log(b2.whoami());
console.log(b3.whoami());

Note that B inherits whoami from A and that the constructor call counters are never incremented past 1.

Obviously with this approach you can make no guarantee the singleton property holds for each class unless only the static constructors are used to generate instances (since the constructors are still accessible). I think it's a good promise though.

In JavaScript, a singleton is just an object literal.

const a = {
    options: {
        i_am_a: "aaaaaa"
    }
};
const b = {
    options: {
        i_am_b: "bbbbbb"
    }
};

If you really need a constructor function, you can just write a function that returns an object.

function makeSingleton(options) {

    return {
        options
    }

}

const a = makeSingleton({i_am_a: "aaaaaa"});
const b = makeSingleton({i_am_b: "bbbbbb"});

There's no inheritance chain here, just two object literals. If you absolutely need a class, you can just create one, but it's an unnecessary waste of resources and typing.

class Singleton {

    constructor(options) {
        this.options = options;
    }

}

const a = new Singleton({i_am_a: "aaaaaa"});
const b = new Singleton({i_am_b: "bbbbbb"});

In terms of inheriting, if that's something you really need, you can use Object.create() or Object.assign(), depending on your needs. Be aware that both are shallow - they only work a single layer deep so modifying the child's options property would modify the parent's options property as well.

const a = {
    options: {
        i_am_a: "aaaaaa"
    },
    getOptions() {
        return this.options;
    }
};
const b = Object.create(a);
b.options.i_am_b: "bbbbbb";
a.options.i_am_b; // -> "bbbbbb"
b.getOptions(); // -> { i_am_a: "aaaaaa", i_am_b: "bbbbbb" }

Of course, you could use Object.create() or Object.assign() on the options as well.

To be honest, I think you either need a couple of instances of the same class, or a simple object literal without any inheritance.

const instances = {}

class Singleton {
    constructor() {
        const instance = instances[this.constructor];

        if (instance == null) {
            return instances[this.constructor] = this;
        }

        return instance;
    }
}

class Foo extends Singleton {
    constructor() {
        super();

        this.foo = "foo";
    }
}

class Bar extends Singleton {
    constructor() {
        super();

        this.foo = "bar";
    }
}

const foo1 = new Foo();
const foo2 = new Foo();
const bar1 = new Bar();
const bar2 = new Bar();

console.log(foo1 === foo2, bar1 === bar2, foo1 === bar1, foo1.foo = 123, foo2, bar1);

To implement your pattern with extending a singleton you could use a proxy:

const proxify = (what) => new Proxy(what, {
    instance: null,
    construct(B, args) {
        return this.instance ??= new what(...args);
    }
});

const A = proxify(class {
    #a = 1
    c = 0
});

const B = proxify(class extends A {
    #b = 2
    d = 0
});

// make sure we have a singleton for A

const a1 = new A;
const a2 = new A;
a2.c = 1;

console.log(a1.c, a2.c);

// make sure we have a singleton for B

const b1 = new B;
const b2 = new B;
b1.c = 2;
b2.d = 3;

console.log(b1.c, b2.c);
console.log(b1.d, b2.d);

well i don't know if it the best solution but what i did is to check if the constructor name is different then the class name. if so then i let it create a new instance because that mean i try to extend the class

here is a working example of my test

let instanceA = null;
let instanceB = null;

class A {
  constructor(options) {
    this.options = options;
    
    if (instanceA === null) {
     
        instanceA = this;
    }
    if(this.constructor.name !== "A"){
        return this;
    }
    
    return instanceA;
  }
  
  method1(){
    console.log(this.constructor.name)
  }
}

class B extends A {
  constructor(options) {
    if (instanceB === null) {
      super(options)
      instanceB = this;
    }
    return instanceB;
  }
}

const a = new A({
  i_am_a: "aaaaaa"
});a

const b = new B({
  i_am_b: "bbbbbb"
}) 
const c = new A({
  i_am_c: "ccccc"
});
const d = new B({
  i_am_d: "ddddd"
}) 
console.log(a.options)
console.log(b.options)
console.log(c.options)
console.log(d.options)
a.method1();
b.method1();
c.method1();
d.method1();