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模式有相似之处.

Code

1.2  构造函数创建的方式

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

[copy to clipboard]

//定义对象

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.

[copy to clipboard]

//创建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 给动物加一岁。

[copy to clipboard]

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

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

//给狗对象 增加一岁

dog.AddOneYear();

alert(dog.Age);

4        对象继承

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

[copy to clipboard]

var horse =function(){

    this.HorseColor ='red';

}

horse.prototype=new Animal();



WhiteHorse =new horse();

WhiteHorse.HorseColor ='White';

WhiteHorse .Age =4;

WhiteHorse.Name ='闪电';