typescript的类

ES5类
 

 // es5类
    // 最简单的类
    function Student(){
        this.name = "小牛";
        this.age = 20;
    }
    const s = new Student();
    console.log(s.name);
    console.log("-----------------------")
    // 构造函数和原型链上增加方法
    function Person(){
        this.name = "小牛";
        this.age = 21;
        this.run = function(){
            console.log(this.name + "在运动");
        }
    }
    // 原型链上的属性会被多个实例共享 构造方法不会
    Person.prototype.sex = "man";
    Person.prototype.work = function(){
        console.log(this.name + "在工作");
    }
    var p = new Person();
    console.log(p.name);
    p.run();
    p.work();
    console.log("-----------------------")

    // 类里面的静态方法
    function Stu(){
        this.name = "小牛"; // 属性
        this.age = 21;
        this.run = function(){ // 实例方法
            console.log(this.name + "在运动");
        }
    }
    // 静态方法只能被类调用 不能被实例调用
    Stu.getInfo = function(){
        console.log("我是静态方法")
    }
    // var stu = new Stu();
    // stu.getInfo();
    // 类 调用静态方法
    Stu.getInfo();
    console.log("-----------------------")

    // 冒充继承
    function Girl(){
        this.name = "MM";
        this.age = 20;
        this.run = function(){
            console.log(this.name + "运动")
        }
    }
    // 原型链
    Girl.prototype.color = "pink";
    Girl.prototype.work = function(){
        console.log(this.name + "工作")
    }
    // Web类 继承Girl类 原型链 + 冒充继承
    function Web(){
        // 对象冒充继承 call apply bind
        Girl.call(this);
    }
    var w = new Web();
    // 冒充继承可以继承构造函数的属性和方法
    w.run();
    // 冒充继承可以继承构造函数中的属性和方法 但是不能继承原型链的属性和方法
    // w.work(); 
    console.log("-----------------------")

    //  原型链实现继承 继承Girl类
    function Father(){
        this.name = "牛小牛";
        this.age = 22;
        this.run = function(){
            console.log(this.name + "运动");
        }
    }
    Father.prototype.work = function(){
        console.log(this.name + "工作")
    }

    function Man(){
    }
    // 原型链继承 可以继承构造函数的属性和方法，也可以继承原型链上的属性方法
    Man.prototype = new Father();
    var m = new Man();
    console.log(m.age);
    m.run();
    m.work();
    console.log("-----------------------")
    // 原型链继承的问题?
    function F(name,age){
        this.name = name;
        this.age = age;
        this.run = function(){
            console.log(this.name + "运动")
        }
    }
    F.prototype.sex = "man";
    F.prototype.work = function(){
        console.log(this.name + "工作")
    }
    var f = new F("花花牛",21);
    f.work();
    function FF(name,age){
    }
    FF.prototype = new F();
    var ff = new FF("雨花雨",21);
    // 原型链继承传参的问题
    ff.run();
    console.log("-----------------------")

    // 原型链 + 冒充继承组合继承模式
    function P(name,age){
        this.name = name;
        this.age = age;
        this.run = function(){
            console.log(this.name + "运动")
        }
    }
    P.prototype.sex = "man";
    P.prototype.work = function(){
        console.log(this.name + "工作")
    }
    function PP(name,age){
        P.call(this,name,age);
    }
    PP.prototype = new P();
    var pp = new PP("雨花雨",22);
    pp.run();
    pp.work();
    console.log("-------------------------")
    // 原型链 + 冒充继承的另一种方式
    function Man(name,age){
        this.name = name;
        this.age = age;
        this.run = function(){
            console.log(this.name + "运动")
        }
    }
    Man.prototype.sex = "man";
    Man.prototype.work = function(){
        console.log(this.name + "工作")
    }
    function M(name,age){
        Man.call(this,name,age);
    }
    M.prototype = Man.prototype;
    var m = new M("奶牛",21);
    m.run();
    m.work();

ES6类
 

  // 类的声明
    class Person{
        // 构造函数
        constructor(name,age) { 
            this.name = name;
            this.age = age;
        }
        // 定义方法
        show(name){
            console.log(this.name + "显示")
        }
    }
    let p = new Person("小牛",21);
    console.log(p.name);
    console.log(p.age);
    p.show();
    console.log("------------------------------")
    // 静态成员
    class Phone{
        // static 修饰的属性和方法都是静态的只属于类
        static name = "Phone";
        static show(){
            console.log("静态方法")
        }
    }
    // 静态成员不能被实例化
    console.log(Phone.name);
    Phone.show();
    console.log("------------------------------")
    // 继承 extends super
    class A{
        constructor(name,age){
            this.name = name;
            this.age = age;
        }
        eat(){
            console.log("吃饭")
        }
    }
    class B extends A{
        constructor(name,age,color,size){
            super(name,age);
            this.color = color;
            this.size = size;
        }
        // 重写父类的方法
        eat(){
            console.log("吃晚饭")
        }
    }
    const b = new B("小牛",20,"skyblue",180);
    console.log(b.name);
    b.eat();
    console.log("------------------------------")

    // get set 方法 
    class Smart{
        // 用来获取属性的方法
        get price(){
            return "get方法获取属性"
        }
        // set 的时候 需要传入一个参数
        set price(newValue){
            console.log("set方法设置了属性")
        }
    }
    const smart = new Smart();
    smart.price = "set方法设置";
    console.log(smart.price)

TS类的声明
 

// ts 类的声明
class Person{
    name:string;  // 属性 默认public修饰 
    age:number;
    constructor(name:string,age:number){ // 构造函数 实例化的时候触发
        this.name = name;
        this.age = age;
    }
    show():void{
        console.log(this.name + "ts类中的方法")
    }
}
const person = new Person("小牛",21);
console.log(person.name);
console.log(person.age);
person.show();

类的get set方法

get 和 set方法用于获取和设置类的属性

// 类的get set方法
class Student{
    name:string;
    constructor(name:string) {
        this.name = name;
    }
    // 用来设置属性的值
    setName(name:string):void{
        this.name = name;
    }
    // 用来获取属性的值
    getName():string{
        return this.name;
     }
}
const student = new Student("大牛");
// 获取没有设置之前的值
console.log(student.getName());
// 设置值
student.setName("二牛")
// 获取设置之后的值
console.log(student.getName());

继承

继承使用关键字extends，调用父类使用super，子类继承父类的属性和方法，并且子类可以改写父类的属性和方法

// 类的继承 extends super
class Phone{
    brand:string;
    price:number;
    constructor(brand:string,price:number){
        this.brand = brand;
        this.price = price;
    }
    show():void{
        console.log("Phone.show");
    }
}
class SmartPhone extends Phone{
    color:any;
    size:any;
    constructor(brand:string,price:number,color:any,size:any){
        super(brand,price);
        this.color = color;
        this.size = size;
    }
    // 重写父类的方法
    show():any{
        console.log("SmartPhone.show")
    }
}
const smartPhone = new SmartPhone("iphoneX",7999,"black",5.5);
console.log(smartPhone.brand);
console.log(smartPhone.price);
console.log(smartPhone.color);
console.log(smartPhone.size);
smartPhone.show();

访问修饰符

typescript为我们提供了三种访问修饰符

public 公共的 作用范围 本类 子类 类外部

protected*保护的 作用范围 本类 子类

​ private 私有的 作用范围 本类

// 访问修饰符
/*
    public 公共的  作用范围  本类 子类 类外部
    protected 保护的  作用范围  本类 子类 
    private 私有的  作用范围  本类
*/ 
class School{
    public name:string;
    protected age:number;
    private sex:string;
    constructor(name:string,age:number,sex:string){
        this.name = name;
        this.age = age;
        this.sex = sex;
    }
    show():any{
        console.log("public---->" + this.name)
        console.log("protected---->" + this.age)
        console.log("private---->" + this.sex)
    }
}
const school = new School("xiaoniu",21,"man");
console.log(school.name);
school.show();
// age sex 分别是用 protected  private 在类外部不能访问所以编译出错
// console.log(school.age);
// console.log(school.sex);
class Teacher extends School{
    constructor(name:string,age:number,sex:string){
        super(name,age,sex);
    }
    show():any{ 
        console.log("public---->" + this.name)
        console.log("protected---->" + this.age)
        // sex 是private修饰的 继承过来的 sex是无法访问的所以会报错
        console.log("private---->" + this.sex)
    }
}
const teacher = new Teacher("daniu",22,"sex");
console.log(teacher.name);
teacher.show();

静态成员

static修饰的静态成员当类加载时就存在 只能被类调用 不能实例化

// 静态成员
// 静态成员当类加载时就存在 不能被实例化
class Per {
    public name:string;
    public age:number;
    // static声明 静态属性
    static sex:any = "man";
    constructor(name:string,age:number) {
        this.name = name;
        this.age = age;
    }
    static eat():void{
        console.log("静态方法")
    }
}
const p = new Per("小牛",21);
console.log(p.name)
// 静态成员只能被类调用
console.log(Per.sex)
Per.eat();

多态

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

class Animal{
    public name:string;
    constructor(name:string){
        this.name = name;
    }
    eat(){
        console.log("吃的方法!")
    }
}
class Dog extends Animal{
    constructor(name:string){
        super(name);
    }
    eat(){
        console.log(this.name + "吃骨头")
    }
}
const dog = new Dog("小狗狗");
dog.eat();
class Cat extends Animal{
    constructor(name:string){
        super(name);
    }
    eat(){
        console.log(this.name + "吃猫粮")
    }
}
const cat = new Dog("小花猫");
cat.eat();

抽象类

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

abstract 关键字修饰的抽象类和抽象方法， 抽象类中的抽象方法不包含具体的实现并且必须在派生类中实现

abstract 修饰的方法只能在抽象类中

// 抽象类
abstract class Animal {
    public name:any;
    constructor(name:any){
        this.name = name;
    }
    abstract eat():any;
    // 非抽象方法 子类可以不实现它
    say(){
        console.log(this.name + "在说话")
    }
}

class Dog extends Animal{
    constructor(name:any){
        super(name);
    }
    // 抽象类的子类必须实现抽象类的抽象方法
    eat(){
        console.log(this.name + "吃骨头")
    }
}

class Cat extends Animal{
    constructor(name:any){
        super(name);
    }
    eat(){
        console.log(this.name + "吃猫粮")
    }
}
const cat = new Cat("小花猫");
cat.eat();

​