Kendo UI開發教程：使用Kendo UI庫實現對象的繼承

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 來定義。

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

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

1 2 3 4 5 6 7 8 9 10 11

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：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

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對象。

1 2 3 4 5 6 7 8 9 10 11 12 13

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 屬性。想一想它的值是真仍是假呢？

1 2 3 4 5

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中文網