JavaScript中类的定义方式详解(四种方式)
本文详细解析JavaScript中定义类的四种主要方式:工厂模式、构造函数模式、原型模式以及动态原型模式。通过对比分析各模式的优缺点,重点探讨函数重复创建、实例属性共享及类型检查等核心问题,帮助开发者根据实际需求选择最合适的面向对象编程方案。
JavaScript类定义概述
本文通过具体实例介绍JavaScript中类的定义方法,供读者参考学习。
JavaScript中类的定义主要包含以下四种方式:
工厂方式
1、工厂方式
工厂方式代码示例
function createCar(name,color,price){
var tempcar=new Object;
tempcar.name=name;
tempcar.color=color;
tempcar.price=price;
tempcar.getName=function(){
document.write(this.name+"-----"+this.color+"<br>");
};
return tempcar;
}
var car1=new createCar("工厂桑塔纳","red","121313");
car1.getName();
该方式定义了一个能够创建并返回特定类型对象的工厂函数,表面看起来较为合理,但存在一个小问题。
每次调用该函数时都会创建新的函数 showColor,为解决此问题,我们可以将其移至函数外部。
function getName(){
document.write(this.name+"-----"+this.color+"<br>");
}
在工厂函数内部直接引用该外部函数即可。
具体代码如下:
tempCar.getName = getName;
这种做法虽然避免了函数的重复创建,但使得代码结构看起来不再像对象的方法。
构造函数方式
2、构造函数方式
构造函数方式代码示例
function Car(name,color,price){
this.name=name;
this.color=color;
this.price=price;
this.getColor=function(){
document.write(this.name+"-----"+this.color+"<br>");
};
}
var car2=new Car("构造桑塔纳","red","121313");
car2.getColor();
与第一种方式相比,构造函数方式在函数内部不显式创建对象,而是使用 this 关键字。
当使用 new 关键字调用构造函数时,系统会先创建一个对象,随后通过 this 进行访问。
这种用法与其他面向对象语言较为相似,但它与第一种方式存在相同的缺陷,即导致函数的重复创建。
原型方式
3、原型方式
原型方式代码示例
function proCar(){
}
proCar.prototype.name="原型";
proCar.prototype.color="blue";
proCar.prototype.price="10000";
proCar.prototype.getName=function(){
document.write(this.name+"-----"+this.color+"<br>");
};
var car3=new proCar();
car3.getName();
首先定义一个构造函数 Car,但其内部不包含任何代码,随后通过 prototype 属性添加各类属性。其优点如下:
a. 所有实例中存放的都是指向 showColor 函数的指针,从而解决了函数重复创建的问题。
b. 支持使用 instanceof 操作符来检查对象的类型。
具体代码如下:
alert(car3 instanceof proCar);//true
然而,若添加以下代码:
原型方式缺陷示例
proCar.prototype.drivers = newArray("mike", "sue");
car3.drivers.push("matt");
alert(car3.drivers);//outputs "mike,sue,matt"
alert(car3.drivers);//outputs "mike,sue,matt"
drivers 是指向 Array 对象的指针,此时 proCar 的两个实例将指向同一个数组对象。
动态原型方式
4、动态原型方式
动态原型方式代码示例
function autoProCar(name,color,price){
this.name=name;
this.color=color;
this.price=price;
this.drives=new Array("mike","sue");
if(typeof autoProCar.initialized== "undefined"){
autoProCar.prototype.getName =function(){
document.write(this.name+"-----"+this.color+"<br>");
};
autoProCar.initialized=true;
}
}
var car4=new autoProCar("动态原型","yellow","1234565");
car4.getName();
car4.drives.push("newOne");
document.write(car4.drives);
这是作者较为推荐的方式,所有类的定义均在一个函数内完成,外观上与其他语言的类定义非常相似。该方式既不会重复创建函数,又支持使用 instanceof 进行类型检查。
希望本文所述内容能对大家的JavaScript程序设计有所帮助。
5款主流JS在线运行工具对比:CodePen、JSFiddle与StackBlitz怎么选
2026-11-05 17:04:04
JavaScript入门书籍避坑:这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
JavaScript函数定义的三种方式:声明、表达式与箭头函数
2026-11-05 13:50:55
