ES6 - ES5: implementation of the Babel class extension

Due to old browser support, we all use babeljs to convert ES6 to ES5. When babel compiles a class that extends from another class. Part of the compiled code looks something like this:

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

The top block of code is used to extend the static properties of the parent class. They used Object.setPrototypeOfto change the [[Prototype]]child class. Do not confuse that .prototypeand [[Prototype]]- very individual thing.

What MDN says in its link regarding usage Object.setPrototypeOfbelow:

Changing the [[Prototype]] object in character, as modern JavaScript engines optimize access to properties, is a very slow operation in every browser and JavaScript engine.

: , Babel Object.setPrototypeOf? ( ), Function .

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

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

, Babel! , babel jsPerf. 5 : Object.setPrototypeOf: 19% , 20% 21% .

, , Object.setPrototypeOf . . , .

+4
1

, Babel Object.setPrototypeOf?

, . . , .

, Babel! , Babel jsPerf.

, , . - , - . , [[]] ( ) - .

+4

Source: https://habr.com/ru/post/1692466/


All Articles