事关我个Vue开发转Angular的那些事四

183 阅读3分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第5天,点击查看活动详情

写在前面: 上一篇主要记录了一下Angular中的表单控件和路由的常规使用,今天记录一下Angular的TS开发的Class语法.

事关我个Vue开发转Angular的那些事四

TS的Class 类

class相当于new了一个实例,里面所有方法注册在实例的原型上,constructor表示默认方法,里面return this(默认对象)

class Mother { 
    public name: string;
    protected like: string;
    public readonly name: string;
    constructor(name: string, like: string) {
        this.name = name;
        this.like = like;
    } 
    protected getLike() {
        return `你知道我喜欢${this.like}`;
    } 
} 
// 修饰符 public-公共 private-私有  readonly 只读不可更改  protected-受保护的修饰符 
// 如果使用protected修饰父类的构造函数,只能通过子类来创建实例。
// 不能通过父类,在父类的 constructor前加一个protected 之后,测试一下. 


const M = new Mother("zhangsan", "running");
console.log(M);
class Daughter extends Mother {
    private age: number;
    constructor(name: string, age: number, like: string) {
        super(name, like);
        this.age = age;
        // console.log(super.like)
        // 使用protected修饰,子类的构造函数中只能调用其方法。不可调用属性。
        console.log(super.getLike()); 
    } 
} 
const D = new Daughter("wanghui", 20, "游泳");
console.log(D, D.name);
// console.log(D.age) 你打开这行注释瞧一瞧,一定是红红的 so 私有属性是不可以被 使用的


constructor(构造器)

是类的默认方法,必需方法,如果没定义,类创建时自动生成空方法,

  • static(静态方法)

声明里面所有的方法均不注册在原型上.所以不会被实例继承. 可以通过extends实现类与类之间的继承

super 方法

子类必须在 constructor 方法中调用 super 方法,否则使用this就会报错。 这是因为子类自己的this对象,必须先通过父类的构造函数完成塑造,得到与父类同样的实例属性和方法,然后再对其进行加工,加上子类自己的实例属性和方法。如果不调用super方法,子类就得不到this对象。

super虽然代表了父类A的构造函数,但是返回的是子类B的实例,即super内部的this指的是B的实例,因此super()在这里相当于A.prototype.constructor.call(this),所以super指向的是A的原型对象(A的prototype)

super可以作为函数和对象进行调用

- 作为函数则表示父类的构造函数

- 作为对象表示父类的原型对象而不是父类本身,只能调用到构造器里的属性和方法. 可以通过getter和setter监听存取值的行为

class Point { 
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
} 
class ColorPoint extends Point {
    constructor(x, y, color) {
        this.color = color;
        // ReferenceError super(x, y);
        this.color = color; // 正确
    }
}

静态方法和静态属性

静态方法可以跟非静态方法重名
父类静态方法可以被子类继承,但不能被实例继承 super在静态方法之中指向父类,在普通方法之中指向父类的原型对象. B继承A,需要调用super(),才能使用this