Last active
December 27, 2015 18:42
-
-
Save alanstevens/e91831b3a05b3add57b0 to your computer and use it in GitHub Desktop.
Exploring prototypal inheritance
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var Parent = function(first, second){ | |
this.first = first; | |
this.second = second; | |
} | |
var Child = function(first, second, third){ | |
Parent(first, second); | |
// or ? | |
Parent.call(this, first, second) | |
// or ? | |
Parent.apply(this, arguments); | |
this.third = third; | |
} | |
// Why do people do this? | |
Employee.prototype.constructor = Employee; | |
Employee.constructor = Person.prototype.constructor; | |
//http://www.htmlgoodies.com/html5/javascript/javascript-object-chaining-using-prototypal-inheritance.html#fbid=ZxF07D5oFc0 | |
var foo = Object.create(null); | |
// or ? | |
var bar = Object.create(Object.prototype); | |
// or ? | |
Child2.prototype = new Parent(); // Before defining the constructor function? | |
Child2.constructor = Parent; // only read-only for primitive values such as 1, true and "test" | |
// or? | |
Child2.prototype.constructor = Child2; | |
Child2.constructor = Parent.prototype.constructor; | |
function child( first, second, third ){ | |
// steal underwear? | |
// how do I call the assigned constructor? | |
this.third = third; | |
} | |
Child.prototype = new Parent; // no parameters? | |
// or? | |
Child.prototype = Parent.prototype; | |
// or ? | |
Child.prototype = new Parent(first, second); | |
// or ? | |
Child.prototype = object.getPrototypeOf(Parent); | |
// declaring methods on the prototype is more memory efficient. | |
//http://raganwald.com/2014/07/09/javascript-constructor-problem.html | |
function Fubar (foo, bar) { | |
"use strict" | |
var obj, | |
ret; | |
if (this instanceof Fubar) { | |
this._foo = foo; | |
this._bar = bar; | |
} | |
else return new Fubar(foo, bar); | |
} | |
//http://www.htmlgoodies.com/html5/javascript/some-useful-javascript-object-creation-patterns.html#fbid=ZxF07D5oFc0 | |
function createObjectFromPrototype() { | |
var objectConstructor = arguments.callee.caller; | |
// Create an object that extends the target prototype. | |
var newClass = Object.create( objectConstructor.prototype ); | |
// Invoke the custom constructor on the new object, | |
// passing in any arguments that were provided. | |
objectConstructor.apply( newClass, objectConstructor.arguments ); | |
// Return the newly created object. | |
return newClass; | |
} | |
function Person(name, sex) { | |
//enforce the use of the new keyword | |
if (!(this instanceof arguments.callee)) { return createObjectFromPrototype(); } | |
this.populationCount++; | |
this.getName=function(){ return name }; | |
this.getSex=function(){ return sex }; | |
this.setSex=function(newSex){ sex = newSex; }; | |
this.die=function(){ this.populationCount -- ; }; | |
} | |
// extend a prototype method | |
UsedCar.prototype.getInfo = function(superGetInfo) { | |
return function() { return superGetInfo() + ', '+ this.mileage; }; | |
}(UsedCar.prototype.getInfo); | |
//http://www.htmlgoodies.com/beyond/javascript/some-javascript-object-prototyping-patterns.html | |
//this creates a singleton | |
var myObject = new function MyObject() {}; | |
//http://www.htmlgoodies.com/html5/tutorials/javascript-prototypical-inheritance-explained.html#fbid=ZxF07D5oFc0 | |
// it would make sense to me if I could write: | |
Child.prototype = Parent.prototype | |
// instead of | |
Child.prototype = new Parent; | |
// interesting | |
function Square() { // no side parameter? | |
Rectangle.call(this, side, side); | |
} | |
Square.prototype = Object.create(Rectangle.prototype); | |
Square.prototype.constructor = Square; // but why? | |
//http://aaditmshah.github.io/why-prototypal-inheritance-matters/#toc_1 | |
// This is cool! | |
Object.create(_.extend({}, aProto, someMethods)); | |
//https://web.archive.org/web/20150815110214/http://ericleads.com/2013/02/fluent-javascript-three-different-kinds-of-prototypal-oo/ | |
Bar.prototype = Object.create(Foo.prototype); | |
// NOTE: .constructor is borked here, need to fix | |
Bar.prototype.constructor = Bar; // <-- add this line! | |
//https://davidwalsh.name/javascript-objects-deconstruction | |
Object.getPrototypeOf(obj1).delegateMethod = | |
function () { | |
return 'altered'; | |
}; | |
//https://web.archive.org/web/20140625045448/http://ericleads.com/2014/02/prototypal-inheritance-with-stamps/ | |
// Why do we need the constructor? | |
Employee.prototype = Object.create(Person.prototype); | |
Employee.prototype.constructor = Employee; | |
//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment