类的基本实现与继承

类的概念与语法

类的概念

类描述了所创建的对象共同的属性和方法

类的语法

通过class声明一个类，主要包含属性、构造函数、方法三个模块
Eg

ts
class Calculate {
  // 类的属性
  public x: number
  public y: number

  // 构造函数
  constructor(x: number, y: number) {
    this.x = x
    this.y = y
  }

  // 类的方法
  add () {
    return this.x + this.y
  }
}

constructor()方法是类的默认方法，通过new来生成对象实例时，自动调用该方法。换句话说，constructor()方法默认返回实例对象this

注意点

• 类的内部所有定义的方法，都是不可枚举的
• constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加
• constructor方法默认返回实例对象（即this），完全可以指定返回另外一个对象
• 类不存在变量提升（hoist）

类的属性和方法

1. name属性

本质上，ES6的类只是ES5的构造函数的一层包装，所以函数的许多特性都被Class继承，包括name属性

class Point{}
Point.name // "Point"

name属性返回紧跟在class关键字后面的类名

类的属性修饰符(访问修饰符)

包含

• 类属性
  • static 静态属性
• 实例属性
  • public 公开属性
  • private 私有属性
  • protected 保护属性
  • readonly 只读属性

static

说明

表示这个方法是静态的，此属性存在于类本身上面而不是类的实例上，访问时需要通过类.属性名访问

Eg

class Presson {
    static name:string = "一二三"
}
// 访问类的静态属性  
console.log(Presson.name)

public

说明

表示这个方法是公开的，指定类的成员可以在声明它的类的外部访问和修改

注意

在TypeScript里，成员都默认为public;

Eg

ts
    class Calculate {
        // 类的属性
        public x: number
        public y: number

        // 构造函数
        public constructor(x: number, y: number) {
            this.x = x
            this.y = y
        }

        public add() {
            return this.x + this.y
        }
    }

    let a = new Calculate(1,2)

    console.log(a) // 1

private

说明

表示这个方法是私有的，使用private标记成员后，该成员就不能在类的外部访问，只能在类的内部访问，也不能在子类访问

Eg

protected

说明

表示这个方法是受保护的，使用protected标记成员后，该成员只能在被类的内部和类的子类访问

Eg

ts
//类的属性 public 
class Calculate {
    // 类的属性
    public x: number
    protected y: number

    // 构造函数
    public constructor(x: number, y: number) {
        this.x = x
        this.y = y
    }

    public add() {
        return this.x + this.y
    }
}

// operation继承Calculate
class operation extends Calculate {
    private z: number
    constructor(x: number, y: number, z: number) {
        super(x, y)
        this.z = z
    }
    sum(){
        return this.x+this.y+this.z
    }
}

let a = new Calculate(1, 2)
let b = new operation(1,2,3)

console.log(a.x)

console.log(a.y) // 属性“y”受保护，只能在类“Calculate”及其子类中访问。

readonly

说明

表示这个方法是只读，可以使用readonly修饰符将类的属性设置为只读，只读属性必须在声明时或构造函数里被初始化

Eg

ts
class Calculate {
    // 类的属性
    public x: number
    readonly y: number

    // 构造函数
    public constructor(x: number, y: number) {
        this.x = x
        this.y = y
    }

    public add() {
        return this.x + this.y
    }
}

let a = new Calculate(1,2)
console.log(a.y)
a.y = 10

类的方法修饰符

说明

方法修饰符只有public、protected、private三种修饰符，readonly修饰符只能用在属性声明或索引签名中

public

如果使用public来修饰方法或属性, 那么表示这个方法或属性是公开的
可以在类的内部使用, 也可以在子类中使用, 也可以在外部使用

protected

如果使用protected来修饰方法或属性, 那么表示这个方法或属性是受保护的
可以在类的内部使用, 也可以在子类中使用

private

如果使用private来修饰方法或属性, 那么表示这个方法或属性是私有的
只能在类的内部使用

类的可选属性与参数属性

类的可选属性

说明

类似于接口中的可选属性，可传可不传

Eg

ts
//类的可选属性  
class Person {
    // 注意点: 在TS中如果定义了实例属性, 那么就必须在构造函数中使用, 否则就会报错
    name: string;
    age?: number; // 可选属性
    constructor(name: string, age?: number) {
        this.name = name;
        this.age = age;
    }
}
let p = new Person('lnj')  
console.log(p)  

类的参数属性

说明

类的构造函数中的属性,用于实例属性的接收和定义

Eg

ts
    //类的参数属性  
    class Person {
        constructor(public name: string, public age?: number) {
            this.name = name;
            this.age = age;
        }
    }
    let p = new Person('lnj')  
    console.log(p) 

类的继承

说明

implements

实现，一个新的类，从父类或者接口实现所有的属性和方法，同时可以重写属性和方法，包含一些新的功能

extends

继承，一个新的接口或者类，从父类或者接口继承所有的属性和方法，不可以重写属性，但可以重写方法

Eg

interface IPerson {
  age: number;
  name: string;
}

interface IPeoPle extends IPerson {
  sex: string;
}

class User implements IPerson {
  age: number;
  name: string;
}

interface IRoles extends User{

}

// 使类Roles从User继承
class Roles extends User{
  
}

注意点

1. 接口不能实现接口或者类，所以实现只能用于类身上,即类可以实现接口或类
2. 接口可以继承接口或类
3. 类不可以继承接口，类只能继承类
4. 可多继承或者多实现
5. 派生类(子类)中同样含有构造函数时需要手动调用super方法，在类的方法中super表示当前类的父类

ts
    ( function () {
    //类的属性 public
    class Calculate {
    // 类的属性
    public x: number
    protected y: number

            // 构造函数
            constructor(x: number, y: number) {
                this.x = x
                this.y = y
            }

            add() {
                return this.x + this.y
            }
        }

        // operation继承Calculate
        class operation extends Calculate {
            z: number

            constructor(x: number, y: number, z: number) {
                super(10, 2)//子类的构造函数中必须手动调用super
                this.z = z
            }

            add() {
                return this.x + this.y + this.y
            }
        }

        let b = new operation(1, 2, 3)

        console.log(b)

    })()

抽象类与多态

抽象类

说明

抽象类专门用于定义外界无法直接创建的类
抽象类一般用于定义基类
抽象类和接口一样用于约束子类

注意点

抽象类中的抽象方法不包含具体实现并且必须在派生类中实现，也就是无法通过new创建抽象类的实例对象

语法

使用abstract关键字定义抽象类和在抽象类内部定义抽象方法

Eg

多态

说明

父类定义一个方法不去实现，让继承他的子类去实现，每一个子类有不同的表现（相当于重写父类方法） 多态属于继承

Eg

ts
class Futher {
    public age: number;
    constructor(age: number) {
        this.age = age
    }
    counts(): void {
        console.log(this.age)
    }
}
class children1 extends Futher {
    constructor(age: number) {
        super(age)
    }
    counts(): void {    /* 多态，重写方法不执行父类方法 */
        console.log(this.age - 1)
    }
}
class children2 extends Futher {
    constructor(age: number) {
        super(age)
    }
    counts(): void {
        console.log(this.age + 1)
    }
}
let young = new children1(18)
let old = new children2(70)
let ageList:Futher[] = [young,old]
ageList.forEach(i=>{
    i.counts() //此时会自动判断是哪种实例从而执行对应方法  
})

存储器

说明

通过get/set来截取对对象成员的访问，有效的控制对对象成员的访问，使得程序更健壮
当属性容易被修改错误时，对计算要求较高时使用

Eg

ts
    let passcode = "secret passcode";

    class Employee {
        name: string;
        age: number;
        
        get name(alue:string) {
            return this.Name;
        }
        
        set name(alue:string) {
           this.name=value
        }
        
        get age(value:number) {
            return this.age;
        }
        
        set age(value:number) {
           this.age=value
        }
        
    }

    let employee = new Employee();
    employee.name = "Bob Smith";//调用set,设置

注意点

• 对于private私有属性修饰符可以通过在类的内部添加方法使得私有属性可以被外部访问

Tips

说明

一些小点汇总

Eg

简化写法

在类的构造函数参数中添加属性修饰符，即可简化

( function () {
    //类的属性 public 
    /*
    class Calculate {
        // 类的属性
        public x: number
        protected y: number

        // 构造函数
        constructor(x: number, y: number) {
            this.x = x
            this.y = y
        }

        add() {
            return this.x + this.y
        }
    }
    */
    
    //简化写法
    class Calculate {
        constructor(public x: number, public y: number) {
        }
    }
})()