Prototype Live Coding Examples

1proto.js

var o = {
  a: 2,
  m: function(b){
    return this.a + 1;
  }
};

// When calling o.m in this case, 'this' refers to o
console.log(o.m()); // 3

// p is an object that inherits from o
var p = Object.create(o);

// creates an own property 'a' on p
p.a = 12;

// when p.m is called, 'this' refers to p.
// So when p inherits the function m of o,
// 'this.a' means p.a, the own property 'a' of p
console.log(p.m()); // 13

o.b = 2;

console.log(o.b); // 3
console.log(p.b); // 3

2proto.js

// The newly created object o has Object.prototype as its [[Prototype]]
// o has no own property named 'hasOwnProperty'
// hasOwnProperty is an own property of Object.prototype.
// So o inherits hasOwnProperty from Object.prototype
// Object.prototype has null as its prototype.
// o ---> Object.prototype ---> null
var o = {a: 1};
console.log(o.__proto__);


// Arrays inherit from Array.prototype
// (which has methods like indexOf, forEach, etc.)
// The prototype chain looks like:
// a ---> Array.prototype ---> Object.prototype ---> null
var a = ["yo", "whadup", "?"];
console.log(a.__proto__.__proto__);


// Functions inherit from Function.prototype
// (which has methods like call, bind, etc.)
// f ---> Function.prototype ---> Object.prototype ---> null
function f(){
  return 2;
}

console.log(f.__proto__.__proto__.__proto__);

3proto.js

function Person(first, last, age) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
}

Person.prototype.name = function() {
  return this.firstName + ' ' + this.lastName;
}

const joe = new Person('Joe', 'Karlsson', 13);
console.log(joe.name());

console.log();

4proto.js

//Constructor logic to set object properties, NOT prototype properties
function Song(){
  this.play = function() {
    return 'Hi-jacked';
  }
}

Song.prototype.play = function() {
  return 'playing';
}

var song = new Song(); //invoked as constructor
console.log('song.play: ', song.play()); //hi-jacked

function MetalSong(title, length){
  this.title = title
  this.length = length
  this.volume = 11;
}

MetalSong.prototype = Object.create(Song.prototype, {
  constructor : MetalSong
});

let theBloodRunsRedMurderTown = new MetalSong('the Blood Runs Red Murder Town');

console.log(theBloodRunsRedMurderTown.play()); //playing

function DeathMetalSong(title, length) {
  MetalSong.call(this, title, length)
  this.volume = Infinity;
}

DeathMetalSong.prototype = Object.create(MetalSong.prototype, {
  constructor : DeathMetalSong
});

var rainInBlood = new DeathMetalSong('rain In Blood', 4);
console.log('rainInBlood.volume: ', rainInBlood.volume);