当前位置:首页 > 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
分享给朋友:

相关文章

jquery.js

jquery.js

jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互等操作。以下是关于 jQuery.js 的核心信息和使用方法: 获取 jQ…

js实现复制到剪贴板

js实现复制到剪贴板

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

js防抖和节流实现

js防抖和节流实现

防抖(Debounce)的实现 防抖的核心思想是在事件被触发后,延迟执行回调函数。如果在延迟时间内再次触发事件,则重新计时。适用于输入框搜索、窗口大小调整等场景。 function debounce…

js jquery

js jquery

jQuery 简介 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。它兼容多种浏览器,提供易于使用的 API,使开发者能够…

js实现选题

js实现选题

实现选题功能的JavaScript方法 基础实现方案 使用数组存储选项,通过随机索引选取: const options = ['选项A', '选项B', '选项C', '选项D']; const r…

js实现授权

js实现授权

授权流程设计 授权流程通常涉及前端与后端的交互,常见方案包括OAuth2.0、JWT等。以JWT为例的典型流程: 用户提交凭证(如用户名密码)到认证服务 服务端验证通过后生成包含用户信息的JWT令牌…