当前位置：首页 > JavaScript

js实现封装

2026-03-01 00:18:55JavaScript

封装的概念

封装是面向对象编程的核心概念之一，指将数据（属性）和操作数据的方法（行为）捆绑在一起，隐藏内部实现细节，仅暴露必要的接口。JavaScript 可通过多种方式实现封装。

使用构造函数和原型

通过构造函数定义对象的属性和方法，结合原型链共享方法，避免重复创建函数实例。

function Person(name, age) {
    this.name = name; // 公开属性
    let _age = age;   // 私有变量（通过闭包实现）

    this.getAge = function() { 
        return _age; 
    };
    this.setAge = function(age) { 
        _age = age; 
    };
}

Person.prototype.greet = function() {
    console.log(`Hello, I'm ${this.name}`);
};

使用 ES6 的 Class 语法

ES6 的 class 语法糖简化了封装实现，结合 # 私有字段（ES2022）或闭包实现私有成员。

class Person {
    #age; // 私有字段（ES2022+）
    constructor(name, age) {
        this.name = name;
        this.#age = age;
    }

    getAge() { 
        return this.#age; 
    }

    setAge(age) { 
        this.#age = age; 
    }
}

闭包实现私有性

利用函数作用域和闭包隐藏私有变量，仅暴露公共接口。

const createPerson = (name, age) => {
    let _age = age; // 私有变量
    return {
        getName: () => name,
        getAge: () => _age,
        setAge: (newAge) => { _age = newAge; }
    };
};

模块模式

通过 IIFE（立即执行函数）返回对象，隔离作用域实现封装。

const personModule = (() => {
    let privateAge = 0;
    const privateMethod = () => console.log('Private');

    return {
        publicMethod: () => {
            privateMethod();
            console.log('Public');
        }
    };
})();

使用 WeakMap 存储私有数据

利用 WeakMap 的弱引用特性存储私有属性，避免内存泄漏。

js实现封装

const privateData = new WeakMap();

class Person {
    constructor(name, age) {
        privateData.set(this, { name, age });
    }

    getName() {
        return privateData.get(this).name;
    }
}