博客

Javascript-类的基本定义方式

经典模式

直接生成对象实例，并操作实例

//定义
var aCar = new Object();
aCar.color = "red";
aCar.doors = 4;
aCar.showColor = function() {}
//调用
aCar.showColor();

工厂模式

其实就把上面的代码用过函数封装一下

//定义
function createCar(color,doors){
  var aCar = new Object();
  aCar.color = color;
  aCar.doors = doors;
  aCar.showColor = function() {alert(this.color);};
  return aCar;
}
//调用
bCar = createCar('red',4);
bCar.showColor();

混合工厂模式

函数名直接用类名，然后用了关键字new，其实这样写仅仅是好看一些，和上面的工厂方法没有本质区别。

//定义
function car(color,doors){
  var aCar = new Object();
  aCar.color = color;
  aCar.doors = doors;
  aCar.showColor = function() {alert(this.color);};
  return aCar;
}
//调用
bCar = new car('red',4);
bCar.showColor();

构造模式

//定义
function car(color,doors){
  this.color = color;
  this.doors = doors;
  this.showColor = function() {alert(this.color);};
}
//调用
bCar = new car('red',4);
bCar.showColor();

 

和上面相比，少了2句：var aCar = new Object() 和 return aCar 。实际上关键字 new 默认执行了一个操作：this = new Object() ，而this会作为构造函数的默认返回值。

 

原型模式

//定义
function car(){}
car.prototype.color = 'red';
car.prototype.doors = 4;
car.prototype.showColor = function() {alert(this.color);};

//调用
bCar = new car();
bCar.showColor();

 

动态原型模式

定义并判断类的静态属性_initialized，在构造函数内部动态定义修改类原型。

 

/定义
function car(color,doors) {
    this.color = color;
    this.doors = doors;
    if (typeof car._initialized == "undefined") {
        car.prototype.showColor = function() {
            alert(this.color);
        };
    }
    car._initialized = true;
}
//调用
aCar = new car('red',4);
aCar.showColor();

总结：

这些是JavaScript类定义的几种基本模式，实际每种模式下定义出的属性和类都是有区别的，经典模式和工厂模式因为不符合OOP的语法习惯，基本没有人用了。我们通常使用构造模式和原型模式的混合定义类

目前最流行的也是最实用的类定义结构如下：

//用构造模式定义类的构造器和属性
function car(color,doors){
	//用构造模式定义属性
	this.color = color;
	this.doors = doors;
}

//用原型模式定义方法
car.prototype.showColor = function(){
	alert(this.color);
};

//这是静态属性
car.type = 'vehicle';

aCar = new car('red',4);
aCar.showColor();

1.使用构造模式定义类的构造函数和非函数属性

2.使用原型模式定义类的函数属性（方法）

3.可以通过ClassName.name的方式定义静态属性

4.函数（方法）在本质上也是一种属性，有关各种属性定义方式的区别可以参看后面的参考章节。

参看章节：

http://blog.csdn.net/avon520/archive/2009/01/17/3819751.aspx

Javascript类- 几种属性的定义方式及区别

Javascript类-构造方法和原型方法的区别

 

Tags:

发表评论