Return A Value Other Than The Class In Es6

Recently I've been testing out classes with ES6, I've noticed that when creating a class you cannot specify the value given by the constructor. Previously in ES5 this was possible.

Solution 1:

According to the Class article from the TC39 web site, the ES6 class syntax has an implicit constructor function that is called if no such function is provided in the class definition.

This can be overridden by providing your own constructor and returning whatever object you want, e.g.:

classBob {
  constructor(name) {
    return {hi: name};  // returns an object other than *this*.
  }
}

In action:

var bob = newBob('bob');
console.log(bob.hi); // 'bob'

To extend the class, you can do:

classBillextendsBob {
}

However extends also has an implicit constructor, so it will return a new instance of Bill that inherits from Bob.prototype. Since hi was defined in the constructor and not inherited, you get:

var bill = newBill('bill');
console.log(bill.hi);  // undefined

To initialise Bill the same as Bob, provide a constructor that calls super. This call also changes the this object of Bill to the value returned by super, e.g.

classBillextendsBob {
  constructor(name) {
    super(name);
  }
}

Now:

var bill = newBill('bill');
console.log(bill.hi); // bill

Also worth noting that the body of a classDeclaration is always strict mode code.

As a runnable snippet:

classBob {
  constructor(name) {
    return {hi: name};  // returns an object other than *this*.
  }
}

var bob = newBob('bob');
console.log(bob.hi); // 'bob'classBillextendsBob {
  constructor(name) {
    super(name);
  }
}

var bill = newBill('bill');
console.log(bill.hi); // bill

Solution 2:

The ES6 actually does not return {} but the class (constructor) object in that case. The class constructor can return objects, but not primitive values. So instead of [String] "hello" it returns [Object] Bob. Any value can be returned this way:

classBob {
  constructor() {
   return()=>'hello';
  }
}
const bob = newBob()();

The returned [Function], as it is an object, can be returned and immediately fired to return some primitive value, eg. [String] "hello".

Solution 3:

Compare these fiddles: es5 and es6

What you say was possible in es5 is still possible in es6, there is a small thing that if you use new keyword, then a new object for that class is created and if you dont ue new then the function is executed.

1. So when you say, var x= Bob(); in both es5 and es6, you execute the constructor function, not create a new object, thus it returns something.

2. And when you say,var x= new Bob();, you get a new object, initialised by the constructor function.

This is applicable to both es5 and es6, as es6 classes does nothing new , but are introduced just for the sake of syntax.

Edit: In case of extending classes: You can not just extend a class in es6 and expect that the super constructor is called, you need to call it explicitly inside the child class constructor.. see the code:

classBob {
  constructor() {
    return {hi: 'bob'}
  }
}

classBillextendsBob {
  constructor() {
   returnsuper();// here you should retun the called super constructer
  }
}

var x=  Bob();
console.log(Bob);

 x= newBill();
console.log(x.hi);

This is why, this doesnt work, but this works..