JS定义类或函数

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>

原文地址:https://www.cnblogs.com/xiaoweigogo/p/7803230.html