JavaScript中的类与对象

超、凢脫俗 2022-08-18 05:48 296阅读 0赞

对象是对客观事物的抽象

类是对对象的抽象

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>

运行结果

## ![Center][]    ##

## 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();

运行结果

![Center 1][]

在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();

运行结果

![Center 2][]

我们发现每次调用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();

运行结果

![Center 3][]

构造函数与工厂函数的差别： 构造函数并没有创建对象，这里利用了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();

运行结果

![Center 4][]

当调用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();

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

[Center]: /images/20220731/0e0c96dec9f04ec2a58604fdf0f65c5f.png
[Center 1]: /images/20220731/1ec3bd9c4fc44667922ad8dcf01c3a9f.png
[Center 2]: /images/20220731/7b3a270272124e7888a63cbc3df6bd47.png
[Center 3]: /images/20220731/463b4c3944e94498bd19e7aa0fc3e404.png
[Center 4]: /images/20220731/f3ba62ef346d4a82b43cb77367d194f0.png