文档章节

ExtJS 4.2 03 Javascript 中的类

fokYaland
 fokYaland
发布于 2015/06/05 15:30
字数 1178
阅读 23
收藏 0

参考文章:

http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html

http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html


ExtJS 比较难入门的原因,主要是因为其中用到了Javascript 中面向对象方面的东西,Extjs中有大量的类,而在实际使用时,也需要继承Extjs标准类。我们先了解下Javascript中类相关的知识。Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类)。这就导致Javascript的Object模型很独特,和其他语言都不一样。

生成对象的原始模式

定义类最简单的方式就是用大括号,我们把猫看成一个对象,它有"名字"和"颜色"两个属性。

var cat1 = {
            name : '大毛',
            color : '黄色'
};
console.dir(cat1)

这就是最简单的封装了,把两个属性封装在一个对象里面。

构造函数模式

为了解决从原型对象生成实例的问题,Javascript提供了一个构造函数(Constructor)模式。所谓"构造函数",其实就是一个普通函数,但是内部使用了this变量。对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例对象上。

function Cat(name,color){
    this.name = name;
    this.color = color;
}
var cat1 = new Cat('大毛','黄色');
console.dir(cat1);


Javascript 规定,每个对象都有一个constructor属性,指向构造函数。

alert(cat1.constructor == Cat); // true


Javascript还提供了一个 instanceof 运算符,验证类与实例对象之间的关系。

alert(cat1 instanceof Cat); // true


构造函数方法很好用,但是存在浪费内存的问题。对象实例之间不能共享数据。Javascript规定,每一个构造函数都有一个prototype属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继承。可以把那些不变的属性和方法,直接定义在prototype对象上。

function Cat(name,color){
    this.name = name;
    this.color = color;
}
Cat.prototype.type = '猫科动物';
Cat.prototype.eat = function () {
    alert('吃.....')
};
var cat1 = new Cat('大毛','黄色');
var cat2 = new Cat('二毛','黄色');
alert(cat1.eat == cat2.eat);

所有实例的type属性和eat()方法,其实都是同一个内存地址,指向prototype对象,因此就提高了运行效率.

每个实例对象都有一个hasOwnProperty()方法,用来判断某一个属性到底是本地属性,还是继承自prototype对象的属性

console.info(cat1.hasOwnProperty("name"));
console.info(cat1.hasOwnProperty("type"));

in运算符可以用来判断,某个实例是否含有某个属性,不管是不是本地属性。in运算符还可以用来遍历某个对象的所有属性。

console.info("name" in cat1);
for(var prop in cat1){
    console.info('cat1['+prop+']='+cat1[prop]);
}

构造函数的继承

Javascript 中的继承全靠一种奇特的原型链(prototype chain)来实现。前面已经介绍了,Javascript 规定每个构造函数都有一个prototype 属性,这个prototype属性指向的对象的所有属性和方法,都可以被这个构造函数所有。

function Animal(){
    this.species = "动物";
}
function Cat(name,color){
    this.name = name;
    this.color = color;
}

想让Cat 是Animal的子类,可以通过Cat 的 prototype 属性实现继承。

Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;
var cat1 = new Cat("大毛","黄色");
alert(cat1.species); // 动物

第一行,把 Cat 的原型属性 prototype 指向 Animal,这 Cat 就可以访问到 Animal 中的属性和方法。

第二行,其实是手工纠正。原因是:每个对象都有一个constructor属性,指向它的构造函数。其实每个prototype 也有一个constructor属性。同时实例的constructor属性,默认调用prototype对象的constructor属性。如果重新指定了prototype属性,那么实例的constructor属性 和 prototype对象的constructor属性就不一致了。所以就需要手工纠正。

这是很重要的一点,编程时务必要遵守。即如果替换了prototype对象,下一步必然是为新的prototype对象加上constructor属性,并将这个属性指回原来的构造函数。

o.prototype = {};
o.prototype.constructor = o;


© 著作权归作者所有

fokYaland
粉丝 4
博文 68
码字总数 3062
作品 0
东城
私信 提问
ExtJS 4.2 发布

ExtJS 4.2 下载地址:http://www.sencha.com/products/extjs/download/ext-js-4.2.0/2142 ExtJS 主要用来开发RIA富客户端的AJAX应用,主要用于创建前端用户界面,与后台技术无关的前端ajax框...

oschina
2013/03/15
10.6K
31
ExtJS 4.2.1 发布

ExtJS 4.2 下载地址:http://www.sencha.com/products/extjs/download/ext-js-4.2.1/2281 ExtJS 主要用来开发RIA富客户端的AJAX应用,主要用于创建前端用户界面,与后台技术无关的前端ajax框...

chpinck
2013/05/30
5.4K
14
Extjs MVC开发模式详解

在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题。Extjs为了解决这种问题,在Extjs 4.x版本中引入了MVC开发模式,开始将一个JS(Extjs)应用程序分割成...

鱼煎
2017/11/02
0
0
为Zend Studio (Eclipse)安装Spket插件,以支持ExtJS 4.0代码自动提示

之前在Zend Studio 7.0中安装过ExtJS2.0的自动提示,现在的软件升级太快,ExtJS4.0都出来了,无奈选择升级,不升还好,这一升搞了我半天的时间,怎么弄都 没提示了,干啥都得花点时间就好比这...

BabyMason
2015/02/06
0
0
[翻译]Ext JS 教程-开始使用 ExtJS 4

入门 1. 需求 1.1 网页浏览器 ExtJS 4 支持所有主流的浏览器,从IE 6 到最新的谷歌Chrome。在开发期间,我们建议你使用下面这些浏览器,以获得更好的调试体验。 Ø Google Chrome 10+ Ø Ap...

LeoXu
2013/05/30
0
3

没有更多内容

加载失败,请刷新页面

加载更多

Linux使用源码包安装软件

前言: 最近整理一些以前的学习笔记。 过去都是存储在本地,此次传到网络留待备用。 源码包 Linux软件多数免费、开源,是开发人员编写的,具有很强可读性的一组相关代码文本。 源码包 --> 编...

迷失De挣扎
今天
2
0
IPv4如何转换为IPv6?

ipv6已经逐渐在应用,现在已经有很多的运营商支持ipv6,前天我们也发布了如何让电脑使用ipv6地址?有很多朋友在问?ipv6有什么作用,它的表示方式是什么,今天我们来一起来详细了解下ipv6相关计...

xiangyunyan
今天
3
0
小白讲网络安全系列

注入攻击防护 XSS注入 SQL注入 命令注入 文件上传 文件解压缩 CSRF防护 对称加密 非对称加密 数字证书 数字签名 完整性校验 消息验证码 单向散列Hash函数 口令单向加密算法 审计日志 认证鉴权...

一刀
今天
2
0
MYSQL 嵌套事务(SAVEPOINT) 与Spring 事务传播

摘要 savepoint 关键字可以实现嵌套事务。结合savepoint关键字,更方便理解spring的事务传播。 事务嵌套 初始化表脚本 drop table t;create table t(a int, primary key(a)); 开启事务 my...

liangxiao
今天
4
0
Chrome OS 更新新版本可让Linux访问USB连接的Android设备

谷歌再次为Chrome OS带来了重大版本更新,使版本号达到了75。本次更新的一大亮点就是允许在Chrome OS上运行的Linux能够识别通过USB方式连接的Android设备,能够让用户使用Linux进行调试等等。...

linuxCool
昨天
16
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部