Property and properties inheritance in JavaScript

Sourav.Kayal
Posted by in JavaScript category on for Beginner level | Points: 250 | Views : 5425 red flag

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

 

 

Page copy protected against web site content infringement by Copyscape

About the Author

Sourav.Kayal
Full Name: Sourav Kayal
Member Level: Silver
Member Status: Member,MVP
Member Since: 6/20/2013 2:09:01 AM
Country: India
Read my blog here http://ctrlcvprogrammer.blogspot.in/
http://www.dotnetfunda.com
I am .NET developer working for HelixDNA Technologies,Bangalore in healthcare domain. Like to learn new technology and programming language. Currently working in ASP.NET ,C# and other microsoft technologies.

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)