javascript エラー「Uncaught TypeError: Cannot set property name of #object which has only a getter」が発生する原因と対処法

2020.10.12
javascript
javascript

javascriptで、エラー「Uncaught TypeError: Cannot set property name of # which has only a getter」が発生する原因と対処法を記述してます。

1. 環境
2. エラー内容
3. 原因
4. 対処法

環境

OS windows10 pro 64bit
Apache 2.4.43
ブラウザ chrome 84.0.4147.105

windows10にApacheのインストール

エラー内容

以下のコードで発生します。

class hoge {
  constructor(name) {
    this.name = name;
  }
 
  get name() {
    return this.name;
  }
 
  foo() {
    console.log(`${this.name}を表示`);
  }
}
 
const bar = new hoge('mebee');
bar.foo();

class hoge {

constructor(name) {

this.name = name;

}

get name() {

return this.name;

}

foo() {

console.log(`${this.name}を表示`);

}

const bar = new hoge('mebee');

bar.foo();

chromeエラー内容

Uncaught TypeError: Cannot set property name of #<hoge> which has only a getter

1	Uncaught TypeError: Cannot set property name of #<hoge> which has only a getter

firefoxの場合

Uncaught TypeError: setting getter-only property "name"

1	Uncaught TypeError: setting getter-only property "name"

原因

別名の変数に値を保存する必要があるため

対処法

ちゃんと別名にしておけば、エラーは表示されません。

class hoge {
  constructor(name) {
    this._name = name;
  }
 
  get name() {
    return this._name;
  }
 
  foo() {
    console.log(`${this._name}を表示`);
  }
}
 
const bar = new hoge('mebee');
bar.foo(); // mebeeを表示