class类

最新推荐文章于 2025-12-18 10:02:55 发布

原创最新推荐文章于 2025-12-18 10:02:55 发布 · 579 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

TypeScript 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了JavaScript中的面向对象编程基础，包括如何定义类、实例属性、静态属性、实例方法和类方法。示例展示了Person类的创建，以及如何通过构造函数在创建对象时初始化属性。此外，还探讨了Dog类及其构造函数的应用，展示了如何通过对象调用方法。

类

基础类

// 使用class关键字定义类
/**
 * 对象中主要包含了两个部分
 *     属性
 *     方法
 */
class Person {
  /**
   * 直接定义的属性是实例属性，需要通过对象的实例去访问
   *     const person = new Person();
   *     person.name
   *
   * 使用static定义的属性是静态属性（类属性），可以直接通过类访问
   *     Person.gender
   *
   */

  // 实例属性，可读可写
  name: string = "XX";

  // readonly 表示只读属性
  readonly age: number = 18;

  // 在属性前面使用static关键字可以定义类属性（静态属性）
  static readonly gender: string = "man";

  /**
   * 方法
   *  直接定义的方法是实例方法，需要通过对象的实例去调用
   *      person.sayHi()
   *
   *  使用static定义的方法是类方法，可以直接通过类调用
   *      Person.sayHello()
   */
  // 实例方法
  sayHi() {
    console.log("Hi!");
  }

  // 类方法
  static sayHello() {
    console.log("Hello!");
  }
}

const person = new Person();

console.log(person);
console.log(Person.gender);

person.sayHi();
Person.sayHello();

构造函数

class Dog {
  name: string;
  age: number;

  // constructor 构造函数， 会在对象创建时调用
  constructor(name: string, age: number) {
    // 在实例方法中，this就表示当前的实例
    // 在构造函数中当前对象就越是当前新建的那个对象
    // 可以同过this向新建的对象中添加属性
    this.name = name;
    this.age = age;
  }

  bark() {
    // 在实例方法中，this就表示当前的实例
    console.log(this.name + "汪汪汪！");
  }
}

const dog = new Dog("小黄", 3);
const dog2 = new Dog("小白", 2);
dog.bark()
dog2.bark()
console.log(dog);
console.log(dog2);