JavaScriptのプロトタイプにメソッドを追加する方法がわかりません

Question

前提・実現したいこと

現在、「Modern JavaScript for the impatient」という本の翻訳版を読んでいます。
その本の第４章の演習問題5問目のJavaScriptの問題がわからず詰まっています。
助言いただければと思い、質問を投稿させて頂きます。

分からない演習問題５問目

次の関数は、文字列greetメソッドを追加して「あいさつ」ができるようにする。

function createGreetable (str) {
  const result = new String(str)
  result.greet = function(greeting) { return `${greeting}, ${this}` }
  return result
}

典型的な用例は、

const g = createGreetable('World')
console.log(g.greet('Hello'))

この関数には、１つ難点があって、あいさつができる文字列は、それぞれgreetメソッドの独自のコピーをもつことになる。createGreetableが、プロトタイプにgreetメソッドを含むオブジェクトを作成するように仕様。それでも、すべての文字列メソッドを呼び出せるようにする。

以上が問題になります。

考えたソースコード

const greetPrototype = { 
  greet: function(greeting) {
    let result = ''
    for (const key in this) {
      result += this[key]
    }
    return `${greeting}, ${result}!` 
  }
}

function createGreetable(str) {
  const result = new String(str)
  Object.setPrototypeOf(result, greetPrototype)
  return result
}

const g = createGreetable('World')
console.log(g.greet('Hello'))

上記のソースコードの出力結果

Hello, Worldfunction(greeting) {
    let result = ''
    for (const key in this) {
      result += this[key]
    }
    return `${greeting}, ${result}!` 
  }!

試したこと

問題の意味がうまく理解できていないのもありますが、
まずは、greetPrototypeを作成し、greetメソッドを追加しました。
greetメソッドでは、thisを使ってStringオブジェクトの内容を表示したかったのですが、うまくできなかったためfor inを使ってresult変数に代入し表示しています。
その値を、Object.setPrototypeメソッドでプロトタイプに追加し、使えるように実装しました。
結果、Hello, Worldの表示後、greet: の次に書いたプロトタイプのgreetメソッドのソースコードが表示されてしまいました。

初歩的な問題だとは思いますが、よろしくお願い致します。

補足情報（FW/ツールのバージョンなど）

node: 12.18.3

Answer 1

greetメソッドのソースコードが表示されてしまいました。

for in で greet の内容も表示しているためです。
ちゃんとgreetをプロトタイプに入れればthisが使えます。

以下のコードではString型のプロトタイプを変更していますが、問題の意図はもしかしたらStringを継承した型を作れということかもしれません。

function createGreetable(str) {
  const result = new String(str);
  const proto = Object.getPrototypeOf(result);
  proto.greet = function(greeting) {
    return `${greeting}, ${this}!`;
  };
  Object.setPrototypeOf(result, proto)
  return result
}

初歩的な問題だとは思いますが

まったく初歩的ではないと思いますよ。今どきのJavaScript初学者がプロトタイプ操作を学ぶ必要はありません。

---

参考までに、いまどきのJavaScriptなら以下のようにclassでやります。

class MyString extends String {
  greet(greeting) {
    return `${greeting}, ${this}!`;
  }
}
const g = new MyString('World');
console.log(g.greet('Hello'));

Comments

[r.s_09]

ありがとうございました！解決できました！
thisの挙動を理解していないこと、getPrototypeOfメソッドについての見落としなど、反省点が多く見つかりました。
教材ではclassを使いましょうと書いてあるのですが、裏では何が行われているのか把握した方が良いという意図からprototypeを使っている、そうです。非常に勉強になりました。ありがとうございました。