当前位置:首页 > JavaScript

js实现一个面向对象

2026-01-31 11:06:51JavaScript

面向对象编程基础

面向对象编程(OOP)的核心概念包括封装继承多态。JavaScript 通过构造函数、原型链和 ES6 的 class 语法支持 OOP。

使用构造函数实现

通过构造函数定义对象模板,结合 prototype 实现方法共享:

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const person1 = new Person('Alice', 25);
person1.greet(); // 输出: Hello, my name is Alice

关键点:

js实现一个面向对象

  • 构造函数名通常首字母大写(约定)。
  • 方法定义在 prototype 上以避免重复创建函数实例。

使用 ES6 Class 语法

ES6 引入 class 关键字,语法更接近传统 OOP 语言:

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

  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog('Rex');
dog.speak(); // 输出: Rex barks.

特性:

js实现一个面向对象

  • extends 实现继承。
  • super() 调用父类构造函数。

封装与私有字段

通过闭包或 # 前缀(ES2022)实现私有属性:

class Counter {
  #count = 0; // 私有字段

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

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

const counter = new Counter();
counter.increment();
console.log(counter.getCount()); // 输出: 1

多态的实现

通过方法重写实现多态行为:

class Shape {
  draw() {
    console.log('Drawing a shape');
  }
}

class Circle extends Shape {
  draw() {
    console.log('Drawing a circle');
  }
}

const shapes = [new Shape(), new Circle()];
shapes.forEach(shape => shape.draw());
// 输出: 
// Drawing a shape
// Drawing a circle

静态方法与属性

使用 static 定义类级别的方法或属性:

class MathUtils {
  static PI = 3.14159;

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

console.log(MathUtils.square(3)); // 输出: 9

标签: 面向对象js
分享给朋友:

相关文章

js实现倒计时

js实现倒计时

使用 setInterval 实现倒计时 通过 setInterval 定时器每秒更新剩余时间,适用于简单倒计时场景。 function countdown(seconds, callback) {…

js分组实现

js分组实现

分组实现方法 在JavaScript中,可以通过多种方式实现数组或对象的分组操作。以下是几种常见的方法: 使用Array.prototype.reduce() 通过reduce方法可以轻松实现数组分…

js实现求导

js实现求导

实现数值求导的方法 在JavaScript中实现求导通常采用数值方法,因为JavaScript不是符号计算语言。以下是常见的数值微分方法: 中心差分法 中心差分法提供较高精度的导数近似:…

js实现代码雨

js实现代码雨

实现代码雨效果 使用HTML5 Canvas和JavaScript可以轻松实现经典的代码雨效果。以下是完整的实现代码和说明: HTML结构 <!DOCTYPE html> <…

js实现 功能

js实现 功能

在 JavaScript 中实现功能通常涉及多个关键步骤,具体取决于功能需求。以下是常见功能的实现方法和示例: 基本功能实现 使用函数封装逻辑是最直接的方式。例如,实现一个计算两数之和的函数: f…

js实现滑动

js实现滑动

实现滑动效果的方法 在JavaScript中实现滑动效果可以通过多种方式完成,以下是几种常见的实现方法: 使用CSS过渡和JavaScript触发 通过CSS定义过渡效果,JavaScript控制触…