/Mijinko-other/スコープの壁(JavaScript)

generated at 10/17/2024, 3:01:04 AM
スコープの壁(JavaScript)
from スコープの壁
こういう場合、子インスタンス( ChildB )から親( Parent )が持っている値( holyVal )をいじることはできない
jsclass Parent {
  constructor() {
    this.holyVal = 334
    this.childA = new ChildB()
  }
}

class ChildB {
  constructor() {
    this.init()
  }
  init() {
    // ここでholyValをいじることはできない
  }
}
こういう時、参照渡しが出来ないのが非常にだるく感じる

コールバック関数で無理やりいじれるようにしてみる
jsclass Parent {
  constructor() {
    this.holyVal = 334
    this.childA = new ChildB(
      () => {
        return this.holyVal
      },
      (newVal) => {
        this.holyVal = newVal
      },
    )
    console.log(this.holyVal) // 668
  }
}

class ChildB {
  constructor(getHoly, setHoly) {
    this.getHoly = getHoly
    this.setHoly = setHoly
    this.init()
  }
  init() {
    const h = this.getHoly()
    console.log(h)              // 334
    this.setHoly(h*2)
    console.log(this.getHoly()) // 668
  }
}
コードが無駄にクソ長い

 holyVal をグローバル化してみる
jslet holyVal
class Parent {
  constructor() {
    holyVal = 334
    this.childA = new ChildB()
  }
}

class ChildB {
  constructor() {
    this.init()
  }
  init() {
    // 変更できる
    holyVal *= 2
  }
}
この方法だと、関係ない場所からのアクセスもできてしまう
 holyVal を触って良い場所と駄目な場所がわかりにくくなる

>/villagepump/@Mijinko_SD#6384c5eb1280f00000b16e7f
親classを渡してしまうのはどうでしょう？
class1.jsclass Parent {
  constructor() {
    this.holyVal = 334
    this.childA = new ChildB(this);
    console.log(this.holyVal) // 668
  }
}

class ChildB {
  constructor(parent) {
    this.parent = parent
    this.init()
  }
  init() {
    console.log(this.parent.holyVal) // 334
    this.parent.holyVal *= 2
    console.log(this.parent.holyVal) // 668
  }
}

new Parent()
その手があったかああああああ
/Mijinko-other/スコープの壁(JavaScript)#637fe5437838e30000787fcf
ESModuleでこの2クラスだけ一つのファイルに閉じこめれば、global変数をカプセル化できるのでそんなに問題にはならないと思います
たしかに
色々アドバイス助かります