查看更多精彩前端资源

---

面向对象

---

字面量对象
在typeScript中,无法给对象动态添加属性,必须预先定义

[AppleScript] 纯文本查看 复制代码

let obj = { a: 1 };
obj.a = 10;   // 正常
obj.b = 20;   // 报错

class中的实例属性
ts不允许在构造器中动态给实例添加属性, 必须要先进行声明

[AppleScript] 纯文本查看 复制代码

class Person {

        name: string;         // 定义实例属性name及类型
        age: number = 0;  // 定义实例属性时可以赋一个默认值

        constructor(name: string, age: number, gender: string) {
                this.name = name;        // 正常
                this.age = age;              // 正常
                this.gender = gender;    // 报错,没有预先定义,无法动态添加属性
        }

}

class中的实例属性 - 简写版

• 在进行面向对象开发时, 会经常在new的时候传值, 上面那样预先定义再赋值的写法虽严禁但实在过于重复
• 所以ts提供了一种简写形式, 即在构造器形参上面添加权限修饰符, 加上后ts就知道这个形参是要被赋给实例的
  
  

[AppleScript] 纯文本查看 复制代码

class Person {
  // 形参加上权限修饰符之后, 不用提前声明, 也不用写this.xxx = xxx这样的代码了, ts会自动添加
        constructor(public name: string, public age: number, public gender: string) {}
}

let xiaohong = new Person('小红', 12, '女');
console.log(xiaohong.age);   // 12

静态成员

• 在es6中,只允许使用static关键字定义静态方法,不能定义静态属性
• 但是在ts中没有这个限制, 只要前面加上static关键字就是静态成员, 否则就是实例成员
  
  

[AppleScript] 纯文本查看 复制代码

class Person {
        static maxAge: number = 250;
        static getTotal() {
                return '70亿';
        }
}

// 静态成员通过类名调用
Person.maxAge;            // 250
Person.getTotal();          // '70亿'

访问权限修饰符

---

• 访问权限修饰符的作用是限定属性的可访问范围
• 访问修饰符与主流面向对象语言一样, 有三个: public private protected
  
  

public

• 只有public权限的属性或方法才可以在类外部使用
• 如果不明确指明权限的话, 那么默认就是public
  
  

[AppleScript] 纯文本查看 复制代码

class Person {
        public name: string;    // 手动赋予public权限
        age: number;              // 默认赋予public权限

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

        public say(): void {
                console.log(`我是${this.name}`);
        }
}

let p = new Person('小虎', 20);
p.say();        // 我是小虎
p.name       // 小虎
p.age          // 20

private只供类内部使用的属性或方法,可以通过private关键字来修饰

[AppleScript] 纯文本查看 复制代码

class Person {
        public name: string;
        private age: number;

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

        public say(): void {
                console.log(`我是${this.name},我${this.age}岁了`);
        }
}

let p = new Person('小虎', 20);
p.say();        // 我是小虎,我20岁了
p.name       // 小虎
p.age          // 报错,age是私有属性,只能在类的内部使用

protected
只供类或子类内部使用的属性或方法,可以通过protected关键字来修饰

[AppleScript] 纯文本查看 复制代码

class Animal {
        protected name: string;
        private age: number;

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

class Person extends Animal {
        public sayName(): void {
                console.log(`我是${this.name}`);  // 正常, 父中protected属性在父子类中均可使用
        }
        public sayAge(): void {
                console.log(`我${this.age}岁了`);  // 报错, 父中private属性只能在父中使用
        }
}

let p = new Person('小芳', 18);
p.name         // 报错, protected属性不能在外面使用
p.age            // 报错, private属性不能在外面使用

读写修饰符

---

readonly

• ts提供了只读属性修饰符readonly, 属性一旦赋值便不可修改
• 注意: 只读修饰符不能作用与方法
  
  

[AppleScript] 纯文本查看 复制代码

class Person {
        readonly name: string;
        readonly age: number;

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

  // 报错, 不能使用readonly修饰方法
        readonly say() {
                console.log('说一嘴');
        }
}

let p = new Person('小美', 20);
p.name;                    // 小美
p.name = '大美';       // 报错, name是只读属性

联合使用读写修饰符允许配合一个权限修饰符共同使用, 但权限修饰符必须写在前面

[AppleScript] 纯文本查看 复制代码

class Person {
        public readonly name: string;
        private readonly age: number;
        private protected grender: string;
}