Javascriptで親から属性値を継承したい(元:Ruby)

Question

前提・実現したいこと

Javasctiptのプロトタイプベースのオブジェクト指向を試みています。
プロトタイプチェーンを使って親としたクラスのメソッドを共有できますが、
属性値の共有が確認できません。
方法があればお願い致します。

該当のソースコード

  var Bicycle=function(args){//親
    this.size=args["size"];
  }
  
  var RoadBike=function(args){//子
    this.tape_color=args["tape_color"];
  }
  RoadBike.prototype=new Bicycle();
  
  var road_bike=new RoadBike({size:"S",tape_color:"red"});//TypeError: undefined からプロパティ「size」を読み取れません。（行 239、ファイル「6」）


  Logger.log(road_bike.size);//

試したこと

最後にオブジェクトを引数に渡してインスタンスを作成していますが、
親とみなしているBicycleにも同時に引数を渡すことができないようです。

補足情報

題名の「元:Ruby」の意味ですが、
オブジェクト指向設計実践ガイドのコードをJavascriptに訳そうとしています。
以下のコードが元のコードです。
以下オブジェクト指向設計実践ガイド(技術評論社) 158ページより抜粋

class Bicycle
  attr_reader :size

  def initialize(args={})
    @size = args[:size]
  end
end

class RoadBike < Bicycle
  arrr_reader :tape_color

  def initialize(args)
    @tape_color = args[:tape_color]
    super(args)
  end
end

Answer 1

Javasctiptのプロトタイプベースのオブジェクト指向を試みています。

もはや、いにしえの技術です。Babelなどを使ってクラスベースで書きましょう。

ちなみに、Babelを挟んでクラスベースで書いたものを訳すと以下のようになります。

// 翻訳前
class Bicycle{
	constructor(args){
      this.size = args.size;
    }
}

class RoadBike extends Bicycle{
  constructor(args){
    super(args);
    this.tape_color = args.tape_color;
  }
}

// 翻訳後
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Bicycle = function Bicycle(args) {
  _classCallCheck(this, Bicycle);

  this.size = args.size;
};

var RoadBike =
/*#__PURE__*/
function (_Bicycle) {
  _inherits(RoadBike, _Bicycle);

  function RoadBike(args) {
    var _this;

    _classCallCheck(this, RoadBike);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(RoadBike).call(this, args));
    _this.tape_color = args.tape_color;
    return _this;
  }

  return RoadBike;
}(Bicycle);

new Bicycleを実行するには引数が必要ですが、当然ながら元の状態の引数はわかりませんので、子クラスの宣言時にnew Bicycleは行わず、Object.setPrototypeOfでプロトタイプを設定しています。

Comments

[supereater712]

クラス構文の見やすさもBabelも存じませんでした。
この機会に、クラスを始め記述を新しくしようと思います。
ありがとうございます。

Answer 2

class構文で書くことをおすすめしますが、どうしてもsizeプロパティをprototypeに持たせたいなら、こんな感じでしょうか。

  var Bicycle=function(args){//親
    this.size=args["size"];
  }

  var RoadBike=function(args){//子
    this.tape_color=args["tape_color"];
  }
  var RoadBikeConstructor = function(args){
    RoadBike.prototype = new Bicycle(args);
    return new RoadBike(args);
  }
  var road_bike=RoadBikeConstructor({size:"S",tape_color:"red"});

個人的には、sizeプロパティはインスタンスに持たせればいいんじゃないのかな、と思います。

Comments

[supereater712]

プロトタイプの方も書いてくださって、ありがとうございます。
勧めてくださったクラス構文を、これから学ばせていただきます。