面试题：TypeScript中protected修饰符在复杂继承体系及模块设计中的应用

protected修饰符在大型前端应用中的作用

代码封装性
- 作用：protected修饰符使得类中的属性或方法只能在类本身及其子类中访问，而不能从外部直接访问。在大型前端应用中，这有助于隐藏内部实现细节，只暴露必要的接口给外部使用。例如，在一个基础组件类中，可能有一些处理数据格式化的方法，这些方法是组件内部逻辑的一部分，不希望外部随意调用，就可以将其设置为protected。
- 示例：

class BaseComponent {
    protected dataFormattingMethod(data: any) {
        // 对数据进行格式化的逻辑
        return data.toString().toUpperCase();
    }
}

class ExtendedComponent extends BaseComponent {
    useFormatting() {
        let result = this.dataFormattingMethod('test data');
        return result;
    }
}

let base = new BaseComponent();
// base.dataFormattingMethod('test'); // 报错，无法从外部访问protected方法
let extended = new ExtendedComponent();
let formatted = extended.useFormatting();
console.log(formatted); // 输出：TEST DATA

继承关系
- 作用：protected修饰符在继承体系中起到了关键作用，它允许子类继承父类的protected成员并在子类内部使用，从而实现代码复用。同时，子类可以基于父类的protected成员进行扩展和定制。在多层类继承体系中，这有助于保持继承结构的清晰和层次化。例如，在一个图形绘制的类继承体系中，父类Shape可能有protected的属性color，子类Circle和Rectangle可以继承并使用这个属性，同时各自实现不同的绘制逻辑。
- 示例：

class Shape {
    protected color: string;
    constructor(color: string) {
        this.color = color;
    }
}

class Circle extends Shape {
    draw() {
        console.log(`Drawing a ${this.color} circle`);
    }
}

class Rectangle extends Shape {
    draw() {
        console.log(`Drawing a ${this.color} rectangle`);
    }
}

let circle = new Circle('red');
circle.draw(); // 输出：Drawing a red circle
let rectangle = new Rectangle('blue');
rectangle.draw(); // 输出：Drawing a blue rectangle

模块间交互
- 作用：在多个模块构成的大型前端应用中，protected修饰符可以防止模块间对类内部实现的过度访问。不同模块可能基于相同的基类进行扩展，如果没有protected修饰符，模块间可能会意外地直接访问和修改其他模块类的内部状态，导致模块间耦合度增加。通过protected修饰符，模块间只能通过暴露的公共接口进行交互，从而降低耦合，提高模块的独立性和可维护性。例如，在一个电商应用中，用户模块和订单模块可能都继承自一个基础的用户相关类，其中protected的用户信息处理方法可以在各自模块内合理使用，而不会被对方模块随意篡改。

可能遇到的问题及解决方案

问题：在复杂的继承体系中，过度使用protected可能导致子类对父类实现细节的依赖过强。例如，如果父类的protected成员的实现发生变化，可能需要对子类进行大量修改。
- 解决方案：尽量保持protected成员的稳定性，在修改protected成员时，通过适当的文档和测试来确保子类不受影响。同时，可以使用抽象类和接口来定义更稳定的契约，让子类基于契约进行实现，而不是过度依赖父类的具体protected实现。例如，定义一个抽象类AbstractShape，其中包含抽象的draw方法，子类必须实现该方法，而对于protected的属性，可以通过访问器方法进行访问和修改，这样可以在一定程度上隔离父类实现变化对子类的影响。

abstract class AbstractShape {
    protected _color: string;
    constructor(color: string) {
        this._color = color;
    }
    abstract draw(): void;
    getColor() {
        return this._color;
    }
    setColor(color: string) {
        this._color = color;
    }
}

class Circle extends AbstractShape {
    draw() {
        console.log(`Drawing a ${this.getColor()} circle`);
    }
}

问题：在TypeScript和JavaScript的运行时环境中，protected修饰符实际上是一种编译时的检查机制。如果通过一些非法手段（如直接访问对象的内部属性），可能会绕过protected的限制，导致代码的安全性和封装性被破坏。
- 解决方案：加强代码审查，确保开发人员遵循编码规范，不使用非法手段绕过protected限制。同时，可以使用一些工具和框架来强化运行时的安全性，例如使用Proxy对象来代理对象的访问，对访问进行额外的检查，确保不会非法访问protected成员。

class Example {
    protected value: number;
    constructor(value: number) {
        this.value = value;
    }
}

let example = new Example(10);
// 以下是非法访问尝试
// console.log(example.value); // 编译时错误

// 使用Proxy进行代理访问检查
let proxyExample = new Proxy(example, {
    get(target, property) {
        if (property === 'value' && typeof property ==='string' && property.startsWith('_')) {
            throw new Error('Cannot access protected property');
        }
        return target[property];
    }
});
// console.log(proxyExample.value); // 运行时会抛出错误

星途面试题库

面试题：TypeScript中protected修饰符在复杂继承体系及模块设计中的应用

知识考点

面试题答案

protected修饰符在大型前端应用中的作用

可能遇到的问题及解决方案