最新最全的
KendoUI技术文章

Kendo UI开发教程(5): 使用 Kendo UI库实现对象的继承

Contents 1使用kendo.Class.extend 创建对象 2创建构造函数 3创建一个派生对象 JavaScript 也是一种面向对象的开发语言,但和C++,Java,C#所不同的是,它的对象不是基于类(Class),而是基于对象原型(ProtoType

Contents

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();
复制

20130621002

创建构造函数

也可以为对象添加一个构造函数,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。

20130621003

创建一个派生对象

现在我们可以创建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);
复制


20130621004

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

  1. var Child = Parent.extend({});
  2. var me = new Child();
  3. me.firstName = “Burke”;
  4. me.sayHello();
  5. alert(me.isAPrettyCoolPerson);
复制

20130621005

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

未经允许,不得转载本站任何文章:KendoUI中文网 » Kendo UI开发教程(5): 使用 Kendo UI库实现对象的继承

分享到:更多 ()

评论 抢沙发

评论前必须登录!