首先定义一个tsconfig.json

  1. {
  2.     "include": ["./src/**/*"],
  3.     "exclude": ["node-modules"],
  4.     "compilerOptions": {
  5.         "target": "ES6",
  6.         "module": "ES6",
  7.         "strict": true,
  8.         "outDir": "./dist"
  9.     }
  10. }
  1. class Dog{
  2.     name = '旺财';
  3.     age = 3;
  5.     bark(){
  6.         alert('汪汪汪');
  7.     }
  8. }
  10. const dog = new Dog();
  11. console.log(dog);//打印dog

用html
但是我们一个类不可能只见一个一个对象，如果只创建一个对象意义不大了，所以一般我们都是创建多个对象
创建多个对象:

  1. const dog = new Dog();
  2. const dog2 = new Dog();
  3. const dog3 = new Dog();
  4. const dog4 = new Dog();
  6. console.log(dog);//打印dog
  7. console.log(dog2);
  8. console.log(dog3);
  9. console.log(dog4);

得到了四个旺财

这个类实际上我们创建的时候有问题:我们希望这个类是用来创建狗的,不同的狗的。现在的确创建出了四个对象但是四个对象里它们的属性都是一模一样的，这就意义不大了

不是说直接给这个属性直接去指定值:

  1. class Dog{
  2.     name:string;
  3.     age:number;
  5.     bark(){
  6.         alert('汪汪汪');
  7.     }
  8. }

那怎么办?
首先俩个问题:

  • 1.这个name和age的值我们不能在类里面进行指定,因为在类里面去指定就意味着所有的对象都是这个值
  • 2.我还不能不给值，不给值就意味着我们这里就没有这个属性了
    那问题是:我什么时候给它值?
    首先说这个值在定义这个类的时候，这个值是不能确定的;不能不给,什么时候给?创建对象的时候给

这里面就要用到这么一个函数:

constructor()

constructor被称为**构造函数**;构造函数会在**对象创建时调用**

  1. class Dog{
  2.     constructor(){
  3.         console.log('构造函数执行了')
  4.     }
  5. }
  6. new Dog()

你每次new Dog()你的构造函数都会执行，调new Dog()实际上就是等于调用这个类里面的构造函数

this

this就是表示**当前对象**
在方法中可以通过this来表示当前调用方法的对象

  1. class Dog{
  2.     constructor(){
  3.         //在实例方法中,this就表示当前的实例
  4.         //在构造函数中当前对象就是当前新建的那个对象
  5.         //可以通过this向新建的对象中添加属性
  6.         console.log(this)
  7.     }
  8. }
  9. new Dog()

在实例方法中,this就是表示当前的实例

  1. class Dog{
  2.     constructor(){
  3.         //在实例方法中,this就表示当前的实例
  4.         //在构造函数中当前对象就是当前新建的那个对象
  5.         //可以通过this向新建的对象中添加属性
  6.         console.log(this)
  8.         this.name = '旺财';
  9.         this.age = 3;
  10.     }
  11. }
  12. new Dog()

跟之前写的其实是一样的，得这么写:

  1. class Dog{
  2.     // name:string;
  3.     // age:number;
  5.     //constructor被称为构造函数
  6.     //构造函数会在对象创建时调用
  7.     constructor(name:string,age:number){
  8.         this.name = name;
  9.         this.age = age;
  10.     }
  11.     bark(){
  12.         alert('汪汪汪');
  13.     }
  14. }

那我调用的时候就不能new Dog()这么调了(你构造函数里面需要几个参数，你就得传几个参数进去):

  1. class Dog{
  2.     //constructor被称为构造函数
  3.     //构造函数会在对象创建时调用
  4.     constructor(name:string,age:number){
  5.         this.name = name;
  6.         this.age = age;
  7.     }
  8.     bark(){
  9.         alert('汪汪汪');
  10.     }
  11. }
  13. const dog = new Dog('旺财',4);
  14. const dog2 = new Dog('小贝',5);
  16. console.log(dog);//打印dog
  17. console.log(dog2);

这个时候你就会发现:

  1. Dog {name: '旺财', age: 4}
  2. Dog {name: '小贝', age: 5}

这时我就创建出了name和age都不相同的对象,这样我们的Dog类才变得真的有意义
构造函数里的this的name和age报红波浪是因为你name和age没有定义,所以name和age属性都给它写上

  1. class Dog{
  2.     name:string;
  3.     age:number;
  5.     //constructor被称为构造函数
  6.     //构造函数会在对象创建时调用
  7.     constructor(name:string,age:number){
  8.         this.name = name;
  9.         this.age = age;
  10.     }
  11.     bark(){
  12.         alert('汪汪汪');
  13.     }
  14. }
  16. const dog = new Dog('旺财',4);
  17. const dog2 = new Dog('小贝',5);
  19. console.log(dog);//打印dog
  20. console.log(dog2);

构造函数和属性是怎么分工的

属性

  • 1.属性实在我们类中直接定义的,写几个就有几个
  • 2.在赋值的时候是在构造函数里面赋值的，根据你的参数