0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[JS] This

Posted at

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

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


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

thisの指定方法

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

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

Image from Gyazo


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


もしくは

    animate() {

        const _that = this;

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

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

結果は同じです

Image from Gyazo

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


####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が入っています

Image from Gyazo


第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();

Image from Gyazo

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?