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

更新时间：2025年01月06日 10:21:42 作者：白菜不太菜

这篇文章主要介绍了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之前；

（1）语法

// 调用父类的构造方法
super();   
// 访问父类属性
super.属性;    
// 调用父类方法  
super.方法名();

（2）实例

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

// 定义子类，继承父类
class ChildClass extends ParentClass {
  constructor(name, age, address, phone) {
    // 调用父类的构造方法
    super(name, age,  address);
    this.phone = phone;
  }

  // 访问父类的静态属性
  static attr = super.attr + "def";
  static sFn(data) {
    // 调用父类的静态方法
    console.log(`子类通过super调用：${super.sFn("super调用的实参")}`);
    return `我是定义在子类的静态方法，收到的参数为：${data}`;
  }
  getInfo(data) {
    // 调用父类的普通方法
    console.log(`子类通过super调用：${super.getInfo("super调用的实参")}`);
    return `我是定义在子类的普通方法，收到的参数为：${data}`;
  }
}

const parent1 = new ParentClass("parent", 45 , "上海");
const child1 = new ChildClass("child", 20, "上海", '11111111');

console.log(parent1);                 // ParentClass {name: 'parent', age: 45, address: '上海'}
console.log(child1);                  // ChildClass {name: 'child', age: 20, address: '上海'}

console.log(ParentClass.attr);        // abc
console.log(ChildClass.attr);         // abcdef

console.log(ParentClass.sFn("111"));  // 我是定义在父类的静态方法，收到的参数为：111

console.log(ChildClass.sFn("222"));   // 子类通过super调用：我是定义在父类的静态方法，收到的参数为：super调用的实参
                                      // 我是定义在子类的静态方法，收到的参数为：222

console.log(parent1.getInfo(123));    // 我是定义在父类的普通方法，收到的参数为：123                                   
console.log(child1.getInfo(456));     // 子类通过super调用：我是定义在父类的普通方法，收到的参数为：super调用的实参 
                                      // 我是定义在子类的普通方法，收到的参数为：456

总结

到此这篇关于JavaScript中类(class)的介绍和应用的文章就介绍到这了,更多相关JS中类class详解内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

js实现prototype扩展的方法(字符串,日期,数组扩展)
这篇文章主要介绍了js实现prototype扩展的方法,实例分析了JavaScript针对字符串、日期、数组等的prototype扩展相关技巧,需要的朋友可以参考下
2016-01-01
代码整洁之道(重构)
这篇文章主要介绍了代码整洁之道(重构)，不管对于何种语言，重构都是软件开发过程中不可或缺的一部分，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-10-10
JavaScript中遍历的十种方法总结
这篇文章主要给大家介绍了关于JavaScript中遍历的十种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-12-12
微信小程序实现星级评分
这篇文章主要为大家详细介绍了微信小程序实现星级评分，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-11-11
JS脚本根据手机浏览器类型跳转WAP手机网站（两种方式）
随着移动互联网的不断普及，企业的网络宣传不仅只局限在PC端，还要在移动端发展。我们在自己的网站做了WAP手机完整之后，如果有用户通过手机访问我们的企业顶级域名网站，就要判断跳转到专为的WAP网站，下面小编给大家整理有关手机浏览器跳转WAP手机网站的相关内容
2015-08-08
js删除Array数组中指定元素的两种方法
下面小编就为大家带来一篇js删除Array数组中指定元素的两种方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-08
JS文本框默认值处理详解
以下代码是对JS文本框的默认值处理进行了介绍，需要的朋友可以参考下
2013-07-07
字符串的replace方法应用浅析
按照W3C的说明，String对象的replace方法调用方式是stringObject.replace(regexp/substr,replacement)。
2011-12-12
微信小程序如何修改本地缓存key中单个数据的详解
这篇文章主要介绍了微信小程序如何修改本地缓存key中单个数据，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
使用微信小程序API，调用微信的各种内置能力。
微信小程序如何使用小程序API，去调用微信提供的各种内置能力（即微信API）。小程序开发框架提供丰富的微信原生API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。
2022-12-12