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

js实现vue

Vue.js 简介 Vue.js 是一个渐进式 JavaScript 框架,用于构建用户界面。其核心库专注于视图层,易于与其他库或现有项目整合。 实现 Vue.js 的基本步骤 安装 Vue.…

js实现轮播图

js实现轮播图

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

js实现复制到剪贴板

js实现复制到剪贴板

使用document.execCommand方法(传统方式,已废弃但部分浏览器仍支持) 该方法适用于旧版浏览器,但已被标记为废弃。执行前需确保文本已被选中: function copyToClipb…

js实现dh

js实现dh

JavaScript 实现 DH(Diffie-Hellman)密钥交换 Diffie-Hellman(DH)密钥交换是一种安全协议,允许双方在不安全的通信信道上建立一个共享密钥。以下是如何在 Jav…

js类实现

js类实现

使用类实现 JavaScript 功能 在 JavaScript 中,类(Class)是一种语法糖,基于原型继承机制。通过 class 关键字可以更直观地定义对象模板。 基本类定义 class…

js实现驼峰

js实现驼峰

实现驼峰命名的几种方法 使用正则表达式和字符串替换 通过正则表达式匹配字符串中的特定模式(如下划线或短横线),并将其后的字母转换为大写,同时移除分隔符。 function toCamelCase(…