Composition, Inheritance, and Aggregation in JavaScript

Question

There is a lot of information about composition vs inheritance online, but I haven\'t found decent examples with JavaScript. Using the below code to demonstrate inheritance:

Answer 1

... Can someone give me an example using the above code to demonstrate composition and aggregation?

At first glance the provided example does not seem to be the best choice in order to demonstrate composition in JavaScript. The prototype property of the Stock constructor function still remains the ideal place for both methods total and list for both do access any stock object's own properties.

What can be done is decoupling the implementations of these methods from the constructors prototype and providing them back exactly there - yet in an additional form of code reuse - Mixins ...

example:

var Iterable_listAllKeys = (function () {

    var
        Mixin,

        object_keys = Object.keys,

        listAllKeys = function () {
            return object_keys(this).join(", ");
        }
    ;

    Mixin = function () {
        this.list = listAllKeys;
    };

    return Mixin;

}());


var Iterable_computeTotal = (function (global) {

  var
      Mixin,

      currencyFlag,

      object_keys = global.Object.keys,
      parse_float = global.parseFloat,

      aggregateNumberValue = function (collector, key) {
          collector.value = (
              collector.value
              + parse_float(collector.target[key], 10)
          );
          return collector;
      },
      computeTotal = function () {
          return [

              currencyFlag,
              object_keys(this)
                  .reduce(aggregateNumberValue, {value: 0, target: this})
                  .value
                  .toFixed(2)

          ].join(" ");
      }
    ;

    Mixin = function (config) {
        currencyFlag = (config && config.currencyFlag) || "";

        this.total = computeTotal;
    };

    return Mixin;

}(this));


var Stock = (function () {

  var
      Stock,

      object_keys = Object.keys,

      createKeyValueForTarget = function (collector, key) {
          collector.target[key] = collector.config[key];
          return collector;
      },
      createStock = function (config) { // Factory
          return (new Stock(config));
      },
      isStock = function (type) {
          return (type instanceof Stock);
      }
  ;

  Stock = function (config) { // Constructor
      var stock = this;
      object_keys(config).reduce(createKeyValueForTarget, {

          config: config,
          target: stock
      });
      return stock;
  };

  /**
   *  composition:
   *  - apply both mixins to the constructor's prototype
   *  - by delegating them explicitly via [call].
   */
  Iterable_listAllKeys.call(Stock.prototype);
  Iterable_computeTotal.call(Stock.prototype, {currencyFlag: "$"});

  /**
   *  [[Stock]] factory module
   */
  return {
      isStock : isStock,
      create  : createStock
  };

}());


var stock = Stock.create({MSFT: 25.96, YHOO: 16.13, AMZN: 173.10});

/**
 *  both methods are available due to JavaScript's
 *  - prototypal delegation automatism that covers inheritance.
 */
console.log(stock.list());
console.log(stock.total());

console.log(stock);
console.dir(stock);

There is a lot of information about composition vs inheritance online, but I haven't found decent examples with JavaScript. ...

I did not find a lot of information about composition in JavaScript online, only in other languages. ...

Maybe the search query was not specific enough but even in 2012 searching for "JavaScript Mixin composition" should have led into a not that bad direction.

... If composition is favored for a lot of situations in OOP, how come most people using JavaScript seem to only use prototypes and inheritance?

Because most of them use, what they got tought and/or what they are familar with. Maybe there should be more knowledge spread about JavaScript as delegation based language too and what can be achieved with it.

appendix:

This are related threads, recently updated and hopefully helping ...

• stackoverflow.com :: How to use mixins properly in Javascript
• stackoverflow.com :: Traits in javascript
• stackoverflow.com :: Javascript Distinguish between Composition vs. Inheritance