basic.js

/*
 Examples from Objects and the Prototype Chain by Ryan Kinal

 http://blog.javascriptroom.com/2013/01/14/objects-and-the-prototype-chain/
*/

/*
 Object literals are awesome!
 Use the following to create an empty object
*/
var obj = {};

/*
 Set som properites in various ways
*/

// In the literal
var obj = {
 a: 17,
 'b': 92
};

// dot notation
obj.sum = function() {
 return this.a + this.b;
};

// bracket/array notation
obj['product'] = function() {
 return this['a'] + this['b'];
};

/*
 Inheritance is sweet!
 Objects inherit from other objects
*/
var point = {
 translate: function(x, y) {
 this.x += x;
 this.y += y;
 },
 moveTo: function(x, y) {
 this.x = x;
 this.y = y;
 }
};

// Create a new object with point as the prototype
var inheritingPoint = Object.create(point);

// Set some initial values
inheritingPoint.x = 45;
inheritingPoint.y = 62;

// Use the inherited functions
inheritingPoint.translate(5, 6); // x = 50, y = 68
inheritingPoint.moveTo(100, 75); // x = 100, y = 75

/*
 'this' means... what now?
*/
var inheritingPoint = Object.create(point);

// moveTo is called with a context of "inheritingPoint"
// which means that within "moveTo", this === inheritingPoint
// so "x" is set on inheritingPoint, not point
inheritingPoint.moveTo(100, 75);
inheritingPoint.hasOwnProperty(x); // true

/*
 Polymorphism - change it up!
*/

// point3d inherits from point
var point3d = Object.create(point);

point3d.translate = function(x, y, z) {
 point.translate.call(this, x, y); // Avoid code duplication - use the "parent" function
 this.z += z;
};

point3d.moveTo = function(x, y, z) {
 point.moveto.call(this, x, y);
 this.z = z;
};

var new3DPoint = Object.create(point3d);
newPoint.moveTo(42, 37, 96);