面向对象简介一---类【类属性+实例属性】+构造函数+继承+重写

一 、类

1-1 类

1. • 操作浏览器要使用window对象
   • 操作网页要使用document对象
   • 操作控制台要使用console对象
2. 通过继承可以将多个类中共有的代码写在一个父类中
   • 只需要写一次即可让所有的子类都同时拥有父类中的属性和方法
   • 如果希望在子类中添加一些父类中没有的属性或方法直接写

1-2 类属性和实例属性

1. 实例属性 ： 直接定义的属性是实例属性，需要通过对象的实例去访问

   const per = new Person();
   per.name
   

2. 静态属性：使用static开头的属性（类属性），可以直接通过类去访问

   Peron.name
   

3. readonly : 只读属性【实例属性】

   readonly name:string = '孙悟空'
   

1-3 例子

1. class Person {
     name: string = '孙悟空';
     age: number = 18;
     // 在属性前使用static关键字可以定义类属性（静态属性）
     static age: number = 18
   
     // 定义方法
     sayHello(){
       console.log('hello');
       
     }
   }
   
   const per = new Person()
   
   console.log(per);
   console.log(per.name, per.age);
   
   console.log(Person.age);
   per.sayHello();
   

二、 构造函数

   // 构造函数
class Dog {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    /// 在实例方法中，this就表示当前的实例
    this.name = name;
    this.age = age;
    console.log("构造函数执行了~~~");
  }
}

const dog = new Dog("小黑", 12);
console.log(dog);

   
   const dog = new Dog('小黑',12)
   log(dog)

2. constructor被称为构造函数

   • 构造函数会在对象创建时调用
   • 在实例方法中，this就表示当前的实例
   • 在构造函数中当前对象就是当前新建的对象
   • 可以通过this向新建的对象中添加属性

三、 继承【重写】

3-1 继承

1. (function(){
       // 定义一个表示狗的类
       class Dog{
           name: string;
           age: number;
       }
   })()
   

2. • Animal被称为父类，Dog被称为子类
   • 使用继承后，子类将会拥有父类所有的方法和属性
   • 通过继承可以将多个类中共有的代码写在一个父类中
     • 这样只需要写一次即可让所有的子类都同时拥有父类的属性和方法
     • 如果希望子类中添加一些父类中没有的属性和方法，直接加
   • 如果子类中添加了和父类相同的方法，则子类方法会覆盖掉父类的方法
     • 这种子类覆盖掉父类方法的形式，成为方法重写

3. (function () {
    // 定义一个animal的类
    class Animal{
     name: string;
     age: number;
   
     constructor(name: string, age: number) {
       this.name = name;
       this.age = age;
     }
     sayHello() {
       console.log('动物在叫');
     }
    }
    
     // 定义一个表示狗的类
     // 使Dog类继承Animal类
     // Animal被称为父类，Dog被称为子类
     class Dog extends Animal{
      run() {
       console.log(`${this.name}在跑~~~`);
      }
      sayHello() {
       // console.log('汪汪汪汪');
       // 在类的方法中，super就表当前类的父类
       super.sayHello();
      }
     // age: number;
     // constructor(name: string, age: number) {
     //   super(name);
     //   this.age =age;
     // }
     }
   
     // 定义一个表示猫的类
     class Cat extends Animal{
       // 子类覆盖父类方法的形式，成为重写
       sayHello() {
         console.log('汪汪汪汪');
        }
     }
   
     const dog = new Dog('旺财', 5)
     const cat = new Cat('咪咪', 12)
     console.log(dog);
     console.log(cat);
     
     dog.sayHello();
     dog.run();
     cat.sayHello();
     
   })();
   

3-2 重写

1. 子类中写了构造函数，子类构造函数中必须对付类构造函数进行调用

2. class Dog extends Animal{
    run() {
     console.log(`${this.name}在跑~~~`);
    }
    sayHello() {
     age: number;
     constructor(name: string, age: number) {
      super(name);
      this.age =age;
    }
   }