ExtJS 4.2 03 Javascript 中的类

参考文章:

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模型很独特，和其他语言都不一样。

生成对象的原始模式

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

?

1 2 3 4 5

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

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

构造函数模式

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

?

1 2 3 4 5 6

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

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

?

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

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

?

1	alert(cat1  instanceof  Cat);  // true

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

?

1 2 3 4 5 6 7 8 9 10 11

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对象的属性

?

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

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

?

1 2 3 4

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

构造函数的继承

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

?

1 2 3 4 5 6 7

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

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

?

1 2 3 4

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属性，并将这个属性指回原来的构造函数。

?

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