博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Kendo UI开发教程:使用Kendo UI库实现对象的继承
阅读量:7111 次
发布时间:2019-06-28

本文共 2370 字,大约阅读时间需要 7 分钟。

hot3.png

也是一种面向对象的开发语言,但和,Java,C#所不同的是,它的对象不是基于类(Class),而是基于对象原型(ProtoType),因此对于来自C++、Java等背景的程序员,初次接触到JavaScript的面向对象的开发时,开始会有些不适应。而JavaScript语言本身也非常灵活,实现面向对象的方法也很多,不同的框架使用的方法也不同。

对于JavaScript的面向对象的方法和C++、Java面向对象的不同点。举个简单的类比,使用C++、Java来建房,是先有蓝图(Class),然后根据这个蓝图(Class)来建房(对象)。而JavaScript是直接建个房(Object)。如果要将个新房,就参考这个建好的房作为原型(prototype),然后复制一个对象。

不仅仅提供了一些好看的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。

>Kendo UI开发教程

创建一个派生对象

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

>Kendo UI开发教程

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

1

2

3

4

5

var Child = Parent.extend({});

var me = new Child();

me.firstName = “Burke”;

me.sayHello();

alert(me.isAPrettyCoolPerson);

>Kendo UI开发教程

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

本文转载自

转载于:https://my.oschina.net/u/2317468/blog/760420

你可能感兴趣的文章
shell脚本中的数据传递方式
查看>>
Shiro系列(0) - 权限管理在J2EE企业级开发中的应用与实战
查看>>
Gdevops峰会归来
查看>>
[20170215]ORA-00088与DG Gap监测与解决4
查看>>
根据输入的日期,控制台打印格式化日历
查看>>
前端性能影响思维导图
查看>>
过滤器控制用户登录
查看>>
MVC3 Razor视图引擎的基础语法
查看>>
CCan's sign in to Appstore - This action could not be completed
查看>>
Linux下安装JDK及其配置环境变量
查看>>
6、Eternal框架-渲染者
查看>>
麻省:第17.18课
查看>>
maven项目打包时去除dependency-reduced-pom.xml文件
查看>>
Win10下Eclipse插件EasyShell兼容问题处理
查看>>
backbone总结
查看>>
C Primer Plus 第4章 字符串和格式化输入输出--4.1前导程序
查看>>
NSUserDefaults 存储数据到本地,NSUserDefaults 使用
查看>>
tail -f :无法监视 xxx文件 设备上没有空间
查看>>
让XP远程支持网络身份验证
查看>>
spark运用逻辑回归算法操作Titanic数据集
查看>>