this
thisは、オブジェクトを参照するキーワードです
状態によって取れる値が変動し、
ロジックとしては直近で囲まれているオブジェクトを参照しています
classやメソッド外、何にも格納されていない状態のthisだと
console.log(this);
class TextAnimation {
constructor(el) {
this.el = document.querySelector(el);
this.chars = this.el.innerHTML.trim().split("");
this.el.innerHTML = this._splitText();
}
windowオブジェクトを参照します
これはブラウザのグローバルオブジェクトと言い、ブラウザでサイトを表示している状態の変数やメソッドを格納するオブジェクトです
class TextAnimation内のthisは、
document.addEventListener('DOMContentLoaded', function () {
const ta = new TextAnimation('.animate-title');
const ta2 = new TextAnimation('.animate-title-2');
ta.animate();
ta2.animate();
});
class TextAnimation {
constructor(el) {
console.log(this);
this.el = document.querySelector(el);
this.chars = this.el.innerHTML.trim().split("");
this.el.innerHTML = this._splitText();
}
newでインスタンス化された、変数のオブジェクト(TextAnimationオブジェクト)を参照します
(インスタンス化された変数は、今回だったらta, ta2)
thisの指定方法
こちらのエラーは、elがundefinedとなっていて、thisがwindowオブジェクトをポイントしていることが原因です
animate() {
window.setTimeout(function() {
console.log(this);
this.el.classList.toggle('inview');
});
}
####bindメソッド
.bind(this)
animate() {
window.setTimeout(function() {
console.log(this);
this.el.classList.toggle('inview');
}.bind(this));
}
bindを使ってanimate( ) { }のthisを束縛してwindow.setTimeout内で参照できます
もしくは
animate() {
const _that = this;
window.setTimeout(function() {
console.log(_that);
_that.el.classList.toggle('inview');
});
}
このようにanimate( ) { }内でthisを定数に代入して、その定数をwindow.setTimeoutで使う方法もあります
結果は同じです
thisとobject
####object
const obj = {
first_name: 'Shun',
last_name: 'Sato',
printFullName: function() {
console.log(this.first_name);
console.log(obj.first_name);
}
}
obj.printFullName();
この場合のthisはobjオブジェクトを指すので
thisをpbjとしても同じ結果が帰ってきます
####class
class MyObj {
constructor() {
this.first_name = 'Shun';
this.last_name = 'Sato';
}
printFullName() {
console.log(this.first_name);
const fn = function() {
console.log(this);
};
window.setTimeout(fn)
}
}
const obj2 = new MyObj();
obj2.printFullName();
classを定義した時点ではオブジェクトは生成されておらず、new演算子によって初期化処理がされたとき生成されます(今回だったらobj2というオブジェクト)
なのでオブジェクトの名前がわからない状態では
console.log(obj2.first_name); のような使い方は、classではできません
プロパティに値を設定するときは、this.キーワードを用います
bindメソッド
bindメソッドは、第1引数に指定したオブジェクトが関数の中のthisに参照されます
const obj = {
first_name: 'Mafia',
last_name: 'Code',
printFullName: function () {
console.log(this);
const _that = this;
window.setTimeout(function () {
console.log(this);
}.bind(_that));
}
}
obj.printFullName();
window内のthisには_thatが入っています
第1引数に指定したオブジェクトが関数の中のthisに参照されるので、
{first_name: 'Taro'}を引数にすればthisがこれに置換されます
const obj = {
first_name: 'Shun',
last_name: 'Sato',
printFullName: function () {
console.log(this);
const _that = this;
window.setTimeout(function () {
console.log(this);
}.bind({first_name: 'Taro'}));
}
}
obj.printFullName();