当前位置:首页 > JavaScript

js面向对象的实现

2026-01-30 09:45:46JavaScript

JavaScript 面向对象实现方法

JavaScript 通过原型链和构造函数实现面向对象编程(OOP)。以下是几种常见的实现方式:

构造函数模式

通过函数定义对象类型,使用 new 关键字创建实例:

js面向对象的实现

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayHello = function() {
        console.log(`Hello, my name is ${this.name}`);
    };
}
const person1 = new Person("Alice", 25);

原型模式

共享方法和属性以减少内存占用:

function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype.sayHello = function() {
    console.log(`Hello, my name is ${this.name}`);
};
const person2 = new Person("Bob", 30);

类语法(ES6)

使用 class 关键字简化面向对象实现:

js面向对象的实现

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    sayHello() {
        console.log(`Hello, my name is ${this.name}`);
    }
}
const person3 = new Person("Charlie", 35);

继承实现

通过原型链或 extends 实现继承:

// 原型链继承
function Student(name, age, grade) {
    Person.call(this, name, age);
    this.grade = grade;
}
Student.prototype = Object.create(Person.prototype);

// ES6 类继承
class Student extends Person {
    constructor(name, age, grade) {
        super(name, age);
        this.grade = grade;
    }
}

封装与访问控制

通过闭包或 Symbol 实现私有属性:

class Person {
    #privateField; // 私有字段(ES2022)
    constructor(name) {
        this.name = name;
        this.#privateField = "secret";
    }
}

注意事项

  • 原型方法适用于所有实例共享的场景,构造函数内定义的方法每个实例独立
  • 箭头函数会改变 this 绑定,不适合作为对象方法
  • 现代 JavaScript 推荐使用 class 语法,本质仍是原型继承的语法糖

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

相关文章

js实现轮播

js实现轮播

实现基础轮播效果 使用HTML结构创建轮播容器和图片元素: <div class="carousel"> <div class="carousel-inner">…

js实现复制

js实现复制

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

js实现轮播图

js实现轮播图

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

js实现计算器

js实现计算器

实现基础计算器功能 使用JavaScript创建一个基础计算器需要处理数字输入、运算符逻辑和结果显示。以下是一个简单的实现示例: let currentInput = '0'; let previo…

js实现全选

js实现全选

实现全选功能的方法 在JavaScript中实现全选功能通常涉及监听全选复选框的点击事件,并根据其状态控制其他复选框的选中状态。以下是几种常见的实现方式: 基础DOM操作实现 通过获取所有目标复选…

js实现全屏

js实现全屏

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