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

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

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

環境

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

エラー内容

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

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

chrome103.0.5060.66エラー内容

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

firefox102の場合

Uncaught TypeError: setting getter-only property "name"

原因

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

対処法

ちゃんと別名にしておけば、エラーは表示されません。
「name」を「_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を表示