【JavaScript ES6学習】オブジェクトのthisキーワードについて

2019/05/29 2019/06/17

【JavaScript ES6学習】基礎文法編目次

codecademyで学習したことをまとめています。
プログラミング初心者の私が学習しながら書いた、完全に自分用のメモみたいなものなので、他人が見ると意味不明だったり、間違いがある可能性があるのでご注意ください。

codecademyは無料でかなりのことが学習できる素晴らしいサイトですが、英語です。
なのでこの記事に書かれている日本語の用語も間違っているかもしれません。

codecademyのコードをそのまま載せるのはさすがにまずいと思い、微妙に改変しています。

今回学習した項目

codecademy
JavaScript
Lesson8 The this Keyword

今回の学習内容: Thisキーワードの使い方

オブジェクトの中のメソッドプロパティを呼び出す時、thisキーワードが必要になります。
今回はそのthisキーワードの使い方についてです。

メソッドから“this”を使わずにプロパティを読もうとしたらエラーになる

下記はオブジェクトのメソッド“diet()”からプロパティ“dietType”を呼び出そうとしていますが、エラーになります。
catオブジェクトのメソッドdiet()からcatオブジェクトのプロパティdietTypeには、同じオブジェクトでもアクセスできません。

const cat = {
  dietType: 'carnivore',
  makeSound() {
    console.log('Meow');
  },
  diet() {
    console.log(dietType);
  }
};
cat.diet(); 
// Output will be "ReferenceError: dietType is not defined"

“this”をつけるとメソッドからプロパティが読める

このように“this”をつければOKです。

const cat = {
  dietType: 'carnivore',
  makeSound() {
    console.log('Meow');
  },
  diet() {
    console.log(this.dietType);
  }
};

cat.diet(); 
// Output: carnivore

thisをつけることで、メソッドから同じオブジェクトのプロパティを呼び出すことが出来ます。