Skip to main content
2 / 4
本文に 3 文字追加; タイトルを編集
cubick
  • 2.1万
  • 5
  • 27
  • 64

Javascript のコンストラクタ 内で処理の実行順について

下記の箇所がいまいち分からなくてみているのですが、コンストラクタ 内の実行順が上からではない気がします。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無しでも実行できました。

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

Python での記述例:

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

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

wataru
  • 1,133
  • 3
  • 38
  • 80