理解构造函数

主要特性

1. 使用new关键字：当你用 new 调用一个函数时，这个函数就会作为一个构造函数运行，创建一个新的对象实例，并自动返回这个新对象。

2. this关键字： 在构造函数内部，this 关键字指向新创建的对象。你可以使用 this 来定义对象的属性和方法。

3. 构造函数的命名： 构造函数通常以大写字母开头，以区别于普通函数。

双方对比

构造函数

扩展对象: 添加更多的方法或属性

function Car(make, model, year) {
    this.make = make;
    this.model = model;
    this.year = year;

    this.getDetails = function() {
        return `${this.year} ${this.make} ${this.model}`;
    };
}

const car1 = new Car('Toyota', 'Camry', 2020);
car1.year = 2021; // 可以直接修改属性
console.log(car1.getDetails()); // 输出：2021 Toyota Camry

实例独立性: 构造函数允许你创建多个独立的对象实例，每个实例都有自己的属性和方法

const car1 = new Car('Toyota', 'Camry', 2020);
const car2 = new Car('Honda', 'Civic', 2019);

console.log(car1.getDetails()); // 2020 Toyota Camry
console.log(car2.getDetails()); // 2019 Honda Civic

car2.year = 2021; // 只会修改 car2 的 year
console.log(car1.getDetails()); // 2020 Toyota Camry
console.log(car2.getDetails()); // 2021 Honda Civic

普通函数

不具备缺少对象结构、无法扩展

function Car(make, model, year) {
    return `${year} ${make} ${model}`;
}

const car1 = Car('Toyota', 'Camry', 2020);
console.log(car1); // 输出：2020 Toyota Camry

// 不能像对象一样访问属性，因为它只是一个字符串
console.log(car1.make); // 输出：undefined

 vue3中使用

在 TypeScript 中定义的 class 内部，可以使用 this 关键字

<template>
  <div>
    <p>Make: {{ car.make }}</p>
    <p>Model: {{ car.model }}</p>
    <p>Year: {{ car.year }}</p>
    <button @click="updateYear">Update Year</button>
    <p>Updated Year: {{ car.year }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 定义 TypeScript 类（相当于构造函数）
class Car {
  make: string;
  model: string;
  year: number;

  constructor(make: string, model: string, year: number) {
    this.make = make;
    this.model = model;
    this.year = year;
  }

  updateYear(newYear: number) {
    this.year = newYear;
  }
}

// 创建类的实例
const car = ref(new Car('Toyota', 'Camry', 2020));

// 使用类的方法更新数据
function updateYear() {
  car.value.updateYear(2022);
}
</script>