JavaScript中的类与对象

对象是对客观事物的抽象

类是对对象的抽象

JavaScript是基于对象的语言，它拥有许多创建类和对象的方法

JavaScript中允许我们在对象创建之后进行定义对象的属性，我们可以这样来写

<span style="font-size:18px;">//定义一个box对象
var box = new Object;
//对对象的属性进行定义
box.color = 'blue';
box.size = 30;
box.number = 22;
//最后一个属性是一个指向函数的指针，这个属性是一个方法
box.showMessage = function(){
	console.log(this.color);
	console.log(this.size);
	console.log(this.number);
}
//调用showMessage方法，使用对象box
box.showMessage();</span>

运行结果

1.工厂方式

当我们想要创建多个box实例时，不妨将上面例子中创建box对象的操作进行封装，即为工厂函数（factory function）

function createBox(){
	//定义一个box对象
	var box = new Object;
	//对对象的属性进行定义
	box.color = 'blue';
	box.size = 30;
	box.number = 22;
	//最后一个属性是一个指向函数的指针，这个属性是一个方法
	box.showMessage = function(){
		console.log(this.color);
		console.log(this.size);
		console.log(this.number);
	}
	return box;
}
var box1 = createBox();
var box2 = createBox();
box1.showMessage();
console.log('\n');
box2.showMessage();

运行结果

在createBox函数中，函数的最后一句返回了box对象，每一次调用函数时，都会创建新的box对象。

也可以这样，给createBox函数添加参数，这样可以令不同的对象有相同的属性却拥有不同的值

function createBox(color, size, number){
	//定义一个box对象
	var box = new Object;
	//对对象的属性进行定义
	box.color = color;
	box.size = size;
	box.number = number;
	//最后一个属性是一个指向函数的指针，这个属性是一个方法
	box.showMessage = function(){
		console.log(this.color);
		console.log(this.size);
		console.log(this.number);
	}
	return box;
}
var box1 = createBox('blue', 33, 22);
var box2 = createBox('red', 22, 33);
box1.showMessage();
console.log('\n');
box2.showMessage();

运行结果

我们发现每次调用createBox函数时都会创建新的showMessage函数，然而事实上每个对象都是共享的一个函数，为了解决这个问题，我们可以这样，即在工厂函数外面定义对象的方法

function createBox(color, size, number){
	//定义一个box对象
	var box = new Object;
	//对对象的属性进行定义
	box.color = color;
	box.size = size;
	box.number = number;
	//通过属性指向方法
	box.showMessage = showMessage;
	return box;
}
function showMessage(){
	console.log(this.color);
	console.log(this.size);
	console.log(this.number);
}
var box1 = createBox('blue', 33, 22);
var box2 = createBox('red', 22, 33);
box1.showMessage();
console.log('\n');
box2.showMessage();

2.构造函数

先看一个构造函数的例子

依然是box...

function Box(color, size, number){
	this.color = color;
	this.size = size;
	this.number = number;
	this.showMessage = showMessage;
}
function showMessage(){
	console.log(this.color);
	console.log(this.size);
	console.log(this.number);
}

var box1 = new Box('pink', 1, 3);
var box2 = new Box('yellow', 2, 3);
box1.showMessage();
console.log('\n');
box2.showMessage();

运行结果

构造函数与工厂函数的差别： 构造函数并没有创建对象，这里利用了this关键字

和工厂函数一样，可能会出现重复创建相同的函数问题，所以上面的例子也才采用了将函数放在外部的方法，虽然可以避免，但是在这样做在语义上并没有什么意义

下面我我们来看一下原型模式

3.原型方式

在这之前先看一下prototype，每一个函数都是一个对象，函数对象都有一个子对象prototype，prototype表示该函数的原型，表示类（事以函数的形式定义的）的成员集合。

//首先用空构造函数来定义类名
function Box(){

}
//注意，这里所有的属性全部被赋予给了prototype
Box.prototype.color = 'blue';
Box.prototype.size = 22;
Box.prototype.number = 34;
Box.prototype.showMessage = function(){
	console.log(this.color);
	console.log(this.size);
	console.log(this.number);
}
var box1 = new Box();
var box2 = new Box();
box1.showMessage();
console.log('\n');
box2.showMessage();

运行结果

当调用Box函数时，原型的所有属性都被赋予给要创建的对象

然而使用原型函数，并没有参数，所以无法利用传参的方式修改实例的值

4.混合的构造函数/原型法

function Box(color, size, number){
	this.color = color;
	this.size = size;
	this.number = number;
}
Box.prototype.showMessage = function(){
	console.log(this.color);
	console.log(this.size);
	console.log(this.number);
}
var box1 = new Box('blue', 2, 2);
var box2 = new Box('red', 2, 4);
box1.showMessage();
console.log('\n');
box2.showMessage();

这种方法是目前使用比较广泛的一种方法