オブジェクトに対してメソッド名を使って値として登録した関数をアロー関数で表現したい。

Question

表記の通り、オブジェクトの中にメソッド名として登録した関数をアロー関数として
表現したいと思ったのですが、エラーが出て実行することができません。

まず、アロー関数を使用せず普通の関数を使う方法が下記

let user = {
    name:"ほげ太郎",
    age:22,
    address:"ほげ市",
    hobby:["寝ること","食べること"],
    getAge:function(){
        return this.age;
    } 
}
console.log(user.getAge());

これは問題ありません。
次がアロー関数を使用して書き換えたものです。

let user = {
    name:"ほげ太郎",
    age:22,
    address:"ほげ市",
    hobby:["寝ること","食べること"],
    getAge:()=>this.age;
}
console.log(user.getAge());

this.ageのところにエラーが出ておりまして、
thisのところのエラーは下記。

The containing arrow function captures the global value of 'this'.

また、ageの部分のエラーは下記。

Element implicitly has an 'any' type because type 'typeof globalThis' has no index signature.

ソースコードの実行環境はTypeScript Playgroundを使用しております。
どなたかご教示いただけませんでしょうか？

Comments

[gentaro]

書き込んだ後に質問文を確認したりしないのかな？
マークダウンの使い方がメチャクチャだけど。

[takochan1192]

ご指摘いただきまして誠にありがとうございました。
おっしゃる通り、めちゃくちゃでございました。大変失礼いたしました。

Answer 1

アロー関数を使用せず普通の関数を使う方法が下記

オブジェクトリテラルに関数をもたせる場合、略記できるようになっています。

let user = {
  name:"ほげ太郎",
  age:22,
  address:"ほげ市",
  hobby:["寝ること","食べること"],
  getAge(){ // getAge: function getAge() と同じ
    return this.age;
  }
}
console.log(user.getAge());

アロー関数を使う場合、スコープはアロー関数を宣言したスコープになります。

var age = 25;
const getAge = () => this.age;

let user = {
  name:"ほげ太郎",
  age:22,
  address:"ほげ市",
  hobby:["寝ること","食べること"],
  getAge
} 
console.log( user.getAge() ); // 25

オブジェクトのメソッド（メンバ関数）にアロー関数を定義すると、アロー関数内の this はインスタンスを参照しなくなります。

追記）
アロー関数をメソッド内で宣言した例

let user = {
  name:"ほげ太郎",
  age:22,
  address:"ほげ市",
  hobby:["寝ること","食べること"],
  getAge,
  hoge(){
    // アロー関数を宣言したスコープは user.hoge() メソッド内のため、this は user を参照する
    let fn = () => this;
    return fn();
  }
}
console.log( user.hoge() );

Comments

[takochan1192]

アロー関数内のthisは、グローバルな変数を参照するのですね。
thisの扱いについて理解することができました。
ご丁寧にご回答いただきまして本当にありがとうございました。

[AkitoshiManabe]

> アロー関数内のthisは、グローバルな変数を参照するのですね。
違います。回答では、「アロー関数を宣言したスコープがグローバル（window）スコープだったので、グローバルな変数を参照できた」という内容です。追記しますね。

[takochan1192]

何度もご回答いただき本当にありがとうございます。
すみません、勘違いしておりました。
追記のコードもありがとうございます。ご丁寧にご教示いただきまして本当にありがとうございました。

Answer 2

あまり実用性はないのですがuserで宣言しているのですからuserを参照するという手もあります

let user = {
name:"ほげ太郎",
age:22,
address:"ほげ市",
hobby:["寝ること","食べること"],
getAge:()=>user.age
};
console.log(user.getAge());

Comments

[takochan1192]

アロー関数だとthisは、関数の実行時にageを参照できないので、無理にthisを使用する必要はないのですね。とりあえず、this使っておけば何とかなると思っていた私ですが、非常に勉強になりました。
サンプルコードにてご教示いただきまして本当にありがとうございました。

Answer 3

functionにおいてのthisは、実行時においてのthisを指せますが、
アロー関数は、定義時のthisが実行時のthisに入るからです。

つまり、getAgeメソッド実行時は、アロー関数では、userは指せず、定義時のthisである、グローバルオブジェクトが指されます。

ではどうするかというと、
まぁ、どうしてもアローなどでやりたいならば、
staticなクラスで定義するのがよいのでは？
と思います。

class user {
  static public name = "ほげ太郎";
  static public age = 22;
  static public address = "ほげ市";
  static public hobby: strung[] = ["寝ること", "食べること"];

  static public getAge(){
    return this.age;
  }
};
console.log(user.getAge());

Comments

[takochan1192]

function におけるthisの参照先とアロー関数におけるthisの参照場所が違ったのですね。
同じ関数だから、一緒だろうと思って私が浅はかでした。
非常に勉強になりました。ご丁寧にご回答くださりありがとうございました。

[miyabi_pudding]

アロー関数は、
JavaScriptの長所であり、同時にコード保全が著しく困難になる、thisの扱いを、
他の言語に寄せた仕様や、クラスベースを実現できるように生まれたものです。
それまで、bindやcallなど（thisを実行時の引数により束縛するメソッド）をわざわざ使わねば、クラスベースな書き方が難しかったのです。
（prototypeでコントロールする方法はあるが、メソッドの中でfunctionを定義すると、thisの束縛がされない）
クラス宣言も、アロー関数の仕様により、実現できたものと思われます。
また、TypeScriptであれば、
今回のような仕様はinterfaceやtypeで実装したほうがいいと思うので、調べられるとよいかと。

[takochan1192]

なんどもご教示いただきまして本当にありがとうございます。
そういった背景があったのは、全く知りませんでした。
interface や　typeの使用も含めてもう一度考え直してみます。
ご丁寧に本当にありがとうございます。