JavaScript也是一種面向對象的開發語言，但和C++，Java，C#所不同的是，它的對象不是基于類（Class），而是基于對象原型（ProtoType)，因此對于來自C++、Java等背景的程序員，初次接觸到JavaScript的面向對象的開發時，開始會有些不適應。而JavaScript語言本身也非常靈活，實現面向對象的方法也很多，不同的框架使用的方法也不同。

對于JavaScript的面向對象的方法和C++、Java面向對象的不同點。舉個簡單的類比，使用C++、Java來建房，是先有藍圖（Class），然后根據這個藍圖（Class）來建房（對象）。而JavaScript是直接建個房（Object）。如果要將個新房，就參考這個建好的房作為原型（prototype)，然后復制一個對象。

Kendo UI不僅僅提供了一些好看的UI組件，而且也提供一個JavaScript構建對象，實現繼承的方法，其形式接近于C++、Java的類繼承方法。

使用kendo.Class.extend創建對象

首先可以創建一個新對象（注意JavaScript中沒有類的概念），可以通過kendo.Class.extend 來定義。

var person = kendo.Class.extend({});

上面代碼創建一個Person對象，但沒有定義Person對象任何屬性和方法。下面可以為Person定義一些屬性和方法（函數），可以通過對象字面量的方法來定義，Javascript對象的屬性或方法都是以Key：value的形式來定義。也使用this來引用對象的方法或屬性。

var Person = kendo.Class.extend({
firstName: ‘Not Set’,
lastName: ‘Not Set’,
isAPrettyCoolPerson: false,
sayHello: function() {
alert(“Hello! I’m “ + this.firstName + ” “ + this.lastName);
}
});

var person = new Person();
person.sayHello();

創建構造函數

也可以為對象添加一個構造函數，Kendo UI使用 init 來定義構造函數 ，這樣在創建新對象時，可以通過構造函數來創建新的對象. 下面代碼重新定義Person對象，并為其添加一個屬性isAPrettyCoolPerson：

var Person = kendo.Class.extend({
firstName: ‘Not Set’,
lastName: ‘Not Set’,
isAPrettyCoolPerson: false,
init: function (firstName, lastName) {
if (firstName) this.firstName = firstName;
if (lastName) this.lastName = lastName;
},

sayHello: function () {
alert(“Hello! I’m “ + this.firstName + ” “ + this.lastName);
}

});

var person = new Person(“John”, “Bristowe”);
person.isAPrettyCoolPerson = true;
person.sayHello();

我們使用這個對象，創建一個名為John、Bristowe的Person，并把它的isAPrettyCoolPerson屬性設為True。

創建一個派生對象

現在我們可以創建Person對象的一個派生對象Parent、Parent對象繼承Person對象 ，然后我們創建一個Dad對象。

var person = new Person(“John”, “Bristowe”);
person.isAPrettyCoolPerson = true;

var Parent = Person.extend({
firstName: ‘Mark’,
lastName: ‘Holland’
});

var myDad = new Parent();
myDad.isAPrettyCoolPerson = true;

myDad.sayHello();
alert(myDad.isAPrettyCoolPerson);

我們再創建一個Child對象，繼承自Parent，要注意的是isCoolPerson 屬性。想想它的值是真還是假呢？

var Child = Parent.extend({});
var me = new Child();
me.firstName = “Burke”;
me.sayHello();
alert(me.isAPrettyCoolPerson);

可以看到me的isAPrettyCoolPerson的值為false, 沒有因為myDad的isAPrettyCoolPerson為True而變為true, 這些因為Child繼承自Parent、Parent缺省的isAPrettyCoolPerson為false, myDad修改的只是某個特定的實例的值，沒有修改作為原型的對象（Parent）的屬性。

本文轉載自

購買正版授權的朋友可以點擊""哦~~~

慧都特邀Kendo UI原廠開發工程師舉行線上公開課，使用該控件的朋友千萬別錯過哦>>