es6 基础学习之class的相关

ES6 中的 class

在 ES6(ECMAScript 2015)中,class 关键字引入了一种新的方式来创建和继承对象。这种语法更接近传统的面向对象编程语言,如 Java 和 C++,从而使得对象模型更易理解和使用。

基础语法

下面是一个简单的 class 定义:

javascript 复制代码
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const john = new Person('John', 30);
john.sayHello();  // 输出 "Hello, my name is John"

构造函数 constructor

constructor 是一个特殊的方法,用于创建和初始化由 class 创建的对象。一个类只能拥有一个名为 "constructor" 的特殊方法。

实例方法和属性

constructor 方法中定义的属性和方法是实例属性和方法,每个实例对象都有自己的一份。

静态方法和属性

使用 static 关键字,你可以定义一个类的静态方法。静态方法不会出现在类的实例上,而是直接出现在类本身上。

javascript 复制代码
class MathHelper {
  static square(x) {
    return x * x;
  }
}

console.log(MathHelper.square(5));  // 输出 25

继承(Inheritance)

使用 extends 关键字创建一个类作为另一个类的子类。

javascript 复制代码
class Student extends Person {
  constructor(name, age, grade) {
    super(name, age);  // 调用父类的 constructor
    this.grade = grade;
  }

  sayGrade() {
    console.log(`I am in grade ${this.grade}`);
  }
}

const jane = new Student('Jane', 20, 'Grade 1');
jane.sayHello();  // 输出 "Hello, my name is Jane"
jane.sayGrade();  // 输出 "I am in grade Grade 1"

访问器(Getters 和 Setters)

你可以使用 getset 关键字来创建对象属性的访问器。

javascript 复制代码
class Circle {
  constructor(radius) {
    this._radius = radius;
  }

  get radius() {
    return this._radius;
  }

  set radius(value) {
    if (value <= 0) {
      console.log('Invalid radius');
    } else {
      this._radius = value;
    }
  }
}

const circle = new Circle(5);
console.log(circle.radius);  // 输出 5

circle.radius = -1;  // 输出 "Invalid radius"

私有属性和方法(提案)

目前,JavaScript 还没有提供原生的方式来定义私有属性和方法,但有一个字段声明的提案,使用 # 符号来声明私有属性。

javascript 复制代码
class Counter {
  #count = 0;

  increment() {
    this.#count++;
  }

  getCount() {
    return this.#count;
  }
}

这些是 ES6 中 class 的主要特性和用法。这些新特性提供了一种更结构化、更面向对象的方式来组织代码,使得 JavaScript 变得更加灵活和强大。希望这些信息能帮助你更好地理解和使用 ES6 中的 class 特性。

相关推荐
mayaairi2 小时前
Vue2 组件通讯(四):v-model、scoped样式、mixins与plugins
前端·javascript·vue.js
武哥聊编程3 小时前
【AI实战项目】基于SpringAI+Springboot+Vue的AI面试刷题训练平台
vue.js·人工智能·spring boot·springai
mayaairi6 小时前
Vue2 组件通讯(二):ref、自定义事件与provide/inject实战
前端·javascript·vue.js
李少兄8 小时前
记一次 IDEA 打开 Vue 项目后目录“闪现即消失“ 问题排查
java·vue.js·intellij-idea
leoZ2319 小时前
2026-09-08-mysql-57-init-walkthrough
前端·javascript·数据库·vue.js·opencv·mysql·adb
qq_350897219 小时前
trea实用工具
vue.js·uniapp
paopaokaka_luck9 小时前
非遗文物数字化系统(AI非遗问答、ONNX图像识别、协同过滤推荐、ECharts数据分析、非遗知识浏览与互动、文创商城订单闭环、文化活动报名签到、社区交流)
前端·javascript·vue.js·人工智能·数据分析·echarts
BS30813_vx10 小时前
31754+基于 Spring Boot + Vue 的网络文学交流分享平台设计与实现
vue.js·spring boot·后端
mayaairi11 小时前
Vue2 组件通讯(一):Props传值完全指南
前端·javascript·vue.js
码艺-Alimjan11 小时前
Tauri 2.x + Vue 3 桌面应用开发实战:从踩坑到完美落地
前端·javascript·vue.js·rust·typescript·go