ES5プロトタイプでクラス式をどのようにリファクタリングするのですか？

Question

ES5のプロトタイプ構文でクラス式をどのようにリファクタリングするのですか？

クラス式を使用してネイティブクラスを拡張しようとしています。このコードはうまくいきますが、ネイティブクラスを拡張するのはnot supported by babelです。将来は私のコードをES5に移植したいと思います。

これは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' }); 

そこで質問は簡単です：

は、どのように私はES5互換性のある何かを持つES2015クラス式リファクタリングん（あるいは、実際に互換性のちょうどバベルのが、この質問は本当にバベルとは関係ありません）。

ES6クラスがどのようにプロトタイプで動作するかを簡単に説明したり、参考にしたりできますか？

Answer 1

ES5のクラス拡張はちょっと難しいです。これを行うには、プロトタイプチェーンを使用する必要があります。そのためには、プロトタイプが何をしているのかを知る必要があります。

function BaseClass(){ 
} 

あなたは、そのプロトタイプにプロパティを追加することができ

：

BaseClass.prototype.doSomething(); 

そのクラスのインスタンスを作成し、作成したオブジェクトにその関数を呼び出すことができます。

次の関数を考える

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

というプロパティがあるため生成関数のprototype（ここではBaseClass）によって決定されるです。

オブジェクトのプロパティにアクセスすると、そのオブジェクトは直接存在しません。インタープリターはプロトタイプチェーンを調べます（obj.__proto__にこのプロパティがあるかどうかを確認します）。

だから、BaseClassを拡張したいのですが？プロトタイプチェーン

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 

のprototypeにプロトタイプを追加

• コール基底クラス

• のコンストラクタ：あなたは拡張のための2つのことを行う必要がありますジェネレータ関数は、生成されたオブジェクトの__proto__プロパティになります。ここで

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

  それは新しい構文は、私が上記で説明し何を達成するための唯一のより快適な方法であると、述べています。内部的には、それは多かれ少なかれ同じものを行うべきです。

  コメントに指摘されているように、__proto__は手動で割り当てる必要はありませんが、代わりにObject.create(prototypeObject)を使用してください。