クラスと継承について

JavaScript、オブジェクト指向プログラミングの超初心者です。
最終的には、

Your hero Christian has 500 in health.
He is carrying a backpack that contains
Flask of Water, weight: 1.2
Apple, weight: 0.3

と表示させたいです。

親クラス: Creature　
子クラス: Hero
Hero : ChrstianはBackpackを持っていて、Itemでオブジェクトを作って、Backpack内でItemを追加すること(addItem)とItemを表示する(showItems)ことができるようにしたいです。
Itemは２個あって、
Flask of Water, weight: 1.2
Apple, weight: 0.3です。

Christiannのhealth pointは500
です。

Backpack内のコードに問題があるのではないかと思っています。
Items内に、どんどんitemを追加していけるようにしたいです。(addItem)
Items内のitemを表示させたいです。(showItems)

class Creature {

    #health=0;

    constructor(health) {
        this.#health = health;
    }

    get health(){
        return this.#health;
    }
}
class Item {

    #itemName = '';
    #weight = 0;

    constructor(itemName, weight) {
        this.#itemName = itemName;
        this.#weight = weight;
    }
    get itemName(){
        return this.#itemName;
    }
    get weight(){
        return this.#weight;
    }
}

class Backpack {

    #items = [];

    get items(){
        return this.#items;   
    }    

    addItem(item) {
        this.#items.push(item);
}

    showItems() {
        for (item of this.#items){
            console.log(thing + "<br >");
    }
}
}

class Hero extends Creature {
    #name='';
    #myBackpack = '';

    constructor(health, name, myBackpack) {
        super(health);
        this.#name = name;
        this.#myBackpack = new Backpack();
    }

    get name(){
        return this.#name;
    }

    get myBackpack(){
        return this.#myBackpack;
    }

    toString() {
        return `Your hero, ${this.name} has ${this.health} in health.<br> 
        He is carrying a backpack that contains ${this.myBackpack}`;
    }
}
let hero = new Hero (500, "Christian");
hero.myBackpack.addItem(new Item("Flask of Water", 12), new Item("Apple", 0.3));
console.log(hero.toString());

このコードを実行すると、
Your hero, Christian has 500 in health.<br>
He is carrying a backpack that contains, [object Object]
となり、itemがうまく表示されません。この[object,object]を
Flask of Water, weight: 1.2
Apple, weight: 0.3
とするにはどのような変更が必要なのでしょうか？
アドバイスをどうかよろしくお願いします。

退会済みユーザー

2019/10/06 10:25

これは課題でしょうか？要件だけ書いてはいお願いしますというのは丸投げに当たります。 https://teratail.com/help/question-tips > 作業依頼のような投稿をして、課題や仕事を無償でやってもらえる場ではありません。

Chirnil

2019/10/06 11:36

確かにこれは課題です。自分でコードを書いてみたのですが、そして、おそらくここら辺のコードがおかしくて、うまくいかないのだろうなというのを、コード内にいろいろ書き足してみましたが、丸投げのように見えてしまったのですね。残念です。

Chirnil

2019/10/06 12:12

このコードを実行した結果と、質問の詳細をさらに追加しました。 Teratailも実は初心者です。私の質問の仕方で、お気を悪くされたらすみません。

Zuishin

2019/10/06 12:19

これ実行したら文法エラーが出るからすぐ直してください。そうすれば人に聞かなくても自分の書いたところが合ってるかどうかくらいはわかると思います。

Chirnil

2019/10/06 12:24

このコードを実行すると、 Your hero, Christian has 500 in health.<br> He is carrying a backpack that contains, [object Object]という結果になりました。もしかしたら、文法エラーは編集前のコードかもしれません。

Zuishin

2019/10/06 12:43

だとしたらこれは JavaScript ではありません。別の言語です。

Chirnil

2019/10/06 12:53

えぇっ！？！？大混乱してきました。(*_*) 関係ないかもしれませんが、visual studio codeというものを使って書いています。上のコードをｈｔｍｌファイルに表示させています。スウェーデン在住で、プログラミングの学校に最近通い始めたばかりなのですが（pythonは経験ありますが、JSは初めてです。）今月はJavaScript/CSS/html を習っています。

tanishi_a

2019/10/06 13:56 編集

(1) 「実行」とは、どうやっているのですか？　　何らかのコマンドで実行でしょうか。 (2) 変数名の先頭に # がついているのは確かに見たことがなく、、　　Angular の TypeScript でしょうか・・？ (3) 後ろの方に全角空白が混じってますね。 (4) あと Backpack の toString がないから [Object ..] となるのでは？

Chirnil

2019/10/06 14:12

質問に答えます。 1) 実行という言葉を使いましたが、最後の３行を書くと上記の結果がコンソールに表示されるという意味です。 2)#（または_) はattributeをprivate（非公開）にしたいときに使っています。 3)　すいません。どのへんでしょうか？もう一度コピペしなおしてみますね。 4)BackpackクラスのshowItemsの記述をtoStringを使ってコードを書くという意味ですか？

tanishi_a

2019/10/06 14:25

(1) VS Code に書くと、VS Code の「DEBUG CONSOLE」に出るのですか？　　そういう動きをするには、その前になにかコマンドを打っているのではないかと思いますが (2) 素のままの JavaScript ではないですよね。という意味です　　環境がわからないから、他の人も質問に答えられない。 (3) Hero クラスの toString の行末でしたが、修正されたあとは消えましたね。 (4) 環境/言語が分からないので予想でしかないのですが、　　${this.myBackpack} のように書いたら、　　myBackpack の toString() 関数が呼ばれそうに思うので、　　Backpack クラスに toString() を定義する必要があるのかな、と思った。という意味です。

Chirnil

2019/10/06 14:39

「DEBUG CONSOLE」というのは初めて聞きました。私のは、VS Codeでhtmlファイルを作って、そこに下記のように書いて、 <!DOCTYPE html> <html> <head> <title>homework</title> <meta charset="=UTF-8"> </head> <body> <script src="Creature.js"></script> <script src="Item.js"></script> <script src="Backpack.js"></script> <script src="Hero.js"></script> <script src="Starts.js"></script> </body> </html> Live serverを開くと、アドレスが表示されるので、それをGoogleクロームで表示させています。私もわからないで使っているので、質問にちゃんと答えられているかわかりませんが。。素のままのJSではないのですね。まだ学校でJSが始まって２週間なので、深く教わっていないのかもしれません。ご面倒をおかけしています。これから(4)について、深く追及してみようと思います。

tanishi_a

2019/10/06 14:44

Live Server (という VS Code Extension) を使うとローカルサーバが立てられるのですね。 Starts.js 以外は質問文に載ってそうに見えますが、Starts.js は載せられないのでしょうか？

Chirnil

2019/10/06 14:53

ローカルサーバーが立てられるという表現を早くに使えば良かったですね。(^_^;) 実はStarts.jsは最後の3行だけが書いてあるのです。

Lhankor_Mhy

2019/10/07 03:12 編集

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes#Private_field_declarations これは、Chromeなら動作しますよ。 https://caniuse.com/#search=Private%20field --- ああ、動作しなかったのは編集前のコードだったのですね。失礼。

行動規範の内容に同意します

回答1件

ベストアンサー

js
1    toString() {
2        return `Your hero, ${this.name} has ${this.health} in health.<br> 
3        He is carrying a backpack that contains ${this.myBackpack}`;
4    }

この部分ですが、this.myBackpackはBackpackのインスタンスを返すので、Backpack.prototype.toString()が評価されると思います。これは最終的にObject.prototype.toString()を参照し、"[object Object]"を返します。

既定で、 toString() メソッドは Object の子孫にあたるあらゆるオブジェクトに継承されています。このメソッドがカスタムオブジェクト中で上書きされていない場合、 toString() は "[object type]" という文字列を返します (type はそのオブジェクトの型)。

Object.prototype.toString() - JavaScript | MDN

なので、解決方法は、BackpackのtoStringを定義すること、です。

投稿2019/10/07 03:03

編集2019/10/07 03:21

Lhankor_Mhy

総合スコア36115

Chirnil

2019/10/07 19:20

tanishi_a 様、Lhankor_Mhy様のご指摘の通り、 Backpack 内に toString() { return `${this.#items}`; } 　とし、続いて Item 内にも toString(){ return ` Item name: ${this.#itemName}, Weight: ${this.#weight}`; } と書くことによって希望どうりの表示を得ることができました。ご親切にありがとうございました！

行動規範の内容に同意します