Translate

BTemplates.com

Powered by Blogger.

2023年3月18日土曜日

2023-03-18 到達点メモ


ひとまず、最近の関数はデフォルトで後から判定する方法(今回は配列のfindLastIndexの話)が用意されているということを忘れないようにしたい。

自力で実装すると複雑になってわかりにくくなる。というか、わかりにくかったのでfindLastIndexに変更した。

あと、解決策が載っているサイトがキャッシュ表示だったのもあったので、ちょっと雑でもいいから記録に残さねばならぬと思ったのが一つあった。

クラスのPieceのコンストラクタを呼び出す際に、以下のような画像をロードする関数を使っていたのですが、その中で使っているクラス内の関数がないというエラーがでてきた。

コード(省略しているが、drawPieceImageは宣言してある)

class Piece{
    constructor(x,y,length,index,context2D, horizontalElements, verticalElements){
        this.x = this.initPieceRandomPotion(x);
        this.y = this.initPieceRandomPotion(y);
        this.length = length;
        this.pieceNumber = index;
        this.context2D = context2D;
        this.isPieceSet = false;
        let image = new Image();
        image.src = "./images/sample_mini.png"
        image.onload = function () {
            this.image = image;
            this.drawPieceImage(horizontalElements, verticalElements);
        }

エラー内容


これがなぜそうなるのかが本当にわからなくて、onloadにマウスカーソルを移動させて表示されたポップウィンドウを見て漸くもしかしてこれってここのthisってクラスのthisじゃないんじゃねぇ?と気がつくことができた。


あーでもないこーでもないと色々パターンを試したり、調べ直したりすることで漸く下記のサイトを見つけることができた。

参考:JavaScriptのコールバックで クラスthis が参照できないの解決策 | PisukeCode - Web開発まとめ

上記のサイトによると二通りあるとのこと

1:bind関数で明示的にthisを指定する

        image.onload = function() {
            this.image = image;
            this.drawPieceImage(horizontalElements, verticalElements);
        }.bind(this);

2:アロー関数を使う

        image.onload = (e) => {
            this.image = image;
            this.drawPieceImage(horizontalElements, verticalElements);
        }

多分、最近だとアロー関数を使う人が多いから、今回のケースは見つかりにくかったんだろうなぁとはなんとなく思った。

気力があったら、これはまとめ直して独立記事としても上げてもいい気がしている。

すごく余談ではあるのだが、ここのonloadの詳細がMDNの方(近そうなのが、Windows:loadイベントのページ)では見つけられなくて、それっぽそうなのが、Unified XUL Platform MDN BackupのページにあったGlobalEventHandlers.onload - Web APIsが一番それっぽそうだった。
ただ、このサイトの立ち位置がよくわからなかったのでどこまで信用していいのかちょっとなぁという気分だったりする。
基本、困ったらMDNだよりにしていたので、別のサイトを探しておかねばなぁとは感じいている。

上記の問題以外にも描画タイミングのせいでエラーが表示されてその解決もあって疲れたので今日はここまで