结论
- 父类member function 子类可以通过member function or member property 重写。
父类member property 子类只能通过member property重写。
为了更易于阅读,建议使用member function的方式定义。
2.Typescript没有只能重写不能重载实现多态,但是JS里可以多态。
Demo
(()=>{
class annimal{
name:string
constructor(name:string){
this.name = name
}
// run =function(distance:number=0){
// console.log(this.name +" running "+distance)
// }
run(distance:number=10){
console.log(this.name +" running "+distance)
}
}
class dog extends annimal{
kind:string
constructor(name:string,kind?:string){
super(name)
this.kind = kind
}
run(distance:number=10){
console.log(this.name +" running "+distance+" kind "+this.kind)
}
// run = function(distance:number=10){
// console.log(this.name +" running "+distance)
// }
}
class pig extends annimal{
constructor(name:string){
super(name)
}
run = function(distance:number,kind?:string){
console.log(this.name +" running "+distance+" kind "+kind)
}
}
new dog('dog','tibet').run(50)
new pig("pig").run(600,'Red pig')
}
)()
在生成的JS里,可以多态dog里面的run方法,但是在Typescript里没有办法做到真正的多态,只能重写,也就是run方法只能写一个,而不能有多个。
(() => {
class annimal {
constructor(name) {
this.name = name;
}
// run =function(distance:number=0){
// console.log(this.name +" running "+distance)
// }
run(distance = 10) {
console.log(this.name + " running " + distance);
}
}
class dog extends annimal {
constructor(name, kind) {
super(name);
this.kind = kind;
}
run(distance = 10) {
console.log(this.name + " running " + distance +
" kind " + this.kind);
}
run(distance,color){
console.log(this.name + " running " + distance +
" kind " + this.kind +" color "+color);
}
}
class pig extends annimal {
constructor(name) {
super(name);
this.run = function (distance, kind) {
console.log(this.name + " running " + distance + " kind " + kind);
};
}
}
new dog('dog', 'tibet').run(50,'blue');
new pig("pig").run(600, 'Red pig');
})();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./js/first.js"></script>
</body>
</html>