描述

在面向对象编程中一个类定义了一个对象的特征. 类是定义 properties 和 一些方法, 是用来绘制具体对象实例的“蓝图”

在 ES6 中 class 本质上就是一个语法糖，使我们编写构造函数更为方便

特性

  1. 在使用 function 写法时在 prototype 上定义方法是默认可枚举的，在使用 calss 写法时在 prototype 上定义方法是默认不可枚举的
  2. class 也存在暂时性死区的特性
  3. 取值函数和存值函数依然可以使用
  4. 默认使用严格模式
  5. 默认会有一个 constructor 不写不会报错
  6. new 方式来执行，不使用 new 执行则报错
  7. 内部使用 this 互相调用使用方法和属性

基本写法

  1. class Calculator { // 此时声明了一个构造函数 Calculator
  3. }

声明变量和方法

  1. class Calculator {
  3.   // 声明了两个初始变量 num1 和 num2 初始值都为 undefin
  4.   num1
  5.   num2
  6.   // 声明了一个初始变量 action 初始值为 'plus'
  7.   action = 'plus'
  9.   // 声明方法 plus
  10.   plus() {
  11.     return this.a + this.b
  12.   }
  14.   // 声明方法 sub
  15.   sub() {
  16.     return this.a - this.b
  17.   }
  19.   // 声明方法 mul
  20.   mul() {
  21.     return this.a * this.b
  22.   }
  24.   // 声明方法 div
  25.   div() {
  26.     return this.a / this.b
  27.   }
  29. }

当然，也可以使用变量赋值来声明方法，箭头函数也是可以的

  1. class Foo {
  2.   fn = function () { }
  3.   arrowFn = () => { }
  4. }

类的初始化 constructor

  1. class Calculator {
  3.   num1
  4.   num2
  6.   // 使用 constructor 来使得 class 被 new 时执行的程序
  7.   constructor(num1, num2) {
  8.     this.num1 = num1
  9.     this.num2 = num2
  10.   }
  12. }

静态方法和静态属性

使用 static 关键字来声明 类 内部的静态方法和属性

静态方法和静态属性无法被 实例化对象 调用

  1. class Calculator {
  3.   // 声明了一个静态属性 actions 初始值为 ['plus', 'sub', 'mul', 'div']
  4.   static actions = ['plus', 'sub', 'mul', 'div']
  6.   // 声明了一个静态方法 round
  7.   static round(value) {
  8.     const type = typeof value
  9.     switch (type) {
  10.       case 'string':
  11.         return Number(value).toFixed(0)
  13.       case 'number':
  14.         return value.toFixed(0)
  16.       default:
  17.         return Number(value).toFixed(0)
  18.     }
  19.   }
  21. }

使用 class

  1. class Calculator {
  2.   // 声明了两个初始变量 num1 和 num2 初始值都为 undefin
  3.   num1
  4.   num2
  5.   // 声明了一个初始变量 action 初始值为 'plus'
  6.   action = 'plus'
  8.   // 声明了一个静态属性 actions 初始值为 ['plus', 'sub', 'mul', 'div']
  9.   static actions = ['plus', 'sub', 'mul', 'div']
  11.   // 声明了一个静态方法 round
  12.   static round(value) {
  13.     const type = typeof value
  14.     switch (type) {
  15.       case 'string':
  16.         return Number(value).toFixed(0)
  18.       case 'number':
  19.         return value.toFixed(0)
  21.       default:
  22.         return Number(value).toFixed(0)
  23.     }
  24.   }
  26.   // 使用 constructor 来使得 class 被 new 时执行的程序
  27.   constructor(num1, num2) {
  28.     this.num1 = num1
  29.     this.num2 = num2
  30.   }
  32.   // 声明方法 plus
  33.   plus() { return this.num1 + this.num2 }
  35.   // 声明方法 sub
  36.   sub() { return this.num1 - this.num2 }
  38.   // 声明方法 mul
  39.   mul() { return this.num1 * this.num2 }
  41.   // 声明方法 div
  42.   div() { return this.num1 / this.num2 }
  44.   run() {
  45.     switch (this.action) {
  47.       case 'plus':
  48.         return this.plus()
  50.       case 'sub':
  51.         return this.sub();
  53.       case 'mul':
  54.         return this.mul()
  56.       case 'div':
  57.         return this.div()
  59.       default:
  60.         return this.plus()
  61.     }
  62.   }
  64. }
  66. // 使用 new 关键字来实例化 类（构造函数）
  67. const calculator = new Calculator(5, 10,)
  68. // 调用实例化对象的 run 方法
  69. console.log(calculator.run()) // 15
  70. // 更改实例化对象的 action 属性
  71. calculator.action = 'mul'
  72. // 调用实例化对象的 run 方法
  73. console.log(calculator.run()) // 50
  74. // 更改实例化对象的 action 属性
  75. calculator.action = 'div'
  76. // 调用实例化对象的 div 方法
  77. console.log(calculator.div()) // 0.5
  78. // 调用 类（构造函数） 上的 静态方法 round
  79. console.log(Calculator.round('10.99')) // 11
  80. // 访问 类（构造函数） 上的 静态属性 actions
  81. console.log(Calculator.actions) // ['plus', 'sub', 'mul', 'div']

属性的私有化

用在一些属性成员不想被外部访问的情况

  1. const drink = Symbol()
  2. function study() {
  3.   console.log('I am studing');
  4. }
  6. class Person {
  8.   // 相对私有化
  9.   [drinkAction]() {
  10.     console.log('I can drink');
  11.   }
  13.   // 绝对私有化
  14.   study() {
  15.     study.call(this)
  16.   }
  18. }

访问和赋值的 get 和 set

在 类 中依然可以使用 get 和 set

  1. class Person {
  3.   _age = 0
  5.   get age() {
  6.     return this._age++
  7.   }
  9.   set age(value) {
  10.     if (value > 100) {
  11.       console.log("年龄最大不得大于100岁")
  12.       return false
  13.     }
  15.     if (value < 0) {
  16.       console.log("年龄最小不得小于0岁")
  17.       return
  18.     }
  20.     this._age = value
  21.   }
  24. }
  26. var person = new Person()
  27. console.log(person.age)   // 0
  28. console.log(person.age)   // 1
  29. person.age = 101          // 年龄最大不得大于100岁
  30. console.log(person.age)   // 2
  31. person.age = -1           // 年龄最小不得小于0岁
  32. console.log(person.age)   // 3
  33. person.age = 55
  34. console.log(person.age)   // 55

extends

extends 是 class 继承的关键字

继承方式相对 function 来讲则要简单的许多，只需要使用 extends 关键即可

  1. class Father {
  3.   work() {
  4.     console.log('I am working')
  5.   }
  7. }
  9. class Son extends Father {
  11.   study() {
  12.     console.log('I am studing')
  13.   }
  15. }
  17. var son = new Son()
  18. son.study() // I am working
  19. son.work()  // I am studing

关键字 super

如果在 子类中 使用了 constructor，则必须之中 super 函数，否则会报错

  1. class Parent {
  2.   constructor(name = "parent") {
  3.     this.name = name
  4.   }
  5. }
  7. class Child extends Parent {
  8.   // 如果写了 constructor 一定要写 super()
  9.   constructor() {
  10.     super() // super 不写则报错u
  11.   }

new

在使用 class 时，必须通过 new 实例的方式去执行构造函数 否则会报错

  1. const obj = {
  3. }
  5. class Foo {
  6.   constructor(name) {
  7.     this.name = name
  8.   }
  10. }
  12. // 以下几个执行均报错
  13. // Class constructor Foo cannot be invoked without 'new'
  14. Foo('nothing')
  15. Foo.call(obj)
  16. Foo.apply(obj)

function vs Class

声明

1.jpeg

属性的定义

2.jpeg

静态属性的定义

3.jpeg

方法的定义

4.jpeg

静态方法的定义

5.jpeg