JavaScriptで既存のメソッドに新しいメソッドを追記する方法について教えて欲しいです。

Question

JavaScriptのオーバーライド・メソッド追記について

最近JSを勉強しはじめた初心者なので基礎的な質問で恐縮ですが、
オーバーライドではメソッドの上書き・追記ができるものと認識していましたが間違いでしょうか。

オーバーライドのについて勉強したところ。下記のような説明がありました。

Human.prototype.speak = function() {
  console.log('こんにちは！');
}
 
var Boy = function() {}
Boy.prototype = new Human();
 
//新しく「speak」メソッドを書き換える
Boy.prototype.speak = function() {
  console.log('こんにちは、Boyオブジェクト！');
}
 
var taro = new Boy();
 
taro.speak();

https://www.sejuku.net/blog/28158

上書きについてはなんとなく理解できたのですが、例えば今まで使っていたメソッドはそのままに新しくメソッドを追加する方法はありますでしょうか。
イメージとしては下記のような状態にしたいです。

Human.prototype.speak = function() {
  console.log('こんにちは！');

  //新しく「speak」メソッドに「console.log('こんにちは、Boyオブジェクト！');」を追加
  console.log('こんにちは、Boyオブジェクト！');
}

分かる方いたら教えていただきたいです。
よろしくお願いします。

Answer 1

例えば今まで使っていたメソッドはそのままに新しくメソッドを追加する方法はありますでしょうか。

自分で従来のメソッドを呼んでチェーンすることとなります。

Boy.prototype.speak = function() {
  // 親のメソッドを呼ぶ
  Human.prototype.speak.call(this);

  console.log('こんにちは、Boyオブジェクト！');
}

Answer 2

質問文のコードはES5という古い実装の方法ですね。

基本的にオーバーライド！という機能はありませんので、
それで良いです。

---

プロトタイプベースなんて独特だし、
他の言語からの乗り換え組としてはややこしくて仕方ありません。

要望が多かったのか、
ES2015という比較的新しいバージョンにてクラス構文が実装されました。
こちらにもオーバーライドの機能はありませんが、
継承先で同じメソッド名を定義するだけでオーバーライドになります。

ついでにsuperというキーワードで親のクラスにアクセスできます。
なので親のメソッドも実行しておきたいケースも余裕です。

下記の記事が良い感じでまとまっていました。
参考記事: (初心者向け) JavaScript のクラス (ES6 対応) - Qiita

メソッドのオーバーライド

メソッドのオーバーライドは特にキーワードなどなしで使えます。次のサンプルでは２重に継承を行い、メソッド distance() をオーバーライドしています。

コードは長いのでメソッドのオーバーライドのセクションを見てください。

---

クラス構文は既にブラウザの対応も整備され、IE11のサポートが切れるのを待つだけの状態になっています。

これを機に、クラス構文への乗り換えをおすすめします。
ES2015以降のコードをES5相当に変換するBabelというツールもありますのでIE11対応は考えなくても問題ありません

最後に先程のクラス構文のコードをBabelで変換させたものを記載します。
全部追加の関数の中に隠蔽されちゃっててよく分かりませんね。

// 【省略】上の方に変換用のコードが大量に生成される

// 基本クラス Point を class 宣言
var Point = function Point() {
  var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
  var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;

  _classCallCheck(this, Point);

  this.x = x;
  this.y = y;
}; // 派生クラス PointEx をクラス式で作成

var PointEx = /*#__PURE__*/function (_Point) {
  _inherits(PointEx, _Point);

  var _super = _createSuper(PointEx);

  function PointEx(x, y) {
    _classCallCheck(this, PointEx);

    return _super.call(this, x, y);
  } // 原点からの距離を返す。


  _createClass(PointEx, [{
    key: "distance",
    value: function distance() {
      return Math.sqrt(this.x * this.x + this.y * this.y);
    }
  }]);

  return PointEx;
}(Point); // NaN を判別できるように改良したクラス


var PointExEx = /*#__PURE__*/function (_PointEx) {
  _inherits(PointExEx, _PointEx);

  var _super2 = _createSuper(PointExEx);

  function PointExEx(x, y) {
    var _this;

    _classCallCheck(this, PointExEx);

    _this = _super2.call(this, x, y);
    _this.valid = !(x === NaN || y === NaN);
    return _this;
  } // オーバーライドしたメソッド


  _createClass(PointExEx, [{
    key: "distance",
    value: function distance() {
      if (this.valid) {
        // NaN でない場合は、基底クラスの distance() を呼び出す。
        return _get(_getPrototypeOf(PointExEx.prototype), "distance", this).call(this);
      } else {
        return null;
      }
    }
  }]);

  return PointExEx;
}(PointEx);

var p = new PointExEx(2, 4);
console.log("(%d, %d)", p.x, p.y);
console.log("valid = %s", p.valid.toString());
console.log("distance = %d", p.distance());

Answer 3

オーバーライドではメソッドの上書き・追記ができるものと認識していましたが間違いでしょうか。

クラスベースのオブジェクト指向言語ではその認識で正しいです。
JavaScript は プロトタイプベースのオブジェクト指向言語ですので、仕様上の厳密なところでは違います。
JavaScriptのオブジェクト定義と、継承方法は様々です。

（トランスパイラすら使わない）独特な書き方

function ClassA () {
}
// Object.assign() を使ったメンバ定義（IEでは使えません）
Object.assign(ClassA.prototype, {
  hoge () {
    return "HOGE"
  }
});

function ClassB () {
}
// Object.create() を使った継承方法
ClassB.prototype = Object.create(ClassA.prototype, {
  constructor: { value: ClassB }
});
Object.assign(ClassB.prototype, {
  hoge () {
    // musumakun さんの回答
    let superVal = ClassA.prototype.hoge.call(this);

    return superVal + "HOGE";
  },

  // 親オブジェクトのメソッドを別名で持たせておく手法
  _ClassA_hoge : ClassA.prototype.hoge,
  hogu () {
    // ここで _ClassA_hoge を使う
    let superVal = this._ClassA_hoge();
    return superVal + "HOGU";
  }

});
console.log( (new ClassB()).hoge() ); // "HOGEHOGE"
console.log( (new ClassB()).hogu() ); // "HOGEHOGU"