首页 > 网络编程 > JavaScript > javascript技巧 > JS中类class详解

JavaScript中类(class)的介绍和应用举例详解

2025-01-06 10:19:23 作者：白菜不太菜

这篇文章主要介绍了JavaScript中类(class)介绍和应用的相关资料,JavaScript中的类是模板,用于创建实例对象,包含属性和方法,类可以通过extends关键字继承父类,子类可以重写父类的方法,需要的朋友可以参考下

一、类的概念

什么是类？

在生活中，类一些具有相似属性和行为的事物抽象出来的概念，比如：人类、球类、汽车类；

在JavaScript中，类是模板，是用于创建实例对象的模板；相当于实例的原型（prototype）；

二、类的使用

1、语法

class 类名 {  
  constructor(){
      ...
    }
  ...
}

class：ES6中提供了class关键字，用来创建类；
类名：一般为名词，采用首字母大写表示，如Person、Car...；
{......}：类体放在一对大括号中，我们可以在大括号内定义类的成员，比如构造函数、静态方法，等等；
constructor(){......}：每个类都会包含的一个特殊方法，类的构造函数，用来实例化一个由class创建的对象；

2、实例

// 定义类
class ClassName {
  // 构造方法
  constructor(name) {
    this.name = name; // 实例属性
  }
  static author = "zyl"; // 静态属性

  #attr = 10; // 私有属性

  // 静态方法
  static sFn(data) {
    return `我是静态方法，只能通过类名调用，接收的参数为${data}；`;
  }

  // 普通方法
  fn(data) {
    console.log(`私有属性的值为${this.#attr}；`);   // 访问私有属性
    return `我是普通方法，通过实例调用，接收的参数为${data}；`;
  }
}
// 实例化
const class1 = new ClassName("第一个类");
console.log(class1); // ClassName {name: '第一个类'}

// 访问静态属性
console.log(ClassName.author); // zyl

// 访问实例属性
console.log(class1.name); // 第一个类

// 访问静态方法
console.log(ClassName.sFn("arg")); // 我是静态方法，只能通过类名调用，接收的参数为arg；

// 访问实例方法
console.log(class1.fn("123")); // 私有属性的值为10； 我是普通方法，通过实例调用，接收的参数为123；

三、类的属性

JavaScript类中的属性有：静态属性、实例属性、私有属性；

1、静态属性

类的属性，使用static关键字定义，通过【类名.属性名】访问；

2、实例属性

定义在构造函数的this上，通过【实例.属性名】访问；

3、私有属性

使用【#属性名】的方式定义，只能在类的内部访问；

// 定义类
class ClassName {
  // 构造方法
  constructor(name) {
    this.name = name; // 实例属性
  }
  static author = "zyl"; // 静态属性

  #attr = 10; // 私有属性
  fn() {
    return this.#attr;
  }
}
// 实例化
const class1 = new ClassName("第一个类");
console.log(class1); // ClassName {name: '第一个类'}

// 访问静态属性
console.log(ClassName.author);  // zyl

// 访问实例属性
console.log(class1.name);   // 第一个类

// 访问私有属性
console.log(class1.fn()); // 10

四、类的方法

JavaScript类中方法有：构造方法、静态方法、普通方法、私有方法；

1、构造方法

构造方法是一种特殊的方法：

名称为constructor()；
一个类中可以添加一个构造方法，用于对类进行实例化；
构造方法中可以对初始化对象属性；
使用new关键字实例化时，会自动执行constructor()；
定义类时，若没有定义constructor()构造方法，JavaScript会自动声明一个空的constructor()方法；

// 定义Person类
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

// 创建person1实例对象
const person1 = new Person("zyl", 18);
console.log(person1);         // Person {name: 'zyl', age: 18}

2、静态方法

使用static关键字定义，又叫类方法，它是属于类的，而非实例对象；

静态方法不能继承，不能通过实例调用，只能通过当前类名调用【类名.方法名】（父类的静态方法可以被子类继承）；

// 定义品牌类
class Brand {
  constructor(name, type) {
    this.name = name;
    this.type = type;
  }

  // 静态方法，判断是否为vip用户
  static isVip(count) {
    return count == "zylcount" ? "Vip用户" : "新用户";
  }

  // 静态方法，获取品牌折扣价
  static dPrice(price) {
    return price > 10 ? price * 0.9 : price * 0.95;
  }
}

const brand1 = new Brand("zylBrand", "clothing");
console.log(brand1);                     // Brand {name: 'zylBrand', type: 'clothing'}

// 调用静态方法，通过类名Brand调用，而非实例brand1调用；
console.log(Brand.isVip("1111111"));     // 新用户
console.log(Brand.dPrice(12));           // 10.8

3、普通方法

类中可以定义任意数量的普通方法；

普通方法定义在类的原型上（prototype属性上），会被实例继承；

通过实例调用【实例.方法名】，不能通过类名调用；

// 定义汽车类
class Car {
  constructor(brand, price) {
    this.brand = brand;
    this.price = price;
  }
  // 定义普通方法 
  getInfo() {
    return `该车的品牌是${this.brand};售卖价格是${this.price}`;
  }
}
let car1 = new Car("volvo", "16.8w");
console.log(car1);                 //  {brand: 'volvo', price: '16.8w'}

// 通过实例调用普通方法
console.log(car1.getInfo());       //  该车的品牌是volvo;售卖价格是16.8w

// 普通方法是定义在Car类的原型上
console.log(Car.prototype);   // {constructor: ƒ, getInfo: ƒ}
console.log(Car.prototype.getInfo === car1.__proto__.getInfo);   // true

五、类的继承

JavaScript中允许我们在创建一个类的时候，依赖于另一个类；被创建的类称为【子类/派生类】，被依赖的类称为【父类/基类】；子类会继承父类的属性和方法，有利于提高代码的可复用性；

1、extends

extends关键字，用于类的继承；使创建子类继承一个父类，子类会继承父类的所有属性和方法；

（1）语法

class 子类 extends 父类 {
    // 定义子类的属性和方法
    ...    
}

（2）实例

class ParentClass {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  static attr = 'abc';
  static sFn(data){
    return `我是定义在父类的静态方法，收到的参数为：${data}`;
  }
  getInfo(data) {
    return `我是定义在父类的普通方法，收到的参数为：${data}`;
  }
}

class ChildClass extends ParentClass { }

const parent1 = new ParentClass('parent', '45');  
const child1 = new ChildClass('zyl', 20);  
console.log(parent1);                 // ParentClass {name: 'parent', age: '45'}
console.log(child1);                  // ChildClass {name: 'zyl', age: 20}
console.log(ChildClass);              // class ChildClass extends ParentClass {}
console.log(ChildClass.attr);         // abc
console.log(ChildClass.sFn('1111'));  // 我是定义在父类的静态方法，收到的参数为：1111
console.log(child1.getInfo(123));     // 我是定义在父类的普通方法，收到的参数为：123

2、super

super关键字用于调用父类的属性和方法；在调用时，需要指定调用的父类属性或父类方法；

super必须写在this.XXX之前；