5、类的概念和使用

空尽欢
141 阅读6分钟

一、类的基本使用

1.定义一个类

定义一个最简单的student类,这里要使用关键字class,类里边有一个得到学生my方法，代码如下：

  class student {
    my() {
      return {
          id:1,
          name:'小明',
          age:18,
      }
    }
  }
  
  const students = new student();
  console.log(students.my());

image.png

这是一个最简单的类了

2.类的继承

TypeScrip 的继承和ES6中的继承是一样的。关键字也是extends，这里新建一个xiaoming的类，然后继承自student类，在xiaoming类里写一个新的方法，叫做more,代码如下。

  class student {
    my() {
      return {
          id:1,
          name:'小明',
          age:18,
      }
    }
  }
  class xiaoming extends student {
    more() {
      return "你好！我是小明！";
    }
  }
  const students = new xiaoming();
  console.log(students.my());
  console.log(students.more());

image.png

3.类的重写

重写就是子类可以重新编写父类里边的代码。现在我们在xiaoming这个类里重写父类student的my()方法，代码如下：

class xiaoming extends student {
    my() {
        return {
            id:1,
            name:'小明',
            age:18,
            sex:'男'
        }
      }
    more() {
      return "你好！我是小明！";
    }
  }

简单理解，重写即将父类中对应方法复制带子类中，修改父类中返回对象。

4.super关键字

super关键字，它代表父类中的方法，super.my()即可拿到父类student中的my方法,如下：

  class student {
    my() {
      return '你好！'
    }
  }
  class xiaoming extends student {
    my() {
        return super.my()+'我是小红！'
      }
    more() {
      return "你好！我是小明！";
    }
  }
  const students = new xiaoming();
  console.log(students.my());
  console.log(students.more());

这时我们拿到了my方法返回的你好,然后再后面追加了我是小红。

image.png

二、类的访问类型

类的访问类型就是基于三个关键词private、protected和public。

1.public访问属性

public从英文字面的解释就是公共的或者说是公众的，在程序里的意思就是允许在类的内部和外部被调用。

class Person {
    public name:string='小明';
    public sayHello(){
        console.log(this.name + '你好！！') //this.name就是类的内部调用
    }
}

const person = new Person()
person.sayHello() //类的外部调用

image.png

如果不在类里对访问属性进行定义，那么它就会默认是public访问属性。

2.private访问属性

private 访问属性的意思是，只允许再类的内部被调用，外部不允许调用。 如果我们将name属性改成private,如下：

class Person {
    private name:string='小明';
    public sayHello(){
        console.log(this.name + '你好！！') //this.name就是类的内部调用
    }
}

const person = new Person()
console.log(person.name);//外部调用name,而name属性为private，这里报错！
person.sayHello() //类的外部调用

这时console.log(person.name)会报错，如下图：

image.png

3.protected访问属性

protected 允许在类内及继承的子类中使用,同private一样，外部不允许调用。如下：

class Person {
    protected name:string='小明';
    public sayHello(){
        console.log(this.name + '你好！！') //this.name就是类的内部调用
    }
}

const person = new Person()
console.log(person.name);//外部调用name,而name属性为protected，这里报错！  
person.sayHello() //类的外部调用

image.png

可以看出，当外部访问时，会发生报错。但是在继承的子类在可以调用。

class Person {
    protected name:string='小明';
    public sayHello(){
        console.log(this.name + '你好！！') //this.name就是类的内部调用
    }
}
class People extends Person{
    public names=this.name //this指向父类即Person类，this.name即在Person外部调用，前提是在继承的子类中
}

const person = new People()
console.log(person.names);//这时不会报错了 
person.sayHello() //类的外部调用

image.png

三、类的构造函数

1.构造函数

在页面里新建一个 Person 类，类的里边定义一个name，但是name我们并不给他值,然后我们希望在new出对象的时候，直接通过传递参数的形式，给name赋值，并打印出来。这时候我们就需要用到构造函数了，构造函数的关键字是constructor。

// class Person{
//     public name :string ;
//     constructor(name:string){
//         this.name=name
//     }
// }
//上面的代码简化一下：
class Person{
    constructor(public name:string){
    }
}

const person= new Person('小明')
console.log(person.name)

2.类继承中的构造器

在子类中使用构造函数需要用super()调用父类的构造函数。

class Person{
    constructor(public name:string){}
}

class Teacher extends Person{
    constructor(public age:number){
        super('小明') 
    }
}

const teacher = new Teacher(18)
console.log(teacher.age)
console.log(teacher.name)

这就是子类继承父类并有构造函数的原则，就是在子类里写构造函数时，必须用super()调用父类的构造函数，如果需要传值，也必须进行传值操作。就是是父类没有构造函数，子类也要使用super()进行调用，否则就会报错。如下：

class Person{}

class Teacher extends Person{
    constructor(public age:number){
        super() //父类没有构造函数，子类也要使用`super()`进行调用
    }
}

const teacher = new Teacher(18)
console.log(teacher.age)

四、类的 Getter、Setter 和 static 使用

1.类中的 Getter 和 Setter

私有访问类型private，其实他的最大用处是封装一个属性，然后通过 Getter 和 Setter 的形式来访问和修改这个属性。如下：

class myage {
    constructor(private age:number){}
  }

在myage类中，age设置为private属性，如果想要拿到它，就必须通过getter属性，getter属性的关键字是get,后边跟着类似方法的东西,但是你要注意，它并不是方法，归根到底还是属性。如下：

class myage {
    constructor(private age:number){}
    get mage(){
        return this.age
        //return this.age - 10 //可以在这做其他操作
    }
  }
  const age = new myage(28)

console.log(age.mage)

其实setter也是可以保护私有变量的，age是私有的，那类的外部就没办法改变，所以这时候可以用setter属性进行改变，setter属性的关键字是set,如下：

 class myage {
    constructor(private age:number){}
    get mage(){
        return this.age
    }
    set mage(age:number){
        this.age=age
        //return this.age=age + 1 //也可以在这做其他操作
      }
  }
  const age = new myage(28)
  age.mage=25 //类的外部改变
  console.log(age.mage)

2.类中的 static

关于类，都知道要想使用这个类的实例，就要先New出来(),常规写法如下：

class sayyou {
    sayLove() {
      return "I Love you";
    }
  }
  
  const say = new sayyou();//实例化
  console.log(say.sayLove());

如果想不new出对象，而直接使用这个方法，那TypeScript为你提供了快捷的方式，用static声明的属性和方法，不需要进行声明对象，就可以直接使用，代码如下。

class sayyou {
    static sayLove() {
      return "I Love you";
    }
  }
  
  console.log(sayyou.sayLove());

五、类的只读属性和抽象类

1.类里的只读属性 readonly

class Person {
    constructor(public name:string ){ }
}

const person = new Person('小明')
person.name= '小红'
console.log(person.name)

入上代码，这时候的name是可以随意修改的，如果不想让他随意改变，就可以使用readonly来进行约束，如下：

  class Person {
      constructor(public readonly name :string ){ }
  }

  const person = new Person('小明')
  person.name= '小红'//此处会报错
  console.log(person.name)

image.png

2.抽象类的使用

抽象类的关键词是abstract,里边的抽象方法也是abstract开头的，如下：

abstract class student{
        abstract study()  //因为没有具体的方法，所以我们这里不写括号
    }

    class xiaoming extends student{
        study(){
            console.log('英语第一名！！')
        }
    }
    
    class xiaohong extends student{
        study(){
            console.log('数学第一名！！')
        }
    }
    
    class xiaogang extends student{
        study(){
            console.log('语文第一名！！')
        }
    }

学习日期：2021/12/30

视频参考：www.bilibili.com/video/BV1qV…

文档参考：jspang.com/detailed?id…

仅供个人学习和记录

avatar
文章
阅读
粉丝