Skip to content

Instantly share code, notes, and snippets.

@benpriebe
Created December 6, 2012 01:39
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save benpriebe/4221178 to your computer and use it in GitHub Desktop.
Save benpriebe/4221178 to your computer and use it in GitHub Desktop.
JS Inheritance styles

#Inheritance Styles

Here are a few different ways to try and implement prototypal inheritance in a classical way. In these examples, we try to derive a more specific class of the base class - Asset.

By inspecting the web development tools console output in Chrome you can see the prototype chain and view the differences of each approach.

<html>
	<body>
		<script>

			var __extends = this.__extends || function (d, b) {
		        function __() { this.constructor = d; }
		        __.prototype = b.prototype;
		        d.prototype = new __();
		    };

		
			 var Asset = (function() {
			        function Asset(lat, lon) {
			            this.lat = lat;
			            this.lon = lon;
			        }

			        return Asset;
			    })();


      	    var MoonRock = (function(_super) {
		        __extends(MoonRock, _super);
		        function MoonRock(lat, lon, desc) {
		            _super.call(this, lat, lon);
				    this.desc = desc;
		        }

		        return MoonRock;
		        
		    })(Asset);


			function POI(lat, lon, desc) {
				this.desc = desc;
			}

			POI.prototype = new Asset("lat", "lon");
			POI.prototype.constructor = POI;
			var poi = new POI("a", "b", "desc");

			/* Car Door */
			function newCarDoor(lat, lon, desc) {
        		var instance = Object.create(new Asset(lat, lon));
        		instance.desc = desc;
        		return instance;
    		};

			var asset = new Asset(123, 456);
			var poi = new POI("abc", "def", "description");
			//var carDoor = new newCarDoor("abc", "def", "description");
			var carDoor = newCarDoor("abc", "def", "description");
			var moonRock = new MoonRock("abc", "def", "description");

			console.log("asset: %o", asset);
			console.log("instanceOf(Asset) " + (asset instanceof Asset));
			console.log("");

			console.log("poi: %o", poi);
			console.log("instanceOf(POI) " + (poi instanceof POI));
			console.log("");

			console.log("carDoor: %o", carDoor);
			console.log("instanceOf(CarDoor) " + (carDoor instanceof newCarDoor));
			console.log("");

			console.log("moonRock: %o", moonRock);
			console.log("instanceOf(MoonRock) " + (moonRock instanceof MoonRock));

		</script>
	</body>
</html>

And here is the relevant output:

asset: Asset
	lat: 123
	lon: 456
	__proto__: Asset
		constructor: function Asset(lat, lon) {
		__proto__: Object

instanceOf(Asset) true 

poi:  POI
	desc: "description"
	__proto__: Asset
   	    constructor: function POI(lat, lon, desc) {
		lat: "lat"
		lon: "lon"
		__proto__: Asset
			constructor: function Asset(lat, lon) {
			__proto__: Object

instanceOf(POI) true test.htm:60

carDoor: Asset
	desc: "description"
	__proto__: Asset
	    lat: "abc"
		lon: "def"
		__proto__: Asset

instanceOf(CarDoor) false test.htm:64

moonRock: MoonRock
		desc: "description"
		lat: "abc"
		lon: "def"
		__proto__: __
			constructor: function MoonRock(lat, lon, desc) {
			__proto__: Asset
				constructor: function Asset(lat, lon) {
				__proto__: Object

instanceOf(MoonRock) true 

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment