TypeScript中的属性封装

Posted 2021-06-30 冰雪奇缘lb

TypeScript中的属性封装

---

在学 Javaweb 时，mvc架构 其中 model层 中封装的都是 实体类，实体类中包括 getter、setter方法 等内容，这种代码风格使项目结构比较清晰。
TypeScript 中的属性封装类似于Javaweb中mvc架构中的 model层。

传统javascript对象属性封装出现的问题：

1. 属性是在对象中设置的，属性可以任意的被修改
2. 属性可以任意被修改将会导致对象中的数据变得非常不安全

---

TS可以在属性前添加属性的修饰符

1. public 修饰的属性可以在任意位置访问（修改）默认值
2. private 私有属性，私有属性只能在类内部进行访问（修改），只能通过在类中添加方法使得私有属性可以被外部访问
3. protected 受保护的属性，只能在当前类和当前类的子类中使用

// 定义一个表示人的类
class Person {
	private _name: string;
	private _age: number;
	constructor(name: string, age: number) {
		this._name = name;
		this._age = age;
	}

	// getter方法用来读取属性
	// setter方法用来设置属性
	//	-它们被称为属性的存取器
	
	// 定义方法，用来获取name属性
	getName(){
		return this._name;
 	}
 	
	// 定义方法，用来设置name 属性
	setName(value: string) {
		this._name = value;
	}
	
	getAge() {
		return this._age;
	}
	
	setAge(value: number) {
		// 判断年龄是否合法
		if(value >= 0) {
			this._age = value;
		}
	}
	
}

TypeScript 支持这种封装实体类的编码方式，上方代码可以简化为以下方式：

class Person {
	private _name: string;
	private _age: number;
	constructor(name: string, age: number) {
		this._name = name;
		this._age = age;
	}

	//TS中设置getter方法的方式
	get name() {
		// console.log( 'get name()执行了! !' );
		return this._name;
	}
	set name(value : string) {
		this._name = value;
	}
	get age() {
		return this._age;
	}
	set age(value : number) {
		if(value >= 0) {
			this._age = value
		}
	}
	
}

let per = new Person();
per.name ='猪八戒'; // 此时调用上面封装好的赋值方法
per.age = 33;
console.log(per);