TypeScript中的class(类)

概览

要想面向对象,操作对象,首先便要拥有对象;
要创建对象,必须要先定义类,所谓的类可以理解为对象的模型;
程序中可以根据类创建指定类型的对象;

一. 定义类

class 类名 {
    属性名: 类型;
    
    constructor(参数: 类型){
        this.属性名 = 参数;
    }
    
    方法名(){
        ....
    }

}

二. 构造函数

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

class C{
    name: string;
    age: number

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

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

class C {
    constructor(public name: string, public age: number) {
    }
}

子类继承父类时,必须调用父类的构造方法(如果子类中也定义了构造方法)!

class A {
    protected num: number;
    constructor(num: number) {
        this.num = num;
    }
}

class X extends A {
    protected name: string;
    constructor(num: number, name: string) {
        super(num);
        this.name = name;
    }
}

如果在X类中不调用super将会报错!

三.封装

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

1. 静态属性(static):

声明为static的属性或方法不再属于实例,而是属于类的属性;

只读属性(readonly):

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

2. TS中属性具有三种修饰符:

public(默认值):可以在类、子类和对象中访问和修改
protected :可以在类、子类中访问和修改
private :可以在类中修改

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 = '猪八戒';// 不能修改

3. 属性存储器

对于一些不希望被任意修改的属性,可以将其设置为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 = '猪八戒'; 

同时,可以根据set方法根据实际需要,对赋值进行校验和判断,增强代码的健壮性。

4. 静态属性和方法

静态属性(方法),也称为类属性。使用静态属性无需创建实例,通过类即可直接使用
静态属性(方法)使用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));

四. 继承

通过继承可以将其他类中的属性和方法引入到当前类中,相当于把父类的内容复制到子类。
特点:

  1. 重写:发生继承时,如果子类中的方法会替换掉父类中的同名方法,这就称为方法的重写;
  2. 在子类中可以使用super来完成对父类的引用

五. 抽象类(abstract class)

抽象类是专门用来被其他类所继承的类,它只能被其他类所继承不能用来创建实例

abstract class Animal{
  abstract run(): void;
  bark(){
      console.log('动物在叫~');
  }
}

class Dog extends Animals{
  run(){
      console.log('狗在跑~');
  }
}

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

六. class从es5推演过程

1. 实例和原型之间的关系

  1. es5举例
function Human(name){
  this.name = name
}
Human.prototype.run = function(){
  console.log('走你')
}

function Man(name){
    this.sex = '男'
        Human.call(this,name)
}
Man.prototype.__proto__ = Human.prototype
//这里需要注意的问题是被修改的原型链的属性必须修改完后才能声明
//也就是这句话必须得写在habit前,否则原型链一修改它里面的属性和方法就没了
Man.prototype.habit = function(){
    console.log('喜欢钓鱼')
}
  1. es6class 实现
class Human{
    constructor(name){
        this.name = name
    }
    run(){
        console.log('走你')
    }
}
class Man extends Human{
    constructor(name){
        super(name)
        this.sex='男'
    }
    habit(){
        console.log('喜欢钓鱼')
    }
}

es6中类的写法:自身属性写在constructor里面,共有属性(原型链上的)run直接和他并列着写
继承的写法:class后面是子类然后extends你的父类
也就是

Man extends Human
//等价于
Man.prototype.__proto__ = Human.prototype

2. static

  1. es6
class userS {
    static a = 1;
    static sayHello = () => {
        console.log(this === userS,this.a)
    }
}

userS.sayHello() // true 1
  1. es5实现
function userS() {}
userS.a = 1;
userS.sayHello = function() {
    console.log(this.a,this === userS)
}

userS.sayHello() // 1 true

你可能感兴趣的:(TypeScript,typescript,前端,javascript)