3.1.2 类的访问权限控制 -TypeScript和Vue从入门到精通(一)

当前位置:　首页>> 技术小册>> TypeScript和Vue从入门到精通(一)

### 3.1.2 类的访问权限控制

在TypeScript中，类的访问权限控制是一个核心概念，它允许开发者精细地控制类成员（包括属性、方法以及嵌套类）的可见性和可访问性。这种控制机制对于封装、模块化以及维护代码的清晰性和安全性至关重要。在本章节中，我们将深入探讨TypeScript中类的访问权限控制，包括`public`、`protected`、`private`以及`#`（私有字段，即类字段提案的语法）这些关键字的使用和它们之间的差异。

#### 3.1.2.1 公开访问（`public`）

`public`是TypeScript（以及JavaScript ES6及以后版本）中默认的访问修饰符。当类的成员被标记为`public`时，它可以在类的任何地方被访问，包括类的内部、类的实例、派生类（子类）以及类的外部。这意呀着`public`成员对于类的用户是可见的，也是最常见的访问级别。

```typescript
class Person {
    public name: string;

constructor(name: string) {
        this.name = name;
    }

public greet() {
        console.log(`Hello, my name is ${this.name}!`);
    }
}

const person = new Person('Alice');
console.log(person.name); // 访问public属性
person.greet(); // 调用public方法
```

#### 3.1.2.2 受保护访问（`protected`）

`protected`修饰符表示类的成员只能在类内部及其派生类中被访问。这意味着，`protected`成员对于类的外部是不可见的，但可以被继承该类的子类访问。这对于实现基类中的方法或属性，同时希望这些方法或属性在子类中保持可见性但又不想暴露给外部用户时非常有用。

```typescript
class Person {
    protected name: string;

constructor(name: string) {
        this.name = name;
    }

protected greet() {
        console.log(`Hello, my name is ${this.name}!`);
    }
}

class Employee extends Person {
    department: string;

constructor(name: string, department: string) {
        super(name); // 调用基类的构造函数
        this.department = department;
    }

introduce() {
        this.greet(); // 访问protected方法
        console.log(`I work in ${this.department}.`);
    }
}

const employee = new Employee('Bob', 'IT');
// employee.name; // 错误：'name' 是受保护的。
// employee.greet(); // 错误：'greet' 是受保护的。
employee.introduce(); // 正确：通过子类方法间接访问
```

#### 3.1.2.3 私有访问（`private`）

`private`修饰符将类的成员限制在类内部访问。这意味着，只有类本身可以访问这些成员，包括类的构造函数、方法以及嵌套类。`private`成员对于类的外部以及派生类都是不可见的，这有助于隐藏类的内部实现细节，增强封装性。

```typescript
class Person {
    private name: string;

constructor(name: string) {
        this.name = name;
    }

private greet() {
        console.log(`Hello, my name is ${this.name}!`);
    }

public sayHelloTo(otherName: string) {
        this.greet(); // 类内部可以访问private成员
        console.log(`Hello, ${otherName}!`);
    }
}

const person = new Person('Charlie');
// person.name; // 错误：'name' 是私有的。
// person.greet(); // 错误：'greet' 是私有的。
person.sayHelloTo('Dave'); // 正确：通过公共方法间接访问
```

#### 3.1.2.4 私有字段（`#`）

自TypeScript 3.8起，引入了对类字段提案的支持，包括私有字段的语法`#`。与`private`关键字不同，`#`前缀直接应用于字段名称之前，提供了一种更严格的私有性保证。私有字段不能在类的外部访问，也不能被类的子类访问，甚至不能通过类的原型链访问。这进一步增强了类的封装性和数据安全性。

```typescript
class Counter {
    #count = 0;

increment() {
        this.#count++;
    }

getCount() {
        return this.#count;
    }
}

const counter = new Counter();
counter.increment();
console.log(counter.getCount()); // 1
// counter.#count; // 错误：私有字段只能在类内部访问

class SubCounter extends Counter {
    // constructor() {
    //     super();
    //     console.log(this.#count); // 错误：私有字段不能被子类访问
    // }
}
```

#### 访问权限控制的重要性

- **封装**：通过控制成员的访问权限，可以隐藏类的内部实现细节，只暴露必要的接口给外部使用，从而提高类的封装性。
- **安全性**：私有和受保护成员防止了外部代码直接访问或修改类的内部状态，减少了出错的可能性，提高了代码的安全性。
- **可维护性**：合理的访问权限控制有助于减少代码间的耦合，使得类的修改和扩展更加容易，提高了代码的可维护性。
- **模块化**：通过定义清晰的访问边界，可以更好地实现代码的模块化，使得各个部分之间的依赖关系更加明确和可控。

#### 总结

在TypeScript中，类的访问权限控制是面向对象编程中的一个重要概念。通过`public`、`protected`、`private`以及`#`私有字段等修饰符，我们可以灵活地控制类成员的可见性和可访问性，从而实现更好的封装、安全性和可维护性。理解和掌握这些访问权限控制机制，对于编写高质量、可维护的TypeScript代码至关重要。

该分类下的相关小册推荐：

TypeScript和Vue从入门到精通(五)

VUE组件基础与实战

Vue.js从入门到精通(一)

移动端开发指南

vuejs组件实例与底层原理精讲

Vue源码完全解析

Vue.js从入门到精通(二)

Vue原理与源码解析

Vue3技术解密

Vue.js从入门到精通(四)

TypeScript和Vue从入门到精通(二)

TypeScript和Vue从入门到精通(三)