当前位置:首页 > JavaScript

js class实现

2026-03-13 20:52:20JavaScript

Class 的基本语法

在 JavaScript 中,class 是 ES6 引入的语法糖,用于更简洁地实现面向对象编程。class 本质上是基于原型继承的语法包装。

class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, ${this.name}`);
  }
}

const person = new Person('Alice');
person.greet(); // 输出: Hello, Alice

构造函数

constructor 方法是类的默认构造方法,在 new 实例时自动调用。一个类只能有一个 constructor,如果没有显式定义,会默认添加一个空的 constructor

class Animal {
  constructor(type) {
    this.type = type;
  }
}

const dog = new Animal('dog');
console.log(dog.type); // 输出: dog

方法定义

类的方法直接定义在类体中,不需要 function 关键字。方法之间也不需要逗号分隔。

class Calculator {
  add(a, b) {
    return a + b;
  }

  subtract(a, b) {
    return a - b;
  }
}

const calc = new Calculator();
console.log(calc.add(5, 3)); // 输出: 8

静态方法

使用 static 关键字定义静态方法,静态方法只能通过类名调用,不能通过实例调用。

js class实现

class MathUtils {
  static square(x) {
    return x * x;
  }
}

console.log(MathUtils.square(4)); // 输出: 16

继承

使用 extends 关键字实现继承,子类可以通过 super 调用父类的构造函数或方法。

class Vehicle {
  constructor(wheels) {
    this.wheels = wheels;
  }

  describe() {
    console.log(`This vehicle has ${this.wheels} wheels`);
  }
}

class Car extends Vehicle {
  constructor() {
    super(4); // 调用父类构造函数
  }

  honk() {
    console.log('Beep beep!');
  }
}

const myCar = new Car();
myCar.describe(); // 输出: This vehicle has 4 wheels
myCar.honk();     // 输出: Beep beep!

Getter 和 Setter

可以使用 getset 关键字定义属性的存取器。

js class实现

class Temperature {
  constructor(celsius) {
    this.celsius = celsius;
  }

  get fahrenheit() {
    return this.celsius * 1.8 + 32;
  }

  set fahrenheit(value) {
    this.celsius = (value - 32) / 1.8;
  }
}

const temp = new Temperature(25);
console.log(temp.fahrenheit); // 输出: 77
temp.fahrenheit = 86;
console.log(temp.celsius);    // 输出: 30

私有字段

ES2022 引入了私有字段,通过在字段名前加 # 来定义私有属性,只能在类内部访问。

class Counter {
  #count = 0;

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

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

const counter = new Counter();
counter.increment();
console.log(counter.getCount()); // 输出: 1
console.log(counter.#count);     // 报错: Private field '#count' must be declared in an enclosing class

类表达式

类也可以使用表达式的形式定义,可以匿名或有名。

const Person = class {
  constructor(name) {
    this.name = name;
  }
};

const person = new Person('Bob');
console.log(person.name); // 输出: Bob

Mixin 模式

通过函数和 Object.assign 可以实现 Mixin 模式,用于多重继承。

const Flyable = {
  fly() {
    console.log('Flying...');
  }
};

class Bird {
  // ...
}

Object.assign(Bird.prototype, Flyable);

const bird = new Bird();
bird.fly(); // 输出: Flying...

标签: jsclass
分享给朋友:

相关文章

js实现倒计时

js实现倒计时

实现倒计时的基本方法 使用 JavaScript 实现倒计时功能可以通过 setInterval 或 setTimeout 结合日期计算来完成。以下是几种常见的实现方式: 使用 setInterva…

js实现复制

js实现复制

使用document.execCommand方法 在较旧的浏览器中,可以使用document.execCommand('copy')实现复制功能。创建一个临时的textarea或input元素,将需要…

js实现轮播图

js实现轮播图

基础轮播图实现 使用HTML、CSS和JavaScript实现一个简单的自动轮播图。HTML结构包含一个容器和多个图片项。 <div class="slider"> <div…

js实现换肤

js实现换肤

使用CSS变量实现换肤 通过CSS变量可以轻松实现主题切换功能。CSS变量在根元素中定义,通过JavaScript动态修改这些变量值。 :root { --primary-color: #349…

js实现百叶窗

js实现百叶窗

使用CSS和JavaScript实现百叶窗效果 通过CSS动画和JavaScript事件监听可以实现百叶窗效果。核心思路是将内容区域分割为多个条状元素,通过控制它们的展开/折叠状态来模拟百叶窗。…

js实现防洪

js实现防洪

防抖(Debounce)实现 防抖的核心思想是在事件触发后延迟执行回调函数,若在延迟时间内再次触发事件,则重新计时。适用于输入框搜索、窗口调整等场景。 function debounce(func,…