当前位置：首页 > JavaScript

js 实现封装

2026-01-31 12:55:44JavaScript

封装的概念

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

使用闭包实现封装

闭包是JavaScript实现封装的重要机制，通过函数作用域保护私有变量不被外部直接访问。

function createCounter() {
    let count = 0; // 私有变量

    return {
        increment: function() {
            count++;
        },
        getCount: function() {
            return count;
        }
    };
}

const counter = createCounter();
counter.increment();
console.log(counter.getCount()); // 1
console.log(counter.count); // undefined

使用ES6 Class实现封装

ES6的class语法结合Symbol或WeakMap可以更好地实现封装效果。

const _count = Symbol('count');

class Counter {
    constructor() {
        this[_count] = 0;
    }

    increment() {
        this[_count]++;
    }

    get count() {
        return this[_count];
    }
}

const counter = new Counter();
counter.increment();
console.log(counter.count); // 1
console.log(counter._count); // undefined

使用模块模式实现封装

模块模式利用IIFE(立即调用函数表达式)创建私有作用域。

const counterModule = (function() {
    let count = 0;

    function increment() {
        count++;
    }

    function getCount() {
        return count;
    }

    return {
        increment,
        getCount
    };
})();

counterModule.increment();
console.log(counterModule.getCount()); // 1
console.log(counterModule.count); // undefined

使用TypeScript的访问修饰符

TypeScript提供了更完善的封装支持，通过public、private和protected修饰符控制访问权限。

js 实现封装

class Counter {
    private count: number = 0;

    public increment(): void {
        this.count++;
    }

    public getCount(): number {
        return this.count;
    }
}

const counter = new Counter();
counter.increment();
console.log(counter.getCount()); // 1
console.log(counter.count); // 编译错误