typescript - 4.es5与typescript的类与继承
ES5中的类与类的继承
（1）简单的类
function Person() {
this.name = '张三';
this.age = 20;
}
var p = new Person();
alert(p.name);
（2）构造函数和原型链里面增加方法
function Person() {
this.name = '张三'; /*属性*/
this.age = 20;
this.run = function () {
alert(this.name + '在运动');
}
}
//原型链上面的属性会被多个实例共享 构造函数不会
Person.prototype.sex = "男";
Person.prototype.work = function () {
alert(this.name + '在工作');
}
var p = new Person();
// alert(p.name);
// p.run();
p.work();
（3）ES5静态方法
function Person() {
this.name = '张三'; /*属性*/
this.age = 20;
this.run = function () { /*实例方法*/
alert(this.name + '在运动');
}
}
Person.getInfo = function () {
alert('我是静态方法');
}
//调用静态方法
Person.getInfo();
（4）es5里面的继承 对象冒充实现继承
对象冒充可以继承构造函数里面的属性和方法 但是没法继承原型链上面的属性和方法
function Person() {
this.name = '张三'; /*属性*/
this.age = 20;
this.run = function () { /*实例方法*/
alert(this.name + '在运动');
}
}
Person.prototype.sex = "男";
Person.prototype.work = function () {
alert(this.name + '在工作');
}
//Web类 继承Person类 原型链+对象冒充的组合继承模式
function Web() {
Person.call(this); /*对象冒充实现继承*/
}
var w = new Web();
// w.run(); //对象冒充可以继承构造函数里面的属性和方法
w.work(); //对象冒充可以继承构造函数里面的属性和方法 但是没法继承原型链上面的属性和方法
（5）es5里面的继承 原型链实现继承
原型链实现继承:可以继承构造函数里面的属性和方法 也可以继承原型链上面的属性和方法
function Person() {
this.name = '张三'; /*属性*/
this.age = 20;
this.run = function () { /*实例方法*/
alert(this.name + '在运动');
}
}
Person.prototype.sex = "男";
Person.prototype.work = function () {
alert(this.name + '在工作');
}
//Web类 继承Person类 原型链+对象冒充的组合继承模式
function Web() {
}
Web.prototype = new Person(); //原型链实现继承
var w = new Web();
//原型链实现继承:可以继承构造函数里面的属性和方法 也可以继承原型链上面的属性和方法
//w.run();
w.work();
（6）原型链继承的问题？有参数的情况
实例化子类的时候没法给父类传参
function Person(name,age){
this.name=name; /*属性*/
this.age=age;
this.run=function(){ /*实例方法*/
alert(this.name+'在运动');
}
}
Person.prototype.sex="男";
Person.prototype.work=function(){
alert(this.name+'在工作');
}
function Web(name,age){
}
Web.prototype=new Person();
var w=new Web('赵四',20); //实例化子类的时候没法给父类传参
w.run();
// var w1=new Web('王五',22);
（7）原型链+对象冒充的组合继承模式
有参数的的情况下，原型链+对象冒充，可以传参给子类
function Person(name,age){
this.name=name; /*属性*/
this.age=age;
this.run=function(){ /*实例方法*/
alert(this.name+'在运动');
}
}
Person.prototype.sex="男";
Person.prototype.work=function(){
alert(this.name+'在工作');
}
function Web(name,age){
Person.call(this,name,age); //对象冒充继承 实例化子类可以给父类传参
}
Web.prototype=new Person();
var w=new Web('赵四',20); //实例化子类的时候没法给父类传参
// w.run();
w.work();
// var w1=new Web('王五',22);
（8）原型链+对象冒充继承的另一种方式
Web.prototype=new Person();的另一种写法
Web.prototype=Person.prototype;
Typescript中的类与继承
（1）ts中类定义
class Person{
name:string; //属性 前面省略了public关键词
constructor(n:string){ //构造函数 实例化类的时候触发的方法
this.name=n;
}
run():void{
alert(this.name);
}
}
var p=new Person('张三');
p.run()
（2）ts中的继承：extends与 super
class Web extends Person{
constructor(name:string){
super(name); /*初始化父类的构造函数*/
}
}
var w=new Web('李四');
alert(w.run());
（3）类的修饰符
public
在当前类里面、 子类 、类外面都可以访问
protected：保护类型
在当前类里面、子类里面可以访问 ，在类外部没法访问
private ：私有
在当前类里面可以访问，子类、类外部都没法访问
（4）静态属性与方法 static
class Per{
public name:string;
public age:number=20;
//静态属性
static sex="男";
constructor(name:string) {
this.name=name;
}
run(){ /*实例方法*/
alert(`${this.name}在运动`)
}
static print(){ /*静态方法 里面没法直接调用类里面的属性*/
alert('print方法'+Per.sex);
}
}
（5）readonly修饰符
class Octopus {
readonly name: string;
readonly numberOfLegs: number = 8;
constructor (theName: string) {
this.name = theName;
}
}
let dad = new Octopus("Man with the 8 strong legs");
dad.name = "Man with the 3-piece suit"; // 错误! name 是只读的.
（6）抽象类 abstract
抽象类做为其它派生类的基类使用。 它们一般不会直接被实例化。 不同于接口，抽象类可以包含成员的实现细节。 abstract关键字是用于定义抽象类和在抽象类内部定义抽象方法。
abstract class Animal{
public name:string;
constructor(name:string){
this.name=name;
}
abstract eat():any; //抽象方法不包含具体实现并且必须在派生类中实现。
run(){
console.log('其他方法可以不实现')
}
}
// var a=new Animal() /*错误的写法*/
class Dog extends Animal{
//抽象类的子类必须实现抽象类里面的抽象方法
constructor(name:any){
super(name)
}
eat(){
console.log(this.name+'吃粮食')
}
}
var d=new Dog('小花花');
d.eat();
class Cat extends Animal{
//抽象类的子类必须实现抽象类里面的抽象方法
constructor(name:any){
super(name)
}
run(){
}
eat(){
console.log(this.name+'吃老鼠')
}
}
var c=new Cat('小花猫');
c.eat();
