Inheritance and the Prototype Chain in JavaScript

Introduction

This article explains inheritance and the Prototype Chain in JavaScript. JavaScript is a bit confusing for developers experienced in class-based languages (like Java or C++), since it is dynamic and does not provide a class implementation (although the keyword class is a reserved keyword and cannot be used as a variable name).

When it comes to inheritance, JavaScript only has one construct: objects. Each object has an internal link to another object called its prototype. That prototype object has a prototype of its own, and so on until an object is reached with null as its prototype. null, by definition, has no prototype and acts as the final link in this prototype chain.

In JavaScript, a prototype is a property of a function and the object created by constructor functions. The prototype of a function is an object. Its main use is when a function is used as a constructor.

Prototype and property of the function

In this example, we will understand the concept of property and a prototype of a class. Have a look at the following example.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<form id="form1" runat="server">
<script>
function student(name,surname) {
//Property of student function
this.name = name;
this.surname = surname;
}
var p = new student('Rama','Sagar');
console.log(p.name);
console.log(p.surname);
</script>
</form>
</body>
</html>

Adding property in run time

We can add an additional property of a function when the object is created. In this example we are adding a "place" property with a person object at run time. Here is a sample example.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<form id="form1" runat="server">
<script>
function employee(name,surname) {
//Property of employee function
this.name = name;
this.surname = surname;
}
var p = new employee('Sagar', 'Pulidindi');
employee.prototype.place = "Hyderabad";
console.log(p.name);
console.log(p.surname);
console.log(p.place);
</script>
</form>
</body>
</html>

Inherit property of function to another function.

In the following example, we will see inheritance in JavaScript. We will inherit a few properties of a function in another function.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<form id="form1" runat="server">
<script>
function oil(name, type) {
this.name = name,
this.type = type
}
function localoil(name,type,location) {
oil(name, type);
this.location = location;
}
oil.prototype = localoil.prototype;
localoil.prototype.ShowOils = function () {
console.log("Name:- " + name);
console.log("Type:- " + type);
console.log("Location :- " + this.location);
}
var o = new localoil('Olive', 'Oil','kerala');
o.ShowOils();
</script>
</form>
</body>
</html>

Summary

In this article, we learned about properties and inheritance in JavaScript. In future articles, we will learn a few more interesting concepts in JavaScript.

Inheritance and the Prototype Chain in JavaScript

Reactions

1 Comment

Introduction

Summary