Quick example on how to use the prototype-based object-oriented programming in JavaScript.

class-ES5.js

/*
 * Generated code from class-ES6.js with 6to5. This code can be used anywhere today. 
 */
"use strict";

var _get = function get(object, property, receiver) { var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc && desc.writable) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };

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

var _prototypeProperties = function (child, staticProps, instanceProps) { if (staticProps) Object.defineProperties(child, staticProps); if (instanceProps) Object.defineProperties(child.prototype, instanceProps); };

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

/**
 * Base class example
 */
var Person = (function () {
    function Person(name) {
        _classCallCheck(this, Person);

        this.name = name;
        console.log("creating a new person");
    }

    _prototypeProperties(Person, null, {
        hello: {
            value: function hello() {
                console.log("Hello " + this.name + "! You're a person!");
            },
            writable: true,
            configurable: true
        }
    });

    return Person;
})();

/**
 * Derived class example
 */
var Worker = (function (Person) {
    function Worker(name, job) {
        _classCallCheck(this, Worker);

        _get(Object.getPrototypeOf(Worker.prototype), "constructor", this).call(this, name);
        this.job = job;
        console.log("creating a new worker");
    }

    _inherits(Worker, Person);

    _prototypeProperties(Worker, null, {
        hello: {
            value: function hello() {
                console.log("Hello " + this.name + "! You're a worker!");
            },
            writable: true,
            configurable: true
        }
    });

    return Worker;
})(Person);

/*
 * Instantiation & usage
 */
var p1 = new Person("Jack");
var p2 = new Person("Juliet");
var w1 = new Worker("Jacob");

p1.hello();
p2.hello();
w1.hello();

class-ES6.js

/*
 * Quick example on how to use the new class feature of ES6
 * instead of the prototype-based object-oriented programming
 * in JavaScript
 * by Janos Kasza (@janoskk)
 */

/**
 * Base class example
 */
class Person {
    constructor(name) {
        this.name = name;
        console.log("creating a new person");
    }

    hello() {
        console.log("Hello " + this.name + "! You're a person!");
    }
}

/**
 * Derived class example
 */
class Worker extends Person {
    constructor(name, job) {
        super(name);
        this.job = job;
        console.log("creating a new worker");
    }

    hello() {
        console.log("Hello " + this.name + "! You're a worker!");
    }
}

/*
 * Instantiation & usage
 */
var p1 = new Person("Jack");
var p2 = new Person("Juliet");
var w1 = new Worker("Jacob");

p1.hello();
p2.hello();
w1.hello();

prototype.js

/*
 * Quick example on how to use the prototype-based 
 * object-oriented programming in JavaScript
 * by Janos Kasza (@janoskk)
 * 
 * For further info, please read the following:
 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript
 */

/** 
 * Defining a class is the same as creating a simple function. That 
 * function will be the `constructor` of the later objects and you can
 * initialize its properties with the `this` keyword.
 */
var Person = function(name) {
  this.name = name;
  console.log("creating a new person");
}

/**
 * A method for a class is just a property under the `Class.prototype`
 * namespace, nothing more. Note the usage of the `this` keyword again.
 */
Person.prototype.hello = function() {
  console.log("Hello " + this.name + "! You're a person!");
}

/**
 * To define a derived class the following needs to be done:
 *
 * 1) Create a new class and call the constructor of the base class
 *    explicitly with the `Class.call`. At least one parameter must be
 *    passed to that: the current object with the `this` keyword.
 */
var Worker = function(name, job) {
  Person.call(this, name); 
  
  this.job = job;
  console.log("creating a new worker");
}

/**
 * 2) Create the prorotype of the derived class, based on the base class.
 *    To do that, *hard* copy the prototype of the base class. Don't
 *    use neither the simple assignment operator nor `new BaseClass()`!
 */
Worker.prototype = Object.create(Person.prototype);

/**
 * 3) (Re)set the `constructor` property to refer to the new class instead
 *    of the (copied) base class.
 */
Worker.prototype.constructor = Worker;

/**
 * Overwrite inherited functions or create new ones if you want.
 */
Worker.prototype.hello = function() {
  console.log("Hello " + this.name + "! You're a worker!");
}

/*
 * Instantiation & usage
 */
var p1 = new Person("Jack");
var p2 = new Person("Juliet");
var w1 = new Worker("Jacob");

p1.hello();
p2.hello();
w1.hello();