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'); } }