【js】thisについて

Javascriptのthisについてまとめています。

サマリ

• class内でthisを使うとインスタンス化されたオブジェクトを参照する
• classの外で使うとグローバルオブジェクトを参照する
• classの中でwindow.setTimeoutを使い、その中でthisを指定するとwindowオブジェクトを参照することになる
• 基本的には直近で囲われているオブジェクトを参照する
• setTimeoutの例ではwindowオブジェクトから呼ばれているので参照先がwindowオブジェクトになる
• thisで参照したい値がずれる場合は、bindを使ってオブジェクトを渡すことでthisの参照先を指定することができる

document.addEventListener('DOMContentLoaded', function () {
    const btn = document.querySelector('#btn');
    const ta = new TextAnimation('.animate-title');
    const ta2 = new TextAnimation('.animate-title-2');
    ta.animate();
    ta2.animate();

    // bindを使う記述方法
    btn.addEventListener('click', ta.animate.bind(ta));
    
    // bindを使わずに無名関数で定義する方法
    // btn.addEventListener('click', function() {
    //     ta.animate();
    // });
});


class TextAnimation {
    constructor(el) {
        this.el = document.querySelector(el);
        this.chars = this.el.innerHTML.trim().split("");
        this.el.innerHTML = this._splitText();
    }
    _splitText() {
        return this.chars.reduce((acc, curr) => {
            curr = curr.replace(/\s+/, ' ');
            return `${acc}<span class="char">${curr}</span>`;
        }, "");
    }
    animate() {
        this.el.classList.toggle('inview');
    }
}