segdeha/Prototypal Inheritance

## Prototypal Inheritance
<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<title>Prototypal inheritence</title>
		<style type="text/css">

		form {
			width: 300px;
			float: left;
		}

		form div, #log {
			line-height: 30px;
		}

		</style>
	</head>
	<body>
		<form>
			<div><button onclick="animal.speak();return false;">animal.speak()</button></div>
			<div><button onclick="dog.speak();return false;">dog.speak()</button></div>
			<div><button onclick="chihuahua.speak();return false;">chihuahua.speak()</button></div>
			<div><button onclick="dog.bark();return false;">dog.bark()</button></div>
			<div><button onclick="chihuahua.bark();return false;">chihuahua.bark()</button></div>
			<div><button onclick="Dog.prototype.bark.call(chihuahua);return false;">Dog.prototype.bark.call(chihuahua)</button></div>
			<div><button onclick="animal.iAm();return false;">animal.iAm()</button></div>
			<div><button onclick="dog.iAm();return false;">dog.iAm()</button></div>
			<div><button onclick="chihuahua.iAm();return false;">chihuahua.iAm()</button></div>
			<div><button onclick="Animal.prototype.iAm.call(chihuahua);return false;">Animal.prototype.iAm.call(chihuahua)</button></div>
			<div><button onclick="Dog.prototype.iAm.call(chihuahua);return false;">Dog.prototype.iAm.call(chihuahua)</button></div>
		</form>
		<p id="log"></p>
		<script type="text/javascript">

		function logIt(logWhat) {
			document.getElementById('log').innerHTML += logWhat + '<br>';
		}

		function Animal() {
			this.kingdom = 'Animalia';
			this.sound   = 'squawk';
		}
		Animal.prototype.speak = function () {
			logIt('my sound is a ' + this.sound);
		};
		Animal.prototype.iAm = function () {
			logIt('i belong to the kingdom: ' + this.kingdom);
		};

		function Dog() {
			Animal.apply(this, arguments);
			this.genus = 'Canis';
			this.sound = 'woof';
		}
		Dog.prototype      = new Animal();
		Dog.prototype.bark = function () {
			logIt('i go ' + this.sound);
		};
		Dog.prototype.iAm = function () {
			logIt('i belong to the genus: ' + this.genus);
		};

		function Chihuahua() {
			Dog.apply(this, arguments);
			this.breed = 'Chihuahua';
			this.sound = 'yip';
		}
		Chihuahua.prototype      = new Dog();
		Chihuahua.prototype.bark = function () {
			logIt('yo barko ' + this.sound);
		};
		Chihuahua.prototype.iAm = function () {
			logIt('i belong to the breed: ' + this.breed);
		};

		var animal, dog, chihuahua;
		animal    = new Animal();
		dog       = new Dog();
		chihuahua = new Chihuahua();

		</script>
	</body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Prototypal inheritence</title>
	<style type="text/css">

	form {
	width: 300px;
	float: left;
	}

	form div, #log {
	line-height: 30px;
	}

	</style>
	</head>
	<body>
	<form>
	<div><button onclick="animal.speak();return false;">animal.speak()</button></div>
	<div><button onclick="dog.speak();return false;">dog.speak()</button></div>
	<div><button onclick="chihuahua.speak();return false;">chihuahua.speak()</button></div>
	<div><button onclick="dog.bark();return false;">dog.bark()</button></div>
	<div><button onclick="chihuahua.bark();return false;">chihuahua.bark()</button></div>
	<div><button onclick="Dog.prototype.bark.call(chihuahua);return false;">Dog.prototype.bark.call(chihuahua)</button></div>
	<div><button onclick="animal.iAm();return false;">animal.iAm()</button></div>
	<div><button onclick="dog.iAm();return false;">dog.iAm()</button></div>
	<div><button onclick="chihuahua.iAm();return false;">chihuahua.iAm()</button></div>
	<div><button onclick="Animal.prototype.iAm.call(chihuahua);return false;">Animal.prototype.iAm.call(chihuahua)</button></div>
	<div><button onclick="Dog.prototype.iAm.call(chihuahua);return false;">Dog.prototype.iAm.call(chihuahua)</button></div>
	</form>
	<p id="log"></p>
	<script type="text/javascript">

	function logIt(logWhat) {
	document.getElementById('log').innerHTML += logWhat + '<br>';
	}

	function Animal() {
	this.kingdom = 'Animalia';
	this.sound = 'squawk';
	}
	Animal.prototype.speak = function () {
	logIt('my sound is a ' + this.sound);
	};
	Animal.prototype.iAm = function () {
	logIt('i belong to the kingdom: ' + this.kingdom);
	};

	function Dog() {
	Animal.apply(this, arguments);
	this.genus = 'Canis';
	this.sound = 'woof';
	}
	Dog.prototype = new Animal();
	Dog.prototype.bark = function () {
	logIt('i go ' + this.sound);
	};
	Dog.prototype.iAm = function () {
	logIt('i belong to the genus: ' + this.genus);
	};

	function Chihuahua() {
	Dog.apply(this, arguments);
	this.breed = 'Chihuahua';
	this.sound = 'yip';
	}
	Chihuahua.prototype = new Dog();
	Chihuahua.prototype.bark = function () {
	logIt('yo barko ' + this.sound);
	};
	Chihuahua.prototype.iAm = function () {
	logIt('i belong to the breed: ' + this.breed);
	};

	var animal, dog, chihuahua;
	animal = new Animal();
	dog = new Dog();
	chihuahua = new Chihuahua();

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