アロー関数のthisについて[es6]

Question

javascriptのアロー関数におけるthisの挙動についてお尋ねしたいことがあります。
例えば下記のようなコードがあったとします。

let person3 = {
  firstname: "次郎",
  age: 21,
  getOlder: ()=> {
    this.age++;
  }
}
person3.getOlder();
console.log(person3);

私の予想だとageは22でしたが、確認した結果21でした。
アロー関数のthisは親スコープのthisを引き継ぐと教材で習いましたので

{
 // 親ブロックスコープ
  {
　　 // 子ブロックスコープ
  }
}

だとすれば、私の認識だと先程のコードは

let person3 = {
  // 親ブロックスコープ
  firstname: "次郎",
  age: 21,
  getOlder: ()=> {
    // 子ブロックスコープ
    this.age++;
  }
}
person3.getOlder();
console.log(person3);

であり、親ブロックに存在しているageを引き継ぎ、getOlderを実行すると思っていたのですが間違っているのでしょうか？わかりにくい質問で申し訳ありませんが、回答よろしくお願い致します。

Answer 1

結論から言うと、もしperson3がグローバルスコープ(すべてのfunctionの外)であれば、getOlder関数のthisはwindowになります。

簡単なdebugで確かめてみるとわかりやすいです。

let sample = {
  normal: function () {
    console.log(this, this === window)
  },
  arrow: () => {
    console.log(this, this === window)
  }
}

sample.normal() // -> sample, false
sample.arrow() // -> window, true

kirokiraさんの例では、window.age++を行なっていることになりますので、person3.ageは変更されていないことになります。

person3.ageを更新したい場合は、上のサンプルコードにように、functionとして定義することで達成できます。

let person3 = {
  firstname: "次郎",
  age: 21,
  getOlder: function () {
    this.age++;
  }
}
person3.getOlder();
console.log(person3);

Answer 2

アロー関数のthisは親スコープのthisを引き継ぐと教材で習いました

正しいです。
ただし、その「スコープ」はレキシカルスコープです。
オブジェクト初期化子はレキシカルスコープを生成しないので、変数person3の外側のthisを参照します。

なお、コメントに「親ブロックスコープ」とありますが、これはブロックではないので、間違いです。

Answer 3

汎用性を無視すれば自分自身の名前を参照すればできます

const person3 = {
  firstname: "次郎",
  age: 21,
  getOlder: ()=>person3.age++,
}
person3.getOlder();
console.log(person3);