TS中Class类构造函数和this的使用

一、构造函数

constructor是构造函数，构造函数会在对象被实例化时调用

constructor （） {  // 构造函数体.. }

 如下代码中我们实例化了三个对象，每一次都会调用一次constructor函数，输出“构造函数被调用了”

class Dog{
    constructor() {
        console.log("构造函数被调用了");
    }
}
 
const dog1 = new Dog();  // 打印：构造函数被调用了
const dog2 = new Dog();  // 打印：构造函数被调用了
const dog3 = new Dog();  // 打印：构造函数被调用了

我们也可以在实例化对象的时候传入参数，例如我们这里传入姓名和年龄，在constructor函数中接收参数

class Dog{
    constructor(name:string, age:number) {
        console.log(name, age);
    }
}
 
const dog1 = new Dog("大黄", 3);  // 大黄 3
const dog2 = new Dog("旺财", 4);  // 旺财 4
const dog3 = new Dog("小黑", 4);  // 小黑 4

二、类中的this 

我们传入参数过后过后并没有赋值给我们的对象的属性，所以每个对象依旧是{ }

this表示的是当前的实例

在构造函数中，当前对象就是当前创建的那个对象，我们可以使用this向当前的对象中添加属性

class Dog{
    name: string;
    age: number;
    constructor(name:string, age:number) {
        this.name = name;
        this.age = age;
    }
}
 
const dog1 = new Dog("大黄", 3);  // {name:"大黄", age:3}
const dog2 = new Dog("旺财", 4);  // {name:"旺财", age:4}
const dog3 = new Dog("小黑", 4);  // {name:"小黑", age:4}

三、方法中的this

方法中的this指向的是调用方法的对象

class Dog {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  bark() {
    console.log(this.name + "汪汪汪");
  }
}
 
const dog1 = new Dog("大黄", 3); // {name:"大黄", age:3}
const dog2 = new Dog("旺财", 4); // {name:"旺财", age:4}
const dog3 = new Dog("小黑", 4); // {name:"小黑", age:4}
dog1.bark();  // 打印：大黄汪汪汪
dog2.bark();  // 打印：旺财汪汪汪
dog3.bark();  // 打印：小黑汪汪汪