当前位置:首页 > JavaScript

js 实现类

2026-02-01 13:21:56JavaScript

在JavaScript中,可以通过多种方式实现类(class)的概念,以下是常见的几种方法:

构造函数模式

使用构造函数和new关键字创建对象实例。构造函数名通常首字母大写以区分普通函数。

function Person(name) {
  this.name = name;
  this.sayHello = function() {
    console.log(`Hello, ${this.name}`);
  };
}
const person = new Person('Alice');
person.sayHello(); // 输出: Hello, Alice

原型链模式

通过原型(prototype)共享方法,避免每个实例重复创建方法,节省内存。

function Person(name) {
  this.name = name;
}
Person.prototype.sayHello = function() {
  console.log(`Hello, ${this.name}`);
};
const person = new Person('Bob');
person.sayHello(); // 输出: Hello, Bob

ES6 Class语法

ES6引入的class语法糖,更接近传统面向对象语言的写法,底层仍基于原型链。

class Person {
  constructor(name) {
    this.name = name;
  }
  sayHello() {
    console.log(`Hello, ${this.name}`);
  }
}
const person = new Person('Charlie');
person.sayHello(); // 输出: Hello, Charlie

工厂函数模式

不使用new关键字,通过函数直接返回对象,适合需要灵活控制对象创建的场景。

function createPerson(name) {
  return {
    name,
    sayHello() {
      console.log(`Hello, ${this.name}`);
    }
  };
}
const person = createPerson('Dana');
person.sayHello(); // 输出: Hello, Dana

静态方法与属性

通过static关键字定义类级别的属性和方法,无需实例化即可调用。

class MathUtils {
  static PI = 3.14159;
  static square(x) {
    return x * x;
  }
}
console.log(MathUtils.square(5)); // 输出: 25

继承实现

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

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}
class Dog extends Animal {
  speak() {
    super.speak();
    console.log(`${this.name} barks.`);
  }
}
const dog = new Dog('Rex');
dog.speak(); // 输出: Rex makes a noise. Rex barks.

私有字段

ES2022引入的私有字段(以#开头),只能在类内部访问。

class Counter {
  #count = 0;
  increment() {
    this.#count++;
  }
  getCount() {
    return this.#count;
  }
}
const counter = new Counter();
counter.increment();
console.log(counter.getCount()); // 输出: 1

注意事项

  • 原型链方法适用于需要方法共享的场景,减少内存占用。
  • ES6 class语法更清晰,但需注意它并非真正的类,而是语法糖。
  • 工厂函数模式适合需要封装复杂对象创建逻辑的情况。
  • 私有字段提供真正的封装性,但需注意浏览器兼容性。

js 实现类

标签: js
分享给朋友:

相关文章

js实现动画

js实现动画

使用 CSS 动画与 JavaScript 控制 通过 JavaScript 动态添加或移除 CSS 类来触发动画。CSS 定义关键帧(@keyframes),JavaScript 通过 classL…

js实现验证码

js实现验证码

使用Canvas生成图形验证码 在HTML中创建一个Canvas元素用于绘制验证码。通过JavaScript随机生成数字或字母组合,并添加干扰线、噪点等干扰元素增强安全性。 <canvas i…

js实现图片上传

js实现图片上传

图片上传的基本实现 使用HTML的<input type="file">元素配合JavaScript的File API可以实现图片上传功能。HTML部分需要创建一个文件选择输入框和一个用于…

js实现全屏

js实现全屏

实现全屏的基本方法 使用JavaScript实现全屏功能主要依赖Element.requestFullscreen()方法。现代浏览器均支持此API,但不同浏览器可能需要添加前缀。 // 触发全屏…

js实现日历

js实现日历

实现日历的基本思路 使用JavaScript实现日历的核心是动态生成日期表格,并处理月份切换逻辑。需要计算当前月的天数、起始星期几,并动态渲染到页面上。 获取当前日期信息 通过Date对象获取当前年…

js 实现继承

js 实现继承

原型链继承 通过让子类的原型对象指向父类的实例来实现继承。子类实例可以访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Pa…