【JavaScript ES6学習】オブジェクトのアロー関数とthisについて

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

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

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

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

今回学習した項目

codecademy
JavaScript
Lesson 8 Arrow Functions and this

アロー関数(Arrow function)からはthisキーワードを呼び出せない

以下の例では、オブジェクト内のアロー関数(Arrow function)からプロパティdietTypeを呼び出そうとしていますが、期待した動作をしていません。

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

cat.diet(); // Prints undefined

エラーは出てないですが、実行すると“undefined”が返ってきます。

なんでこうなるかというと、アロー関数内のthisはグローバルオブジェクトであり、グローバルスコープでどうのこうの、らしいです。
要するに、私にはよく分かりません。

上の例でdietTypeを呼び出したければ、アロー関数を使わずに通常のメソッドにしとけば大丈夫です。

メソッドだけ抜き出すと、次のようになります。
こちらは省略型(shorthand)な書き方。

diet() {
  console.log(this.dietType);
}

こっちは正式な？省略しない(longhand)書き方。

diet: function() {
  console.log(this.dietType);
}

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

 - プログラミング - JavaScript