TypeScript面向对象

面向对象

面向对象：想进行执行某个事件，就去找事件对应的对象，把事情落实到对象身上

在程序中一切皆是对象，对象包含属性和方法

面向对象三大特征：封装、继承、多态

• 要想面向对象，操作对象，首先便要拥有对象

• 要创建对象，必须要先定义类，所谓的类可以理解为对象的模型，对象的种类

• 程序中可以根据类创建指定类型的对象

• 不同的类可以用来创建不同的对象

1.定义类

类：规定对象的属性和方法

class Person {
    //定义实例属性
    name: string = '孙悟空';
    
    //在属性前使用static关键词可以定义类属性（静态属性）
    static age: number = 18;
}
const per = new Person()

//直接定义的属性是实例对象，需要通过对象的实例去访问：
  const per = new Person();
  per.name
//使用static开头的属性是静态属性（类属性）, 可以直接通过类去访问
  Person.age

static的用法：可以省去创建实例的过程 类.属性 类.方法

class 类名 {
    属性名: 类型;
    constructor(参数: 类型){
        this.属性名 = 参数;
    } 
    //方法
    sayHello(){
        console.log('hello world')
    }
    //如果方法以为static开头则方位就是类方法，可以直接通过类去调用
    static sayHello(){
        console.log('hello world')
    }
}
实例.sayHello()
类.sayHello() //用了static，不再需要先创建一个实例

2.构造函数和this

可以使用constructor定义一个构造器方法；

注1：在TS中只能有一个构造器方法！

例如： this表示当前实例

class Dog{    //构造函数
    //定义参数类型
    name: string;
    age: number
    //定义函数
    constructor(name: string, age: number) {
        //在实例方法中，this就表示当前的实例
        //在构造函数中当前对象就是当前新建的那个对象
        //可以通过this向新建的对象中添加属性
        this.name = name;
        this.age = age;
    }
    bark(){
        //alert('汪汪汪')
        //在方法中可以通过this来表示当前调用方法的对象
        console.log(this.name);
    }
}
//使用函数
const dog = new Dog(name: '小黑', age: 4);
const dog2 = new Dog(name: '小白', age: 2);

dog2.bark();

同时也可以直接将属性定义在构造函数中：

class C {   //构造函数
    constructor(public name: string, public age: number) {
    }
}
//使用函数
const dog = new C(name: '小黑', age: 4);
const dog = new C(name: '小白', age: 2);

上面两种定义方法是完全相同的！

2.1-2.4为上述详细说明

2.1 封装

对象实质上就是属性和方法的容器，它的主要作用就是存储属性和方法，这就是所谓的封装

默认情况下，对象的属性是可以任意的修改的，为了确保数据的安全性，在TS中可以对属性的权限进行设置

• 静态属性（static）：

  • 声明为static的属性或方法不再属于实例，而是属于类的属性；

• 只读属性（readonly）：

  • 如果在声明属性时添加一个readonly，则属性便成了只读属性无法修改

• TS中属性具有三种修饰符：

  • public（默认值），可以在类、子类和对象中修改
  • protected ，可以在类、子类中修改
  • private ，可以在类中修改

示例：

public：

class Person{
    public name: string; // 写或什么都不写都是public
    public age: number;

    constructor(name: string, age: number){
        this.name = name; // 可以在类中修改
        this.age = age;
    }

    sayHello(){
        console.log(`大家好，我是${this.name}`);
    }
}

class Employee extends Person{
    constructor(name: string, age: number){
        super(name, age);
        this.name = name; //子类中可以修改
    }
}

const p = new Person('孙悟空', 18);
p.name = '猪八戒';// 可以通过对象修改

protected：

class Person{
    protected name: string;
    protected age: number;

    constructor(name: string, age: number){
        this.name = name; // 可以修改
        this.age = age;
    }

    sayHello(){
        console.log(`大家好，我是${this.name}`);
    }
}

class Employee extends Person{

    constructor(name: string, age: number){
        super(name, age);
        this.name = name; //子类中可以修改
    }
}

const p = new Person('孙悟空', 18);
p.name = '猪八戒';// 不能修改

private：

class Person{
    private name: string;
    private age: number;

    constructor(name: string, age: number){
        this.name = name; // 可以修改
        this.age = age;
    }

    sayHello(){
        console.log(`大家好，我是${this.name}`);
    }
}

class Employee extends Person{

    constructor(name: string, age: number){
        super(name, age);
        this.name = name; //子类中不能修改
    }
}

const p = new Person('孙悟空', 18);
p.name = '猪八戒';// 不能修改

2.2 属性存取器

• 对于一些不希望被任意修改的属性，可以将其设置为private
• 直接将其设置为private将导致无法再通过对象修改其中的属性
• 我们可以在类中定义一组读取、设置属性的方法，这种对属性读取或设置的属性被称为属性的存取器
• 读取属性的方法叫做setter方法，设置属性的方法叫做getter方法

示例：

class Person{
    private _name: string;

    constructor(name: string){
        this._name = name;
    }

    get name(){
        return this._name;
    }

    set name(name: string){
        this._name = name;
    }

}

const p1 = new Person('孙悟空');
// 实际通过调用getter方法读取name属性
console.log(p1.name);
// 实际通过调用setter方法修改name属性 
p1.name = '猪八戒'; 

2.3 静态属性

• 静态属性（方法），也称为类属性。使用静态属性无需创建实例，通过类即可直接使用
• 静态属性（方法）使用static开头

示例：

class Tools{
    static PI = 3.1415926;
    
    static sum(num1: number, num2: number){
        return num1 + num2
    }
}

console.log(Tools.PI);
console.log(Tools.sum(123, 456));

2.4 this

• 在类中，使用this表示当前对象

3.继承

• 出现大量重复代码，可以提取到公共区域共享。
• 继承时面向对象中的又一个特性
• 通过继承可以将其他类中的属性和方法引入到当前类中

示例：

class Animal{
    name: string;
    age: number;

    constructor(name: string, age: number){
        this.name = name;
        this.age = age;
    }
    sayHello(){
        console.log('动物在叫')
    }
}
/*Dog extends Animal
    -此时，Animal被称为父类，Dog被称为子类
    -使用继承后，子类将会拥有父类所有的方法和属性
            这样只需要写一次即可让所有的子类都同时拥有父类中的属性和方法
            如果希望在子类中添加一些父类中没有的属性或方法直接加行
    -如果在子类中添加了和父类相同的方法，则子类会覆盖掉父类的方法
            这种子类覆盖父类方法的形式，我们称为方法重写
*/  
//定义一个表示狗的类
//使Dog类继承Animal类
class Dog extends Animal{  //extend表示继承

    sayHello(){
        console.log(`${this.name}在汪汪叫！`);
    }
}

const dog = new Dog(name：'旺财',age: 4);
dog.bark();

通过继承可以在不修改类的情况下完成对类的扩展，继承家产不影响我接着赚钱

3.1重写

• 如果在子类中添加了和父类相同的方法，则子类会覆盖掉父类的方法
• 这种子类覆盖父类方法的形式，我们称为方法的重写

示例：

class Animal{  //这是父类
    name: string;
    age: number;

    constructor(name: string, age: number){
        this.name = name;
        this.age = age;
    }
    //这是父类中的原方法
    run(){
        console.log(`父类中的run方法！`);
    }
}

class Dog extends Animal{  //这是子类
/*  
   -如果在子类中添加了和父类相同的方法，则子类会覆盖掉父类的方法
    这种子类覆盖父类方法的形式，我们称为方法重写
*/  
    run(){
        //在类的方法中 super就表示当前类的父类实例
        super.console.log(`子类中的run方法，会重写父类中的run方法！`);
    }
}

const dog = new Dog('旺财', 4);
dog.bark();

3.1.1 Super

• 在子类中可以使用super来完成对父类的引用，super就表示当前类的父类实例

  注意：

  • 子类继承父类时，必须调用父类的构造方法

  • 如果子类中也定义重写了构造方法（给函数修改或者新增参数），在X类中不调用super将会报错！

class A {   //这是父类
    protected num: number;
    constructor(num: string) {
        this.num = num;
    }
}
class X extends A { //这是子类
    protected name: string;
    constructor(num: string, age: number) {
        //如果在子类中写了构造函数，在子类构造函数中必须对父类进行调用
        super(num);//调用父类的构造函数
        this.age = age;
    }
}
const dog = new A(num: 'wang', age: 18); //age是子类构造函数新赠的参数

4.抽象类（abstract class）

• 抽象类就是专门用来被继承的类

  • 抽象类和其他类区别不大，只是不能用来创建实例对象

  • 当父类的作用是专门被别的类继承，不希望被用来创建实例对象，可以使用抽象类，把父类变成模板，只允许被继承。

  • 使用abstract开头的方法叫做抽象方法，抽象方法没有方法体只能定义在抽象类中，继承抽象类时抽象方法必须要实现;

//这是父类
abstract class Animal{    //抽象类：abstract class
  abstract run(): void;   //抽象类可以添加抽象方法abstract 方法名()，返回值为空
  bark(){
      console.log('动物在叫~');
  }
}
//这是子类
class Dog extends Animals{  
  run(){
      console.log('狗在跑~');
  }
}

声明：本文内容引自bilibili “尚硅谷TypeScript教程”
个人学习归纳总结 ，欢迎畅谈。