JavaScript中类的定义方式详解(四种方式)

作者:代码拾荒时间:2026-10-29 19:06:04浏览:270

本文详细解析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程序设计有所帮助。

作者最新文章