ES6 to ES5: Babel's implementation of class extension

Question

Due to old browser support, we all use babeljs to transpile ES6 into ES5. When babel compiles a class which is extended from another class. A part of compiled code is something similar to this:

...
if (superClass)
    Object.setPrototypeOf
      ? Object.setPrototypeOf(subClass, superClass)
      : (subClass.__proto__ = superClass);
...

The top code block is used for extending static properties from the parent class. They have used Object.setPrototypeOf to change [[Prototype]] of child class. It is not to confuse that .prototype and [[Prototype]] is a completely separate thing.

What MDN says in its reference regarding the use of Object.setPrototypeOf is below:

Changing the [[Prototype]] of an object is, by the nature of how modern JavaScript engines optimize property accesses, a very slow operation, in every browser and JavaScript engine.

My question emerge here: if we can achieve the same result with another way why Babel uses Object.setPrototypeOf ? I have tried to copy all the static methods from the parent class (which I have previously assigned to that) by looping through the constructor Function object.

...
var parentStaticProps = parentClass.prototype.constructor;

for (var prop in parentStaticProps) {
  childClass.prototype.constructor[prop] = parentStaticProps[prop];
}
...

And it is also faster than babel's implementation! I have created something similar what babel does to extend a class and tested it in jsPerf . My top 5 test run result was very disappointing with Object.setPrototypeOf : 19% slower, 20 % slower and three times 21% slower.

I know there must have some reasons why Object.setPrototypeOf might need to use. I want to know. If it is about non-enumerable properties then we can definitely use some other methods.

Answer 1

If we can achieve the same result with another way why Babel uses Object.setPrototypeOf ?

Simply because there is no other way that achieves the same result. Just copying over the current values of all properties is not the same as dynamically inheriting from another object. Babel aims to be correct, not fast.

And it is also faster than babel's implementation! I have created something similar what babel does to extend a class and tested it in jsPerf.

Well, creating and extending classes is slow, and it does not matter. Using those classes - for example accessing the static properties - is the important aspect here. There's usually no problem is you mutate the [[prototype]] of a fresh (yet unused) object - the warning is more concerned about doing the mutation in the middle of the objects lifetime.