[JS]面向对象ES6

class类

ES6是基于 class关键字创建类

复制代码

<script>
    // 1.定义类
    class Person {
      // 公有属性
      name
      // 公有属性 (设置默认值)
      age = 18
      // 构造函数
      constructor(name) {
        // 构造函数的this指向实例化对象
        // 构造函数的作用就是给实例对象设置属性
        this.name = name
        // 动态添加属性(不推荐)
        this.foods = ['西红柿', '土豆']
      }
      // 公有方法
      sayHi() {
        console.log('hi');
        console.log(this.name);
      }
    }

    // 2.实例化对象
    const p = new Person('张三')
    console.log(p);
    p.sayHi()
  </script>

创建类用class关键字
类的实例化使用new关键字
实例属性的初始化使用constructor关键字 (给类的属性设置值)

类的继承

extends关键字用于类声明或者表达式中, 以创建一个类, 该类是另一个类的子类

super关键字用于访问对象字面量或类的原型上的属性, 或调用父类的构造函数

复制代码

<script>
    class Person {
      name
      constructor(name) {
        this.name = name
      }
      sayHi(){
        console.log('父类的asyhi');
      }
    }

    // --------------子类----------------
    class Student extends Person {
      age
      constructor(name, age) {
        // 继承环境中, 如果子类有自己的属性, 就必须调用super, 否则会报错
        super(name)
        this.age = age
      }
      // 同名方法, 就近原则
      sayHi() {
        console.log('子类的asyHi');
      }
    }
  
    const p = new Student('张三', 18)
    p.sayHi()
  </script>

类的继承使用extends关键字
如果子类有自己的属性, 必须使用super关键字

静态属性

静态: 通过static关键字定义静态属性和方法, 所谓静态就是只能通过类调用, 不能通过实例调用

复制代码

<script>
    /**
     * 静态属性:
     *    定义: static
     *    访问: 通过类访问
    */
   class Test {
    // 静态属性和方法
    static name = '我是静态属性'
    static func() {
      console.log('我是静态方法');
    }
   }

   // 访问静态属性和方法
  console.log(Test.name); //我是静态属性
  Test.func() // 我是静态方法
  </script>

可见性修饰符

私有: 类属性在默认情况下是公有的, 可以通过前缀 # 定义私有字段, 声明和访问时都需要

复制代码

<script>
    /**
     * 私有属性:
     *    定义: #name
     *    访问: #name, 
     *    范围: 只能在类的内部访问
     *    # 是简写形式, 完整的修饰符是 private 
    */
   class Test {
    // 私有属性
    #info = '我是私有属性1'
    private info2 = '我是私有属性2'
    // 私有方法
    #func() {
      console.log('我是私有方法');
    }
    testPr() {
      console.log(this.#info);
      this.#func()
    }
   }


  // 通过实例方法访问私有属性
  const t = new Test()
  t.testPr() // 我是私有属性,我是私有方法

  // 类的外部, 无法访问私有属性和方法
  // t.#func() // 报错
  
  // Chrome控制台中, 可以直接访问私有属性和方法(便于调试)
  // console.log(t.#info);
  </script>

// 公有属性:
class Animal {
  //定义: public修饰符(公有的)
  //范围: 让类中的所有成员对外可见(默认)
  public move() {
    log('1111')
  }
}


// 限制属性: 限制类中的成员对外可见
class Animal {
  // 定义: protected修饰符(受保护的)
  // 仅能在当前类和子类继承中可见,对实例不可见.
  protected move() {
    log('1111')
   }
}

// 只读修饰符:
class Animal {
  //定义: readonly 
  //范围: 无法在constructor构造函数之外对属性进行赋值 
  readonly age = 18
  constructor(age) {
      this.age = age
  }
}

接口

通过接口, 在不改变类的情况下, 增强类的功能和灵活性

复制代码

// 定义: interface关键字
interface 接口1 {
  name
  sing()
}

// 继承: implements关键字
// 类实现接口,类必须提供接口中指定的所有方法和属性
class 对象 implements 接口1 {
   name='小明'
   sing() { log('1111') }
}