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

实现倒计时的基本方法 使用 JavaScript 实现倒计时可以通过 setInterval 或 setTimeout 结合日期计算来完成。以下是两种常见实现方式。 使用 setInterval 实…

js轮播图实现原理

js轮播图实现原理

轮播图的基本原理 轮播图通过动态切换显示的内容(图片、文本等)实现视觉上的滑动效果。核心原理是利用CSS和JavaScript控制元素的显示与隐藏,或通过变换位置实现滑动动画。 实现方法一:…

节流js实现

节流js实现

节流(Throttle)的实现原理 节流是一种限制函数执行频率的技术,确保函数在一定时间间隔内最多执行一次。适用于高频触发事件(如滚动、输入、窗口调整等)的场景。 基础实现方式 使用时间戳判断是否执…

实现继承js

实现继承js

实现继承的方式 在JavaScript中,实现继承可以通过多种方式完成,每种方式都有其优缺点。以下是几种常见的实现继承的方法: 原型链继承 原型链继承是最基本的继承方式,通过将子类的原型指向父类的实…

js实现导航菜单

js实现导航菜单

使用HTML和CSS创建基础结构 导航菜单的基础结构通常由HTML的无序列表(<ul>)和列表项(<li>)组成,每个列表项包含一个链接(<a>)。CSS用于样式化…

js实现左右滑动

js实现左右滑动

实现左右滑动的 JavaScript 方法 监听触摸事件 通过 touchstart、touchmove 和 touchend 事件来检测用户的手势操作。记录触摸的起始位置和移动距离,判断滑动方向。…