下記の箇所がいまいち分からなくてみているのですが、コンストラクタ 内の実行順が上からではない気がします。javascriptは非同期処理のためでしょうか?

    class TextAnimation {
        constructor(el) {
            // elには.animate-titleが代入されている。
            this.DOM = {};
            // 順番おかしい 分割された値が出てくる。
            this.test = document.querySelector(el);
            console.log(this.test);
            if(el instanceof HTMLElement) {
                this.DOM.el = el;
            } else {
                this.DOM.el = document.querySelector(el);
            }
            this.chars = this.DOM.el.innerHTML.trim().split("");
            this.DOM.el.innerHTML = this._splitText();
        }

自分の想定では分割前の<div class="animate-title"...が出力されると思っていました。

実際には分割された物がconsole.logで出力されました。



もう一つ気になった事が、コンストラクタ 内で下記のように変数を使用できると思っていたのですが、thisを付けないとtestは未定義と出ます。

    test = document.querySelector(el);
    console.log(test);


Pythonでは似たような書き方でselfなしでも実行できました。

この違いは非同期処理・同期処理の違いによるものなのでしょうか?

    class Person:
        def __init__(self, name, age):
            name2 = name
            print(name2)
            self.age = age
            
    taro = Person('太郎', 18)
    #結果:太郎

すいません。よろしくお願いします。