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