下記の箇所がいまいち分からなくてみているのですが、コンストラクタ 内の実行順が上からではない気がします。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)
# 結果:太郎
すいません。よろしくお願いします。