Tukukkk

Initially, I was using the class syntax to structure my code. While it sure did feel nice to work with, I found it lacked some important functionalities, like private properties and interfaces. Things that I had found useful in other OOP languages like Java.

I understand JavaScript doesn't have classes, I'm trying here to experiment with prototypes. So this thread belongs more to Prototypal Class Design (no documentation there...).

I'm going for a Factory Function design, here are some of the advantages of using such technique to construct a "class" in JavaScript:

• the factory and its instances can enclose private variables. This solves the problem of not having actual private instance/static properties usually seen in OOP languages.




• we have control over the object's prototype allowing us to combine prototypes from different factories. This makes it possible to "extend" factories with more properties/methods or mix multiple prototypes together similar to how interfaces work in OOP languages.




• we can keep a good structure for our factories, if we extend a factory with some methods, the instances coming from this new extended factory will remain as an instance of the initial factory. In other words, the opertator instanceof will still work.

const Person = (function() {



  // private shared variables

  let total = 0;

  let average = 0;

  const updateAverage = function() {

    average = total / Person.count;

  }



  // public static attributes

  Person.count = 0;

  Person.prototype = {

    sayHi() {

      return `Hi, I'm ${this.name}`;

    }

  }



  function Person(name, age) {



    // private instance variables       



    // public instance attributes

    const properties = {

      name,

      gapToAverage() {

        return Math.abs(age - average);

      }

    }



    // some logic

    Person.count += 1;

    total += age;

    updateAverage();



    // return the instance

    return Object.create(

      Object.create(Person.prototype),              // Person's prototype

      Object.getOwnPropertyDescriptors(properties)  // Person's own public instance properties

    );



  }



  // return the constructor

  return Person;



})();

const Singer = (function() {



  let songs = {};



  const prototypeExtension = {

    sing(song) {

      return songs[song];

    }

  }



  // extend Person's prototype

  Singer.prototype = Object.create(

    Person.prototype,

    Object.getOwnPropertyDescriptors(prototypeExtension)

  );



  function Singer(name, age, songs) {



    const properties = {

      getSongTitles() {

        return Object.keys(songs);

      }

    }



    // return the instance

    return Object.assign(

      Object.create(Singer.prototype),  // Singer's prototype

      Person(name, age),                // Person's public instance properties

      properties                        // Singer's own public instance properties

    );



  }



  // return the constructor

  return Singer;



})();

This is considered the best approach to object-oriented programming in JavaScript. What do you thing of this approach to OOP in JavaScript?

Here is the full code with an example:

// creating an instance of Person

const person = Person('Nina', 32);



console.log(Object.keys(person));

console.log("person instanceof Person: ", person instanceof Person)





// creating an instance of Singer

const singer = Singer('John', 20, {

  'Little Bird Fly': 'blah'

});



console.log(Object.keys(singer));

console.log("singer instanceof Person: ", singer instanceof Person)

console.log("singer instanceof Singer: ", singer instanceof Singer)

.as-console-wrapper { max-height: 100% !important; top: 0; }

<script>const Person=(function(){let total=0;let average=0;const updateAverage=function(){average=total/Person.count}

Person.count=0;Person.prototype={sayHi(){return `Hi, I'm ${this.name}`}}

function Person(name,age){const properties={name,gapToAverage(){return Math.abs(age-average)}}

Person.count+=1;total+=age;updateAverage();return Object.create(Object.create(Person.prototype),Object.getOwnPropertyDescriptors(properties))}

return Person})();const Singer=(function(){let songs={};const prototypeExtension={sing(song){return songs[song]}}

Singer.prototype=Object.create(Person.prototype,Object.getOwnPropertyDescriptors(prototypeExtension));function Singer(name,age,songs){const properties={getSongTitles(){return Object.keys(songs)}}

return Object.assign(Object.create(Singer.prototype),Person(name,age),properties)}

return Singer})()</script>