Typescript中的类

ゝ一纸荒年。 2022-12-29 09:23 196阅读 0赞

## Typescript中的类 ##

这里简单提下this 指向

> 普通函数this指向全局window(注意在严格模式下是undefined,也就是说TS下普通函数的指向是undefined),构造函数this指向当前函数  
> 普通函数谁调用就指向谁

ES5回顾类

function Person(){ 
        this.name='张三';
        this.age=20
        console.log(this);//指向当前类person,因为他是构造函数
    }
    Person.getInfo=function (){ 
    	console.log('静态方法')//类创建静态方法,会自动添加到constructor中
    }
    var p=new Person(); //对象实例化使用new
    console.log(p.name);//张三
    //函数原型链增加方法
    Person.prototype.sex='男'
    //原型链的方法会被重写,他是一级一级往上寻找的

**类继承**

//函数原型链增加方法
    Person.prototype.sex='男'
    function web(){ 
        Person.call(this)
    }
    var w =new web()
    console.log(w.name);//张三,w里面没有name属性他是继承构造函数的,他继承不了prototype原型链的属性跟方法

**原型链实现继承**

> 这上面的方式里面有个问题,实例化子类的时候没法给父类传参

**组合继承模式**

function web() { 
            Person.call(this,age,name) //这样就可以传入参数了,也可以继承构造函数里面的属性和方法
        }
      //web.prototype = new Person(20,'张三')//原型链继承方法
      web.prototype =Person.prototype//这种方式也可以

## TS类 ##

TS定义类

class Person { 
        public name: string; // public可以省略
        constructor(name: string) { //构造函数 实例化类的时候触发的方法
            this.name = name;
        }
        getName(): string { 
            return this.name;
        }
        setName(name: string): void { 
            this.name = name
        }
    }
    var p = new Person('张三');
    console.log(p.getName()); //张三
    p.setName('李四')
    console.log(p.getName());//李四

#### 2.ts中实现继承extends,super ####

> TS中类继承的用法跟ES6很相似  
> 类的多态就是一种模板多种形式,父类只写模板不写执行过程,具体实现方法在子类部分

//父类
    class Person { 
        public name: string; // public可以省略
        constructor(name: string) { //构造函数 实例化类的时候触发的方法
            this.name = name;
        }
        run():string{ 
            return `${ this.name}在运动`
        }
    }
    //子类继承父类
    class Web extends Person{ 
        public age:number
        constructor(name:string,age:number){ 
            super(name); //super()负责初始化this.相当于ES5中的call和apply方法。
            this.age=age; 
            //注意所有的子类独有公开属性应该写在继承父级属性super后面,不然在ts中就会报错
        }
        work():string{ 
            return `${ this.name}今年${ this.age}在工作`
        }
        run():string{ 
            return `${ this.name}在子类`//相同方法他会首先在自己的身上找,没有在去找父级
        }
    } 
    var w= new Web('王五',20)
    console.log(w.run());   //执行自己身上的,王五在子类
    console.log(w.work());//王五今年20在工作

#### 类的修饰符公有,保护,私有,只读(public、protected、private、readonly) ####

>  *  public: 公有 在类里面,子类,类外面都可以访问 默认
>  *  protected : 保护类型 在类里面,子类可以访问 , 类外部无法访问
>  *  private : 私有 只能在当前类里面访问,注意是当前
>  *  readonly : 只读 也就是只可以获取不能修改

#### 静态类 ####

class Person { 
        public name: string; // public可以省略
        static age:number=30;
        constructor(name: string) { //构造函数 实例化类的时候触发的方法
            this.name = name;
        }
        run():string{ 
            return `${ this.name}在运动`
        }
       static work():void{ 
            console.log(Person.age);  //30 如果在类前面定义属性的时候没有使用static的话就会报错,静态方法使用静态属性,直接类名加属性调用
            console.log(p.name);//张三 调用非静态属性,实例化类
        }
    }
    var p=new Person('张三');
    Person.work()

#### 抽象类(abstract) ####

用abstract 关键字定义抽象类和抽象方法,抽象类中的方法不包含具体实现并且必须在派生类中实现,abstract抽象方法只能在抽象类里面,抽象类里面定义标准,子类里面必须包含抽象类中的方法,**注意**抽象类无法创造实例

//无法创建实例,只是用来定义标准,不能直接创建实例
    abstract class Animal { 
        public name:string;
        constructor(name:string){ 
            this.name=name
        }
        abstract eat():any;//抽象方法在子类中必须实现
        run(){ 
            //非抽象方法子类可以不实现
        }
    }
    class Dog extends Animal { 
        constructor(name:string){ 
            super(name)
        }
        //抽象类的子类必须实现抽象类里面的抽象方法
        eat(){ 
            console.log(this.name+'吃骨头');
            
        }
    }
    var d= new Dog('旺财1')
    d.eat()