[JS] This

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オブジェクトを参照します

[![Image from Gyazo](https://i.gyazo.com/15611febedb4110d506bf6011c91edf5.png)](https://gyazo.com/15611febedb4110d506bf6011c91edf5)


これはブラウザのグローバルオブジェクトと言い、ブラウザでサイトを表示している状態の変数やメソッドを格納するオブジェクトです

---
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）

[![Image from Gyazo](https://i.gyazo.com/b813cff2b95dd2eae10b3eb464e488ee.png)](https://gyazo.com/b813cff2b95dd2eae10b3eb464e488ee)

thisの指定方法
---
こちらのエラーは、elがundefinedとなっていて、thisがwindowオブジェクトをポイントしていることが原因です

```
    animate() {
        window.setTimeout(function() {
            console.log(this);
            this.el.classList.toggle('inview');
        });
    }
```

[![Image from Gyazo](https://i.gyazo.com/1ac5aedc41ea70bce782151ca6892f5f.png)](https://gyazo.com/1ac5aedc41ea70bce782151ca6892f5f)

---
####bindメソッド
.bind(this)

```
    animate() {
        window.setTimeout(function() {
            console.log(this);
            this.el.classList.toggle('inview');
        }.bind(this));
    }
```

bindを使ってanimate( ) {　}のthisを束縛してwindow.setTimeout内で参照できます

[![Image from Gyazo](https://i.gyazo.com/46298590cebf9b84b1e0fe225f1395ae.png)](https://gyazo.com/46298590cebf9b84b1e0fe225f1395ae)

---
もしくは

```
    animate() {

        const _that = this;

        window.setTimeout(function() {
            console.log(_that);
            _that.el.classList.toggle('inview');
        });
    }
```

このようにanimate(  ) {　}内でthisを定数に代入して、その定数をwindow.setTimeoutで使う方法もあります

結果は同じです

[![Image from Gyazo](https://i.gyazo.com/46298590cebf9b84b1e0fe225f1395ae.png)](https://gyazo.com/46298590cebf9b84b1e0fe225f1395ae)

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としても同じ結果が帰ってきます

[![Image from Gyazo](https://i.gyazo.com/2a2c64865c7bd7a0f29d6080ac0a0667.png)](https://gyazo.com/2a2c64865c7bd7a0f29d6080ac0a0667)

---
####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メソッドは、第１引数に指定したオブジェクトが関数の中の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が入っています

[![Image from Gyazo](https://i.gyazo.com/246edb32f273a251073f85f178e10aa2.png)](https://gyazo.com/246edb32f273a251073f85f178e10aa2)

---
第１引数に指定したオブジェクトが関数の中の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();
```

[![Image from Gyazo](https://i.gyazo.com/12316b7860a2343b22c419e4186dfe1e.png)](https://gyazo.com/12316b7860a2343b22c419e4186dfe1e)