JS定义类或函数

Posted 2020-10-15 我是谁的谁

1、工厂模式
<script>
function createCar(){
var oCar = new Object();
oCar.color="red";
oCar.doors=4;
oCar.showColor=function(){
alert(this.color);
}
return oCar;
}

//调用
var oCar1 = createCar();
var oCar2 = createCar();
oCar1.color = "black";
oCar1.showColor();
oCar2.showColor();
</script>
使用new关键字已经深入人心，因此我们使用上面的方法去定义总感觉别扭，
并且每次调用时都去创建新的属性以及函数，功能上也不实际。
下来我们看看构造函数的形式定义类。

2、构造函数
<script>
function Car(color,doors){
this.color = color;
this.doors = doors;
this.showColor = function(){
alert(this.color);
}
}

//调用
var car1 = new Car("red",4);
var car2 = new Car("blue",4);
car1.showColor();
car2.showColor();
</script>
每次new 对象时都会创建所有的属性，包括函数的创建，也就是说多个对象完全独立，
我们定义类的目的就是为了共享方法以及数据，但是car1对象与car2对象都是各自独立的属性与函数，
最起码我们应该共享方法。这就是原型方式的优势所在。

3、原型方式
<script>
function Car(){}
Car.prototype.color="red";
Car.prototype.doors=4;
Car.prototype.drivers = new Array("Tom","Jerry");
Car.prototype.showColor=function(){
alert(this.color);
}

//调用
var car1 = new Car();
var car2 = new Car();
call.showColor();
car2.showColor();
alert(car1.drivers);
car1.drivers.push("stephen");
alert(car1.drivers); //结果：Tom,Jerry,stephen
alert(car2.drivers); //结果：Tom,Jerry,stephen
//可以用json方式简化prototype的定义:
Car.prototype =
{
color: "red",
doors: 4,
drivers: ["Tom", "Jerry",‘safdad‘],
showColor: function() {
alert(this.color);
}
</script>
首先这段代码的构造函数，其中没有任何代码，接下来通过对象的prototype属性添加属性定义Car对象的属性。
这种方法很好，但是问题是Car的对象指向的Array指针，Car的两个对象都指向同一个Array数组，
其中一个对象car1改变属性对象的引用（数组Array）时，另一个对象car2也同时改变，这是不允许的。
同时该问题也表现在原型不能带任何初始化参数，导致构造函数无法正常初始化。
这需要另一种方式来解决：那就是混合的构造函数/原型模式。

4、混合的构造函数、原型模式
<script>
function Car(color,doors){
this.color = color;
this.doors = doors;
this.drivers=new Array("Tom","Jerry");
}
Car.prototype.showColor=function(){
alert(this.color);
}
//调用
var car1 = new Car(‘red‘,4);
var car2 = new Car(‘blue‘,4);
car1.showColor();
car2.showColor();
alert(car1.drivers);
car1.drivers.push("stephen");
alert(car1.drivers); //结果：Tom,Jerry,stephen
alert(car2.drivers); //结果：Tom,Jerry
alert(car1 instanceof Car);
</script>