携手创作,共同成长!这是我参与「掘金日新计划 · 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