Ext学习系列一（JavaScript 对象设计）

目录

前言 

1         对象的创建

1.1    单一创建的方式

1.2 构造函数创建方式

2         对象中的组成元素

3         在对象中的ProtoType功能说明

4         对象继承

 

前言

在javaScript中，对象为属性的集合，但JavaScript中的对象和我们经常接触到的面向对象语言Java，C# 不一样的，后者是基于类，而JavaScript是基于原型的语言，在javasript 中，对象中包含了自身的一个自身的prototype，写到这我们就有一个疑问，在JavaScript中对象组成的结构是什么呢

 

Object 对象

属性1

属性值1

属性2

属性值2

prototype properties

constructor

function Create()

prototype
原型属性	属性值

 

                   Object对象结构图

上面是JavaScript中的object对象结构图，对于具体的细节在这边就不一一细说了

 

1  对象的创建

1.1   单一创建方式

单一创建方式的应用场景为在应用域中我们只需要一个对象实例，这就和我们常用的singleton模式有相似之处.

//定义对象

Var singletonObject= {

 Name:’macroxu’,

 ShowName:function{

   Alert(this.Name);

}

}

 

//调用方式

singletonObject.ShowName();

 

1.2   构造函数创建的方式

在跟多的情况下我们需要同一类型的多个对象时，我们就需要用构造器，和new的方式来定义并生成对象了

    //定义对象

var Animal =function(){

    this.Name='No define Name ';

    this.Age=0;

    this.Move=function(){alert(this.Name+' is Moving');}

}

 

//调用的方法

 dog = new Animal();

 dog.Name ='pipi';

 dog.Age =5;

dog.Move();

 

2        对象中的组成元素

在 JavaScript中对象和function函数是几乎对等的，在对象中可以包含自定义变量，或者

对应的函数。在对象的中属性运行时可以动态添加，这是源于JavaScript是一种解析性语言。

下面是在Animal对象，在运行时动态添加一个行为Print.

 //创建Animal对象 dog

dog = new Animal();

 dog.Name ='pipi';

 dog.Age =5;

 dog.Move();

 

 //这是运行时，动态添加的行为 Print

  dog.Print=function(){alert('this is Added function in runtime');};

 dog.Print();

 

3        在对象中的ProtoType功能说明

ProtoType 是指对象所对应的原型，ProtoType 中包含了特定的类型对象的一系列的属性，

比如 dog对象的ProtoType 为Animal，在dog的ProtoType中包含了三个对象，Age，name，行为Move。

在这里面我们很自然的想起了设计模式中的原型模式。在原型模式中，客户调用原型模式 是为了获得一个对象的clone对象，但是这和JavaScript中的原型是不一样的，JavaScript中的ProtoType是作为新生成的object的组成的一部分，在生成的Object，将通过原型列表指向对应的原型ProtoType。

 

  在实际的运用中，ProtoType能给我们带来哪些功能呢

3.1   设计共享的方法

我们现在要在Dog的ProtoType中添加一个共享方法 AddOneYear 给动物加一岁。

     //给原型中添加一个AddOneYear 行为

Animal.prototype.AddOneYear=function(){this.Age+=1;  };

     //给狗对象 增加一岁

dog.AddOneYear();

alert(dog.Age);

 

4        对象继承

现在我们定义一个horse对象继承了Animal，并且包含了Horse的属性HorseColor

 

var horse =function(){

    this.HorseColor ='red';

 }

 horse.prototype=new Animal();

 

 WhiteHorse =new horse();

 WhiteHorse.HorseColor ='White';

 WhiteHorse .Age =4;

WhiteHorse.Name ='闪电';