如何使用ES5原型重构类表达式？

Question

How do I refactor a class expression with ES5 prototype syntax?

I'm trying to extend a native class using a class expression. This code works fine but extending native classes is not supported by babel and I'd like to transpile my code to ES5 in the future.

This is code taken off of google's custom elements primer .

customElements.define('bigger-img', class extends Image {
    // Give img default size if users don't specify.
    constructor(width = 50, height = 50) {
        super(width * 10, height * 10);
    }
}, { extends: 'img' });

So the question is simple:

how do I refactor an ES2015 class expression with something ES5 compatible (or just babel compatible really but this question isn't really related to babel).

Can you briefly explain or point me to reference that explains how ES6 classes work with the prototypes?

Answer 1

Class extension in ES5 is a little bit tricky. You need to use the prototype chain to accomplish this. To do that, you need to know what a prototype does.

Given the following function:

function BaseClass(){
}

You can add properties to its prototype:

BaseClass.prototype.doSomething();

When creating an instance of that class, you can call that function on the object created:

var baseObj = new BaseClass();
baseObj.doSomething();

This works, because there is a property called __proto__ which is determined by the prototype of the generation function (here: BaseClass ).

If you access a property on an object, that does not exists directly, the interpreter now starts looking through the prototype chain (checking if obj.__proto__ has this property).

So what if you want to extend BaseClass? You need to do two things for an extension:

• Call the constructor of the base class

• Add the prototype to the prototype chain

function DerivedClass(){
    BaseClass.call(this);
}
DerivedClass.prototype.__proto__ = BaseClass.prototype; // That's what happens
DerivedClass.prototype = Object.create( BaseClass.prototype ); // That's how you should do it

The prototype of the generator function becomes the __proto__ property of its generated objects.

https://reinteractive.com/posts/235-es6-classes-and-javascript-prototypes

Here it says, that the new syntax is only a more comfortable way to accomplish what I explained above. Internally it should do more or less exactly the same.

As pointed out in the comments, you should never assign __proto__ manually, but use Object.create( prototypeObject ) instead.