Learn more about Kendo UI here

In this post we will take a look on JavaScript Inheritance using Kendo UI. To start with you create JavaScript object using Literals as following,

var Vehicle = {

model: "car",
 color: "red",
 sayGreeting: function () {

alert(this.model + this.color);
 }

};

There are other two ways to create JavaScript object also exists

1. Using new operator
2. Using Object.Create() static method.

Learn more about Objects in JavaScript here

Kendo UI gives you different syntax to create object and for inheritance.

Kendo UI gives you different syntax to create a JavaScript Object. You can create same Vehicle object using Kendo UI as below,

 var Vehicle = kendo.Class.extend({

model: "car",
 color: "red",
 sayGreeting: function () {

alert(this.model + this.color);
 }

});

You can use object created using Kendo UI as below,

var v = new Vehicle();
 v.sayGreeting();

You will get output as below,

In kendo UI , you can create object with Constructor as well. Using init method you can add a constructor to object. In below code snippet we are creating object with constructor.

var Vehicle = kendo.Class.extend({

model: "car",
 color: "red",
 init: function (model, color)
 {
 if(model) this.model = model;
 if(color) this.color = color;

},
 sayGreeting: function () {

alert(this.model +" "+this.color);
 }

});

Now you can create object passing with constructor as below,

 var v = new Vehicle("truck", "black");
 v.sayGreeting();

Above we are creating object passing argument to constructor and then calling sayGreeting() function as well. As output you will get alert message.

Now we can extend object using extend method.

var luxuryVehicle = Vehicle.extend(
 {
 brand: "bmw",
 price : "23560$"

});

As you see that we added two more properties in child object. Let us go ahead and create a new instance of this object.

var a = new luxuryVehicle();
 a.color = "dark grey"
 a.sayGreeting();

Above we are overriding color property of parent class and calling method of parent class. As a output you will get overridden value of color and parents value for model.

In this way you can work with object and inheritance in JavaScript using Kendo UI. I hope you find this post useful. Thanks for reading.

Learn more about Kendo UI here