Kendo UI开发教程(5): 使用 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	var Person = kendo.Class.extend({

2	firstName: 'Not Set' ,

3	lastName: 'Not Set' ,

4	isAPrettyCoolPerson: false ,

5	sayHello: function () {

6	alert( "Hello! I'm " + this .firstName + " " + this .lastName);

7

}

8

});

9

10	var person = new Person();

11	person.sayHello();

创建构造函数

也可以为对象添加一个构造函数，Kendo UI使用 init 来定义构造函数 ，这样在创建新对象时，可以通过构造函数来创建新的对象. 下面代码重新定义Person对象，并为其添加一个属性isAPrettyCoolPerson ，

1	var Person = kendo.Class.extend({

2	firstName: 'Not Set' ,

3	lastName: 'Not Set' ,

4	isAPrettyCoolPerson: false ,

5	init: function (firstName,lastName) {

6	if (firstName) this .firstName =firstName;

7	if (lastName) this .lastName =lastName;

8

},

9

10	sayHello: function () {

11	alert( "Hello! I'm " + this .firstName + " " + this .lastName);

12

}

13

14

});

15

16	var person = new Person( "John" , "Bristowe" );

17	person.isAPrettyCoolPerson = true ;

18	person.sayHello();

我们使用这个对象，创建一个名为John　，Bristowe　的Person,并把它的 isAPrettyCoolPerson 属性设为True。

创建一个派生对象

现在我们可以创建Person对象的一个派生对象Parent，Parent对象继承Person对象 ，然后我们创建一个Dad对象。

1	var person = new Person( "John" , "Bristowe" );

2	person.isAPrettyCoolPerson = true ;

3

4	var Parent = Person.extend({

5	firstName: 'Mark' ,

6	lastName: 'Holland'

7

});

8

9	var myDad = new Parent();

10	myDad.isAPrettyCoolPerson = true ;

11

12	myDad.sayHello();

13	alert(myDad.isAPrettyCoolPerson);

我们再创建一个Child对象，继承自Parent，要注意的是isCoolPerson 属性。想想它的值是真还是假呢？

1	var Child = Parent.extend({});

2	var me = new Child();

3	me.firstName = "Burke" ;

4	me.sayHello();

5	alert(me.isAPrettyCoolPerson);

可以看到me 的isAPrettyCoolPerson 的值为false,没有因为myDad 的 isAPrettyCoolPerson 为True 而变为true,这些因为 Child 继承自Parent ,Parent缺省的 isAPrettyCoolPerson 为false,myDad 修改的只是某个特定的实例的值，没有修改作为原型的对象（Parent）的属性。