TypeScript实例讲解(七)

351 阅读2分钟

接上一篇:TypeScript实例讲解(六)

本篇内容:constructor 构造器, 以及 Setter 和 Getter。
constructor 构造器

一般情况下我们定义类的时候并不知道具体的属性值是什么,想要在创建实例的时候再赋值怎么办呢?
类有一个 constructor() 方法,constructor() 方法是在创建实例(new操作的瞬间)的时候执行。

// 例 1
class Person {
    public name: string;
    constructor(name: string) {
        this.name = name;
    }
}
const preson = new Person('bear');
preson.name    // bear

创建实例的时候传了一个参数 bear, constructor() 方法就可以接收到这个值,构造器接收到值后赋值给 name 属性。上面例1可以简写成下面的例2。

// 例 2 (简化写法)
class Person {
    constructor(public name: string) {}
}
const preson = new Person('bear');
preson.name    // bear

当父类和子类都有构造器的时候,一定要在子类中通过 super() 手动调用一下父类的构造器。

// 例 3
class Person {
    constructor(public name: string) {}
}
class Student extends Person {
    constructor(public id: number) {
        super('bear')
    }
}
const student = new Student(10);
student.name    // bear
student.id      // 10

例3中子类 Student 继承了父类 Person,在子类中就必须要调用 super() 方法,并按照父类构造器需要的参数传参。

Getter 和 Setter
// 例 4
class Person {
    constructor(private name: string) {}
    get getName() {
        return this.name;
    }
}
const person = new Person('bear');
person.name       // 报错: Property 'name' is private and only accessible within class 'Person'
person.getName   // bear

例4中直接调用类的私有属性会报错,通过 getName 则可以正常获取到值。注意:person.getName不要习惯性地写成了 person.getName()

实际上是从外部间接地调了 Person 类的私有属性,实际项目中我们一般会对私有属性进行加工或加密之后再通过 Getter 暴露出来。

// 例 5
class Person {
    constructor(private _name: string) {}
    get name() {
        return this._name + ' hello';
    }
}
const person = new Person('bear');
person.name    // bear hello

一般构造器中 private 类型的属性我们会在属性名前面加上下划线(_),比如例5中的 _name,而 Getter 我们会使用真正的属性名。在实例上调用 person.name 的时候看起来是直接调用的属性,实际上是调用的对应的 Getter。

// 例 6
class Person {
    constructor(private _name: string) {}
    get name() {
        return this._name + ' hello';
    }
    set name(name: string) {
        this._name = name  // 一般会经过处理之后再赋值, 这里就简单举例了
    }
}
const person = new Person('bear');
person.name = 'panda';

同样 Setter 也可以保护类的私有变量,通过 Setter 将传入的值进行处理之后在赋值给对应的属性。

本篇完!如果文章对你有一点点帮助,请记得点个赞哦。