OOP In WinJS #4 : Inheritance

In our previous article, we discussed Classes. We defined a few classes, instantiated them, and used an example. Before starting with part four, let's first look at the previous parts of the series.

• OOP in WinJS #1: Namespaces
• OOP In WinJS #2: Nested Namespaces
• OOP in WinJS #3: Classes

This article will cover how to inherit from a base class with all properties without redefining them. We'll be using Universal Windows Apps for showing the demo.

Generally a class in inherited using this method:

var InheritedClass = WinJS.Class.derive(BaseClass,
    function (properties) {
        //properties section
    });

WinJS has a function named "derive" to create new classes that inherit from base class.

Let's make an example to understand how to use it.

Building the App

Create a class with some members and then create inherited classes from base classes changing properties. Don't use base class to create new instances.

Solution

We shall create a base class named Employee:

var Employee = WinJS.Class.define(
    function (name, surname, age, profession, nationality, salary) {
        this.name = name;
        this.surname = surname;
        this.age = age;
        this.profession = profession;
        this.nationality = nationality;
        this.salary = salary;
    });

This will be our base class.

According to the scenario; we shall never create instances from that. So,what we are going to do is create inherited classes that derive from base class:

var TurkishEmp = WinJS.Class.derive(Employee,
    function (name) {
        this.name = name;
        this.nationality = "Turkey";
    });

var IndianEmp = WinJS.Class.derive(Employee,
    function (name) {
        this.name = name;
        this.nationality = "India";
    });

var EnglishEmp = WinJS.Class.derive(Employee,
    function (name) {
        this.name = name;
        this.nationality = "UK";
    });

Now let's create our instances:

var emp1 = new TurkishEmp("Ibrahim");
var emp2 = new IndianEmp("Suthish");
var emp3 = new EnglishEmp("Tommy");

And show them their values in JavaScript Console:

console.log(emp1.name + " is from " + emp1.nationality);
console.log(emp2.name + " is from " + emp2.nationality);
console.log(emp3.name + " is from " + emp3.nationality);

Running the app will display results as shown below:


Now that we made a simple inheritance sample, why don't we try something extra?

Let's create two more inherited classes:

var FreelancerEmp = WinJS.Class.derive(TurkishEmp,
    function (name, surname) {
        this.name = name;
        this.surname = surname;
        this.salary = 2400;
    }
    );

var OutSourcing = WinJS.Class.derive(EnglishEmp,
    function (name, surname) {
        this.name = name;
        this.surname = surname;
        this.salary = 3000;

    }
    );

These classes inherited from another inherited class which is now base class for them.

What we are going to do is change their salaries as we see fit. We broke the assigned value there.

var emp4 = new FreelancerEmp("Semih", "Temih");
var emp5 = new OutSourcing("Hasan", "Vehid");

emp4.salary = 3000;
emp5.salary = 4000;

The reason for doing this sample is to show you how you can create inherited classes endlessly.

It's up to your structure.

 

Read more articles on Universal Windows App:

• Create Your First UWP App
• Convert PDF Files To Images In Windows 10 Universal App