类的基本知识 js-优快云博客

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script type="text/javascript">
    // 类里面分为属性和方法
    // 创建一个 Person 类
    class Person {
      // 构造器方法
      constructor(name, age) {
        // 构造器中的 this 是谁？ 类的实例对象
        this.name = name
        this.age = age
      }

      // 一般方法
      speak() {
        // speak 方法放在了哪里呢？ 类的原型对象上，供实例使用
        // 通过 Person 实例调用 speak 时， speak 中的 this 就是 Person 实例
        console.log(`我叫${this.name}，我的年龄是${this.age}`)
      }

    }

    // 创建一个 Person 的实例对象
    const p1 = new Person('tom', 18)
    const p2 = new Person('jerry', 19)
    console.log(p1, p2)

    p1.speak()
    p2.speak()

    p1.speak.call({name: 1, age: 2})

    // 创建一个 Student 类，继承 Person 类
    class Student extends Person {
      constructor(name, age, grade) {
        // super 必须放在最开始调用
        super(name, age)
        this.grade = grade
      }

      speak() {
        console.log(`我叫${this.name}，我的年龄是${this.age}，我是${this.grade}年级`)
      }

      study() {
        console.log('我学习~')
      }
    }

    const s1 = new Student("小张", 15, '高一')
    console.log(s1)
    s1.speak() // 假如 Student 没有speak，会往原型链上去找，调用 Person 的speak
    s1.study()


    /* 
    总结：
      1.类中的构造器不是必须写的，要对实例进行初始化操作，如添加属性
      2.如果A类继承了B类，且 A 类中写了构造器，那么 A 类构造器的 super 是必须调用的
      3.类中所定义的方法，都是放在了类的原型对象上，供实例去使用
    */
  </script>
</body>
</html>