94266


提示コードの`///`コメント部内部のコードなのですが、上の`Component`を親クラスとして子クラス`Renderer`クラスを生成したいのですが以下のエラーが出ますこれはなぜでしょうか？

##### 試したこと

コメント部内部のように実験

##### エラー

[code]

    FrameWork.js:46 Uncaught ReferenceError: Component is not defined
        at FrameWork.js:46:38
    (anonymous) @ FrameWork.js:46
    Script.js:4 Uncaught TypeError: Cannot read properties of undefined (reading 'GameObject')
        at Script.js:4:32
    (anonymous) @ Script.js:4
    Script.js:33 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'GameObject')
        at setup (Script.js:33:27)
        at p5._setup (p5.js:62985:27)
        at p5._start (p5.js:62908:25)
        at new p5 (p5.js:63261:22)
        at _globalInit (p5.js:62189:17)
    setup @ Script.js:33
    _setup @ p5.js:62985
    _start @ p5.js:62908
    p5 @ p5.js:63261
    _globalInit @ p5.js:62189
    Promise.then (async)
    280.../core/main @ p5.js:62214
    o @ p5.js:34
    (anonymous) @ p5.js:38
    267../accessibility/color_namer @ p5.js:54831
    o @ p5.js:34
    r @ p5.js:51
    (anonymous) @ p5.js:55
    (anonymous) @ p5.js:18
    (anonymous) @ p5.js:20
    
[/code]

[code]

    "use strict"
    
    var FrameWork = 
    {
        
    
    
        /*##########################################################
        # GameObject
        説明
        シーンに存在するオブジェクト
        ############################################################*/
        GameObject : class GameObject 
        {
            constructor()
            {
    
            } 
        },
        
        /*##########################################################
        # Component
        説明
        シーンに存在するオブジェクト
        ############################################################*/
        Component : class Component
        {
            constructor()
            {
    
            } 
    
            Update()
            {
                alert('オーバーライドされていません。');
    
            }
        },
    
    /////////////////////////////////////////////////////////////////////////////////////////////////
        /*##########################################################
        # Renderer
        説明
        レンダリング
        ############################################################*/
        Renderer: class Renderer extends Component
        //Renderer: class Renderer extends Component.Component
        //Renderer: class Renderer extends FrameWork.Component.Component
        {
            constructor()
            {
                super();
            }
    
    
    
    
        },
    ////////////////////////////////////////////////////////////////////////////////////////////////
    
        /*##########################################################
        # Transform
        説明
        座標、回転、スケール
        ############################################################*/
        Transform : class Transform
        {
            constructor()
            {
                this.position = 
                {
                    x: 0,
                    y: 0,
                };        
                
                this.scale = 
                {
                    x: 1.0,
                    y: 1.0,
                };        
    
                this.rotate = 0.0;
    
            } 
        }
    };
    
    
[/code]


CC BY-SA 4.0
2023-03-21T14:22:01.013
94265
2023-03-22T13:21:58.727
2023-03-21T15:32:33.233
55177
55177
question
javascript
javascript 変数の中で継承を行う方法が知りたい。


一般化すると「オブジェクトリテラルの中でプロパティを定義するとき、同一オブジェクトの他のプロパティを参照するには?」ということなのですが、現在の
JavaScript ではできないようです。何らかの方法で遅延させる必要があります。

一番簡単なのは、いったんオブジェクトリテラルを閉じて、プロパティを代入することでしょう。

[code]

    const framework = {
      Component: class {
        constructor() {}
        Update() {}
      },
      // Rendererはこの中では定義しない
    };
    // 外で代入する
    framework.Renderer = class extends framework.Component {
      constructor() { super(); }
    };
    
[/code]


CC BY-SA 4.0
2023-03-21T21:58:20.400
94266
2023-03-21T21:58:20.400
3475
94265
answer


そもそもの目的は名前空間を作りたいという話ではないでしょうか？そうであれば、XY問題になっています。今時、オブジェクトを使用して名前空間を作るなんてことは誰もしません。

現在のJavaScriptで名前空間を作る場合は[モジュール](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Modules)を使います。モジュールではファイル毎に名前空間が作成されます。`export`で外部から使えるように宣言された変数・関数・クラス等を`import`で読み込みます。`import`時に何をどのような名前で読み込むのかを指定します。`import`で指定されていない、または、そもそも`export`されていない変数・関数・クラス等は`import`している側から見えません。このような仕組みにより、名前が衝突しているかどうかの判断がファイル内で完結できるようになっています。(ただし、グローバル変数を変更しているようなJSを`ipmort`した場合は、グローバル変数への副作用が発生します。)

モジュールについて詳しく述べるとさらに長くなるためあとは割愛しますが、仕組み的にはPythonのモジュールに近いです。C++の`namespace`のような名前空間の考え方が全く違いますので、参考にしてはいけません。


CC BY-SA 4.0
2023-03-22T13:21:58.727
94275
2023-03-22T13:21:58.727
7347
94265
answer