当前位置:首页 > 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实现日历

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

js实现图表

js实现图表

在JavaScript中实现图表通常使用流行的图表库,以下是几种常见的方法和工具: 使用Chart.js Chart.js是一个简单灵活的库,适合快速生成响应式图表。安装方式包括CDN引入或npm安…

js实现抽奖

js实现抽奖

实现抽奖功能的基本思路 抽奖功能的核心是随机选择奖项并展示结果。可以通过数组存储奖项,利用随机数生成索引,最后通过动画增强用户体验。 准备奖项数据 定义一个数组存储奖项信息,每个奖项可以包含名称、图…

js实现菜单

js实现菜单

实现基本HTML结构 使用HTML创建菜单的基本框架,通常包含<ul>和<li>元素。示例结构如下: <ul id="menu"> <li><…

js实现按钮点击

js实现按钮点击

实现按钮点击的JavaScript方法 HTML按钮元素 在HTML中创建按钮元素,为其添加id或class以便JavaScript选择: <button id="myButton">点…

js实现的游戏

js实现的游戏

JavaScript 游戏开发基础 JavaScript 是开发网页游戏的流行选择,因其无需插件即可在浏览器中运行。以下是一些关键技术和资源: HTML5 Canvas Canvas 提供了绘制图形…