TypeScript 基础学习(二)


今天接着学习ts中的类相关知识

回顾es5继承

// es5里面得类 实际上是个方法
function Person(){
    this.name = 'zhangsan';
    this.age = 20;
}
// 然后实例化
var p = new Person();
// 这里只有属性 没有方法 这是最最简单的类

// 构造函数和原型链里面增加方法
function Person(){
    this.name = 'zhangsan';
    this.age = 20;
    this.run = function(){
        console.log(this.name + 'x123')
    }
}
// 然后实例化
var p = new Person();
p.run()

// 也可以再原型链上给他扩展属性 跟方法
Person.prototype.sex = 1;
Person.prototype.work = function(){
    console.log('start work')
}
// 当然 原型链上的属性会被多个实例共享,但是构造函数不会

// 类里面的静态方法
// 向上面的run()就是实例方法
Person.getInfo = function(){
    console.log('Jingtai')
}
//不需要实例可以直接调用 调用静态方法
Person.getInfo()

// es5 继承
// 新增一个Web类 继承Person类 一般用原型链+对象冒充的组合继承模式
function Web(){
    personalbar.call(this) //对象冒充 实现继承
};
// 那么实例之后 可以调用person里面的run方法了 对象冒充可以继承构造函数里面的属性和方法
// 但是调用work方法,就会报错, 因为对象冒充继承不能继承原型链里面的方法


// 原型链继承:
Web.prototype = new Person()

// 原型链实现继承,既可以继承构造函数的属性和方法,也可以继承原型链上的方法和属性,
// 但是:比如 function Person(name,age){ function run(){console.log(this.name+this.age)} }
// 那么 function Web(name,age){} 之后继承并实例化 Web.prototype = new Person(); let w = new Web('a',15) w.run()
// 就会发现问题, 实例化子类的时候没法给父类 传参 最后输出 undefinedundefined

// 于是就结合两种方法 
function Web(name.age){
    Person.call(this,name,age); //对象冒充继承 实例化子类可以给父类传参
}

// 另一种方式 也可以
Web.prototype = Person.prototype 

ts中的类,类的继承,属性修饰符

类,类的继承

// -----------------------------------------------------------------------------------------------------------------------
// ts 中定义类
class Person{
    name:string; //属性  //前面省略的public关键字
    constructor(name:string){ //构造函数 实例化类的时候触发的方法
        this.name = name
    }

    run():void{
        console.log(this.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())

// ts中的继承
class Person{
    name:string;
    constructor(name:string){
        this.name = name;
    }

    run():string{
        return `${this.name}`
    }
}

var p = new Person('王五')
console.log(p.run())


class Web extends Person{
    constructor(name:string){
        super(name)//表示初始化父类的构造函数
    }
}

var w = new Web('李四')
console.log(w.run())

// ts 中关于继承,  父类的方法和子类的方法一致,会先调用子类的方法.如果子类没有 才回去父类里面找

属性修饰符

// 类 里面的修饰符
// 在typescript 里面定义属性的时候给我们提供了 三种修饰符
//  public   公有   在类里面,子类,类外面,都可以访问  
// protected  保护类型 在类里面,子类里面可以访问, 在类外部无法访问
// private 私有类型 在类里面可以访问,子类和类外部无法访问
// 如果声明属性的时候不加修饰符,那么默认是共有属性
// 例如:
class Person{
    public name:string;
    constructor(name:string){
        this.name = name;
    }

    run():string{
        return `${this.name}`
    }
}

// 这就是公有属性声明方式,另外两种同理

类中的静态属性 静态方法 抽象类 以及多态

静态属性 静态方法

//ts中的静态属性 静态方法
// ------------------------------------------------------------------
// 首先先回顾静态属性跟静态方法的知识
function Person(){
    this.run1 = function(){}
}

Person.name = 'zhangsan'//静态属性
Person.run2 = function(){}//静态方法
// 可以通过Person.name Person.run2 直接调用
// run1 则现在实例化 再通过实例去调用

// ts中的静态属性静态方法
class Person{
    public name:string
    static age:number=20;
    constructor(name){
        this.name = name
    }
    run(){
        console.log('run')
    }
    work(){
        console.log('work')
    }

    static print(){
        console.log('静态')
        console.log(this.name)
        console.log(Person.age)//静态方法里面无法直接调用类里面的属性,必须是声明的静态属性 才可以调用
    }//这就是静态方法
}

var p = new Person('张三')
p.run(); //这就是调用实例方法,也就是成员方法
Person.print();//就可以直接调用静态方法

多态

父类定义一个方法不实现,让继承它的子类去实现,每一个子类有不同的表现

// -------------------------------------------------------------------
// 多态  属于继承,也是继承的一种表现
class Animal{
    name:String;
    constructor(name:string){
        this.name = name
    }
    eat(){
        console.log('eat')
    }
}

class Dog extends Animal{
    constructor(name:string){
        super(name)
    }
    eat(){
        return this.name + '吃肉'
    }
}

class Cat extends Animal{
    constructor(name:string){
        super(name)
    }
    eat(){
        return this.name + '吃鱼'
    }
}

// 父类中的eat方法,具体吃什么 不知道
// 继承它的子类去实现,每个子类的表现不一致
// 实际上也是子类分别去重写父类的方法,分别实现各自的功能

抽象类

ts中的抽象类,他是提供其他类继承的基类,不能直接被实例化
用abstract关键字定义抽象类和抽象方法,抽象类中的抽象方法不包含具体实现,并且必须在派生类中去实现
所以abstract抽象方法,只能放在抽象类里面
抽象类和抽象方法 是用来定义标准
比如
想定义这个标准:Animal这个类 要求他的子类必须包含eat方法

abstract class Animal{
    public name:string;
    constructor(name:string){
        this.name = name
    }
    abstract eat():any;
}

// 这个时候直接实例化
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:string){
        super(name)
    }
    run(){}
}

// 这里看到 猫 类直接报错非抽象类‘cat’没有实现继承自‘animal’类的抽象成员eat

下一篇文章记录ts的接口相关知识

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值