In this example we will understand the concept of inheritance in JavaScript.
Property and properties inheritance in JavaScript
In this article we will learn the concept of inheritance in
JavaScript. We know that JavaScript is class less language which means there is no
class in JavaScript, but we can implement class type using function and object.
It is possible to implement the concept of inheritance in those functions and
object. In this article we will try to understand how to implement class type using function and object.
In JavaScript ,a prototype is a property of function and of
object that are created by constructor functions. The prototype of a function
is an object. It’s main use is when a function is used as a constructor.
Prototype and property of function
In this example we will understand the concept of property
and prototype of class. Have a look on below example.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
<form id="form1" runat="server">
<script>
function person(name,surname) {
//Property of person function
this.name = name;
this.surname = surname;
}
var p = new person('Sourav','Kayal');
console.log(p.name);
console.log(p.surname);
</script>
</form>
</body>
</html>
In this example we have created person class using function
and it has two properties they are name and surname. We are getting default
value of them.
Adding property in run time
We can add additional property of function at time of object
creation. In this example we are adding “place” property with person object at
run time. Here is sample example
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
<form id="form1" runat="server">
<script>
function person(name,surname) {
//Property of person function
this.name = name;
this.surname = surname;
}
var p = new person('Sourav', 'Kayal');
person.prototype.place = "Bangalore";
console.log(p.name);
console.log(p.surname);
console.log(p.place);
</script>
</form>
</body>
</html>
Inherit property of function to another function.
In this example we will see the example of inheritance in
JavaScript. We will inherit few properties of a function to another function.
Have a look on below code.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
<form id="form1" runat="server">
<script>
function wine(name, type) {
this.name = name,
this.type = type
}
function localwine(name,type,location) {
wine(name, type);
this.location = location;
}
wine.prototype = localwine.prototype;
localwine.prototype.ShowWine = function () {
console.log("Name:- " + name);
console.log("Type:- " + type);
console.log("Location :- " + this.location);
}
var w = new localwine('Kingfisher', 'Beer','Bangalore');
w.ShowWine();
</script>
</form>
</body>
</html>
Conclusion:-
In this article we have learned the concept of property and inheritance in JavaScript , Hope you have understood the concept. In coming articles we will learn few more interesting concepts and design patterns in JavaScript