JavaScript – Some code for inheritance in JavaScript

Posted on December 29, 2015 by

Vitosh Posted in JavaScript, Just Tricks

The last month I am writing mainly small pieces of code for JavaScript, because I think I start to like the language somehow (and I took 3 books for review in JS and so far I have only reviewed one). 🙂

Thus, today I will show how to make inheritance in JS. Not science fiction or rocket engineering, but still rather complicated (and unfortunately more advanced than the inheritance in VBA). In the code below we have two objects of type article and type JavaScriptArticle. They both use the method information, which is a method of the object article. However, because of inheritance, they share the method like good friends. This is the result:

This is the code:

<!DOCTYPE HTML>
<html>
	<head>
	</head>
	<body>
		<script type="text/javascript">
			Function.prototype.extends = function (parent){
				this.prototype = Object.create(parent.prototype);
				this.prototype.constructor = this;
			}

			function Article(title){
				if (!title){
					throw new Error();
				}
				this._title = title;
			}

			Article.prototype.information = function(){
				if (this._author==undefined){
					return "The title of the article is <<" +this._title + ">>!";
				} else {
					return "The article <<" + this._title + ">> is written by " + this._author + ". The keywords are: " + this._keywords +".";
				}
			}

			function JavaScriptArticle (title, author, keywords){
				this._title = title;
				this._author = author;
				this._keywords = keywords;
			}

			JavaScriptArticle.extends(Article);

			var another_article = new JavaScriptArticle("How to code","The Jedi Coder","code,have fun");
			console.log(another_article.information());
			var article_b = new Article("How to code");
			console.log(article_b.information());

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

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

Function.prototype.extends = function (parent){

this.prototype = Object.create(parent.prototype);

this.prototype.constructor = this;

}

function Article(title){

if (!title){

throw new Error();

}

this._title = title;

}

Article.prototype.information = function(){

if (this._author==undefined){

return "The title of the article is <<" +this._title + ">>!";

} else {

return "The article <<" + this._title + ">> is written by " + this._author + ". The keywords are: " + this._keywords +".";

}

function JavaScriptArticle (title, author, keywords){

this._title = title;

this._author = author;

this._keywords = keywords;

}

JavaScriptArticle.extends(Article);

var another_article = new JavaScriptArticle("How to code","The Jedi Coder","code,have fun");

console.log(another_article.information());

var article_b = new Article("How to code");

console.log(article_b.information());

</script>

</body>

</html>

However, if you wish to become a little fancier, you may declare the method in the main object. Or with other words, you may declare the method (or function ) information in the object Article. And thus make something rather more complicated to understand for a new comer, but easier to maintain. Like this (pay attention to the method information and the new lines in the object Article:

<!DOCTYPE HTML>
<html>
	<head>
	</head>
	<body>
		<script type="text/javascript">
			Function.prototype.extends = function (parent){
				this.prototype = Object.create(parent.prototype);
				this.prototype.constructor = this;
			}

			function Article(title){
				if (!title){
					throw new Error();
				}
				this._title = title;

				this.information = function(){
					if (this._author==undefined){
						return "The title of the article is <<" +this._title + ">>!";
					} else {
						return "The article <<" + this._title + ">> is written by " + this._author + ". The keywords are: " + this._keywords +".";
					}
				}
			}

			// Article.prototype.information = function(){
			// 	if (this._author==undefined){
			// 		return "The title of the article is <<" +this._title + ">>!";
			// 	} else {
			// 		return "The article <<" + this._title + ">> is written by " + this._author + ". The keywords are: " + this._keywords +".";
			// 	}
			// }

			function JavaScriptArticle (title, author, keywords){
				Article.call(this,title);
				this._author = author;
				this._keywords = keywords;
			}

			//JavaScriptArticle.extends(Article);

			var another_article = new JavaScriptArticle("How to code","The Jedi Coder","code,have fun");
			console.log(another_article.information());
			var article_b = new Article("How to code");
			console.log(article_b.information());

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

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

Function.prototype.extends = function (parent){

this.prototype = Object.create(parent.prototype);

this.prototype.constructor = this;

}

function Article(title){

if (!title){

throw new Error();

}

this._title = title;

this.information = function(){

if (this._author==undefined){

return "The title of the article is <<" +this._title + ">>!";

} else {

return "The article <<" + this._title + ">> is written by " + this._author + ". The keywords are: " + this._keywords +".";

}

// Article.prototype.information = function(){

// if (this._author==undefined){

// return "The title of the article is <<" +this._title + ">>!";

// } else {

// return "The article <<" + this._title + ">> is written by " + this._author + ". The keywords are: " + this._keywords +".";

// }

function JavaScriptArticle (title, author, keywords){

Article.call(this,title);

this._author = author;

this._keywords = keywords;

}

//JavaScriptArticle.extends(Article);

var another_article = new JavaScriptArticle("How to code","The Jedi Coder","code,have fun");

console.log(another_article.information());

var article_b = new Article("How to code");

console.log(article_b.information());

</script>

</body>

</html>

Last but not least (actually least), I want to present a nice way of creating an object with constructor in JS. I have already had some similar articles, but this one is probably also needed. Here comes the code:

<!DOCTYPE HTML>
<html>
	<head>
	</head>
	<body>
		<script type="text/javascript">
			var articlePrototype = {
				constructor: function(title, author){
					this._title = title;
					this._author = author;
				},
				information: function(){
					return "The title is <<" + this._title + ">> from " + this._author +".";
				} 
			}
			var anotherArticle = Object.create(articlePrototype);
			anotherArticle.constructor("Code with ease","Coder");
			console.log(anotherArticle.information());
		</script>
    </body>
</html>

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

var articlePrototype = {

constructor: function(title, author){

this._title = title;

this._author = author;

information: function(){

return "The title is <<" + this._title + ">> from " + this._author +".";

}

var anotherArticle = Object.create(articlePrototype);

anotherArticle.constructor("Code with ease","Coder");

console.log(anotherArticle.information());

</script>

</body>

</html>

As you can imagine, this is the result in the console from the code:

The code is here in GitHub. Also of the previous example.

That’s all folks! Enjoy the new 2016! 🙂 😀

Tagged with: jaavscript oop, javascript inheritance

JavaScript – Some code for inheritance in JavaScript

Related posts: