TS中面向对象的基本使用

CssHero

于 2024-02-22 15:35:57 发布

阅读量403

点赞数 11

文章标签： typescript 前端 javascript

本文链接：https://blog.csdn.net/CssHero/article/details/136235406

版权

文章目录

概要

本文主要深入学习TS的语法，了解TS中面向对象的基本使用，了解TS中类的成员修饰符public等,了解当属性为私有时修改时使用getter，setter等知识

四.TS的面向对象

1.类的基本使用

class Person {
    // 想要赋值前，需要先定义
    name: string
    age: number

    constructor(name: string, age: number){
        this.name = name
        this.age = age
    }

    info(){
        console.log(this.name, this.age);
        
    }
}

const p = new Person('wuu', 20)

p.info()

export{}

2.类的成员修饰符

◼ 在TypeScript中，类的属性和方法支持三种修饰符： public、private、protected、readonly

 public 修饰的是在任何地方可见、公有的属性或方法，默认编写的属性就是public的；

 private 修饰的是仅在同一类中可见、私有的属性或方法；

 protected 修饰的是仅在类自身及子类中可见、受保护的属性或方法；

 readonly 如果有一个属性我们不希望外界可以任意的修改，只希望确定值后直接使用

class Person {
    // 想要赋值前，需要先定义
    public name: string
    private age: number
    constructor(name: string, age: number){
        this.name = name
        this.age = age
    }

    private info(){
        console.log(this.name, this.age);
        
    }
}

const p = new Person('wuu', 20)

// p.info()  私有属性，不能访问，报错
console.log(p.name);


export{}

3.类使用时的语法糖

可以通过在构造函数参数前添加一个可见性修饰符 public private protected 或者 readonly 来创建参数属性，最后这些类属性字段也会得到这些修饰符；

class Person {
    // 赋值前参数有修饰符，可以不用提前定义
    constructor(public name: string, public age: number){
        this.name = name
        this.age = age
    }

    private info(){
        console.log(this.name, this.age);
        
    }
}

const p = new Person('wuu', 20)

// p.info()  私有属性，不能访问，报错
console.log(p.name);


export{}

4.getter和setter

◼ 在前面一些私有属性我们是不能直接访问的，或者某些属性我们想要监听它的获取(getter)和设置(setter)的过程，这个时候我们可以使用存取器。

什么时候用私有
- 当需要属性值修改时，需要进行拦截时
- 比如：年龄的值不能小于0，因此把age设置为私有属性，当set调用时，进行判断，是不是把age设置为小于0的

class Person {
    // 赋值前参数有修饰符，可以不用提前定义
    constructor(private _name: string, private _age: number){
        this._name = _name
        this._age = _age
    }
    
    get name() {
        return this._name
    }
    set name(newValue) {
        this._name = newValue
    }
}

const p = new Person('wuu', 20)

// _name为私有属性，可以通过get和set访问
console.log(p.name);


export{}

5.抽象类和抽象方法(了解)

typescript中的抽象类是提供其他类继承的基类，不能被实例化

用abstract关键字定义抽象类和抽象方法，抽象类中的抽象方法不包含具体实现并且必须在派生类中实现(即Animal类利用abstract关键字定义为抽象类和抽象方法，但是抽象方法要在其继承Animal类的Dog类中去实现)

这种做法类似多态：父类定义一个方法不去实现，让继承的子类去实现，每一个子类有不同的表现形式

//Animal是一个抽象类，因为他使用了abstract关键字，里面含有一个eat()抽象方法
abstract class Animal {
    constructor(public name: string) {
        this.name = name
    }
    abstract eat(): any  //抽象方法前有abstract关键字，抽象方法不包含具体实现，要在继承的子类中实现
    run() {   //非抽象方法
        console.log('非抽象方法');
    }
}
 //Dog中继承了抽象类Animal，所以必须实现父类抽象方法，否则编译报错
class Dog extends Animal {
    constructor(name: string) {
        super(name)
    }
    eat() {
        console.log(this.name + "吃肉")
    }
    
}

const dog = new Dog("狗")
dog.eat()