10
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

phina.jsAdvent Calendar 2018

Day 4

ES6のclass構文でphina.jsのクラスを継承する

Last updated at Posted at 2018-12-04

普通にextendsで継承すると、大体は問題なく動きます。

ですが、それだけだとオーバーライドができないので、以下のようにprototypeを手動でセットします。

class SubRectangle extends phina.display.RectangleShape {
  constructor (option) {
    super(option)
    Object.setPrototypeOf(this, SubRectangle.prototype) // ←これ
  }
  render (canvas) {
    console.log('ex: renderをオーバーライドして何かする')
    super.render(canvas)
  }
}

以上です。。

軽く調べたところ、setPrototypeOfは最適化がされないためパフォーマンス上よろしくない場合があるようです。
(ただ、babelでclassの継承をトランスパイルしたらsetPrototypeOfが使われた気がするので結局変わらないかもしれません)

もしも他にスマートな方法をご存じの方がおりましたら教えていただきたいです。


2018/12/08 追記:
Negiwine_jpさんの記事『phina.jsとclass構文について考察する』もぜひご参照ください!

10
1
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?