在Javascript定义类
在javascript中有多种方法可以定义一个类
1.工厂方法
function createDuck()
{
var temp = new Object;
temp.address = "bj";
temp.color = "black";
temp.show = function()
{
alert(temp.color);
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
return temp;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
var d1 = createDuck();
var d2 = createDuck();
在上面的代码中我们定义了一个createDuck方法,在这个方法里我们通过new Object来创建一个新的对象,并给它添加新的属性和方法,最后返回创建的对象。
在下面我们通过这个方法来将生成的对象赋给变量。但是这种生成对象的方式有一个很严重的问题就是每次创建新对象时都会重复创建show函数,这意味着每个对象事实上都拥有一个不同的show方法,要解决这个问题我们需要在createDuck方法前再创建一个show方法,而后在createDuck方法内部通过赋予对象指针的方式来解决。
function Show()
{
alert(this.color);
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
function createDuck()
{
var temp = new Object;
temp.address = "bj";
temp.color = "black";
temp.show = Show;
return temp;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
var d1 = createDuck();
var d2 = createDuck();
但是用这种方式创建看起来不是那么的面向对象了。
2.构造函数方式
这样就有第二种构造函数方式来创建类,构造函数方式和工厂方法方式类似,在定义时选择好类名来创建如:
function Duck()
{
this.address = "bj";
this.color = "black";
this.show = function()
{
alert(this.color);
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
var d1 = new Duck();
var d2 = new Duck();
不过上面这种方式和我们在工厂方法里创建对象时的第一个示例有同样的问题,那就是重复创建了show方法。虽然同样可以用第二个示例那样来解决这个问题,不过那样的话同样显的不那么的面向对象了。
3.原型方式
我们先看看原型方式是怎么样的
function Duck()
{}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
Duck.prototype.address = 'bj';
Duck.prototype.color = 'black';
Duck.prototype.show = function()
{
alert(this.color);
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
var d1 = new Duck();
var d2 = new Duck();
在这种方式里很好的解决了前面提到的这几个问题,并且你通过instanceOf方法查看可以发现你创建的对象类型就是Duck类型。这样看来我们似乎已经找到了最佳折创建类的方式,不过遗憾的是这种方式也不是那么的完美的。假如我们想要在构造函数里添加参数,就会发现没办法办到。那么怎么办呢,我们再来看看第四种方式
4.混合构造函数和原型方式
在这种方式里我们通过构造函数方式来确定类的属性,通过原型方式来定义类的方法。
funtion Duck(address,color)
{
this.address = address;
this.color = color;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
Duck.prototype.show = function()
{
alert(this.color);
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
var d1 = new Duck('bj','black');
var d2 = new Duck('jb','white');
这种方式应该是目前javascript当中比较好的一种创建类对象的方式。
1.工厂方法
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
在下面我们通过这个方法来将生成的对象赋给变量。但是这种生成对象的方式有一个很严重的问题就是每次创建新对象时都会重复创建show函数,这意味着每个对象事实上都拥有一个不同的show方法,要解决这个问题我们需要在createDuck方法前再创建一个show方法,而后在createDuck方法内部通过赋予对象指针的方式来解决。
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2.构造函数方式
这样就有第二种构造函数方式来创建类,构造函数方式和工厂方法方式类似,在定义时选择好类名来创建如:
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3.原型方式
我们先看看原型方式是怎么样的
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4.混合构造函数和原型方式
在这种方式里我们通过构造函数方式来确定类的属性,通过原型方式来定义类的方法。
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)