• ES6 class类


    基本介绍

    1. constructor

    constructor()方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法。

    一个类必须有constructor()方法,如果没有显式定义,一个空的constructor()方法会被默认添加。如:

    class Point {}
    
    // 等同于
    class Point {
      constructor() {}
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    类必须使用new调用,否则会报错。如:new Point()

    类的属性和方法,除非显式定义在其本身(即定义在this对象上),否则都是定义在原型上(即定义在class上)。

    class Point {
      constructor(x, y) {
        this.x = x;
        this.y = y;
      }
    
      toString() {
        return '(' + this.x + ', ' + this.y + ')';
      }
    }
    
    var point = new Point(2, 3);
    
    point.toString() // (2, 3)
    
    point.hasOwnProperty('x') // true
    point.hasOwnProperty('y') // true
    point.hasOwnProperty('toString') // false
    point.__proto__.hasOwnProperty('toString') // true
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    实例属性也可以按照如下方法去写:

    class IncreasingCounter {
      _count = 0;
      get value() {
        console.log('Getting the current value!');
        return this._count;
      }
      increment() {
        this._count++;
      }
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    2. 存取函数

    在“类”的内部可以使用get和set关键字。如:

    class MyClass {
      constructor() {}
      
      get prop() {
        return 'getter';
      }
      set prop(value) {
        console.log('setter: '+value);
      }
    }
    
    let inst = new MyClass();
    
    inst.prop = 123;
    // setter: 123
    
    inst.prop
    // 'getter'
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    3. 属性表达式

    类的属性名,可以采用表达式方式书写。如:

    let methodName = 'getArea';
    
    class Square {
      constructor(length) {}
    
      [methodName]() {}
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    4. 静态方法和静态属性

    类中也可以定义静态方法,静态方法通过关键字static定义。类相当于实例的原型,所有在类中定义的方法,都会被实例继承。但静态方法不会,如果定义了static类型,就表示该方法不会被实例继承,而是直接通过类来调用,

    class Foo {
      static classMethod() {
        return 'hello';
      }
    }
    
    Foo.classMethod() // 'hello'
    
    var foo = new Foo();
    foo.classMethod()
    // TypeError: foo.classMethod is not a function
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    5. 私有属性

    ES6的私有属性是在变量名前加#来定义。私有属性只能在类的内部使用,如果在类的外部使用,就会报错。

    6. in运算符

    前面说过,直接访问某个类不存在的私有属性会报错,但是访问不存在的公开属性不会报错。这个特性可以用来判断,某个对象是否为类的实例。

    继承

    ES6中通过extends关键字实现继承。如:

    class Point { /* ... */ }
    
    class ColorPoint extends Point {
      constructor(x, y, color) {
        super(x, y); // 调用父类的constructor(x, y)
        this.color = color;
      }
    
      toString() {
        return this.color + ' ' + super.toString(); // 调用父类的toString()
      }
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    父类所有的属性和方法,都会被子类继承,除了私有的属性和方法。子类无法继承父类的私有属性,或者说,私有属性只能在定义它的 class 里面使用。如:

    class Foo {
      #p = 1;
      #m() {
        console.log('hello');
      }
    }
    
    class Bar extends Foo {
      constructor() {
        super();
        console.log(this.#p); // 报错
        this.#m(); // 报错
      }
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    父类的静态属性和静态方法,也会被子类继承。如:

    class A {
      static hello() {
        console.log('hello world');
      }
    }
    
    class B extends A {
    }
    
    B.hello()  // hello world
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    上面代码中,hello()是A类的静态方法,B继承A,也继承了A的静态方法。

    注意,静态属性是通过软拷贝实现继承的。

  • 相关阅读:
    嵌入式开发:为可重用软件模块设计接口的5个技巧
    arudino 知识整理
    成都瀚网科技有限公司:抖店怎么开通直播?
    git简易入门教学
    某工控图片上传服务 CPU 爆高分析
    autoReg | 自动线性和逻辑回归和生存分析
    【Python】新手入门学习:详细介绍里氏替换原则(LSP)及其作用、代码示例
    vue3移动端嵌入pdf的两种办法
    spinal HDL - 10 - 状态机
    解码2022中国网安强星丨正向建、反向查,华为构建数字化时代的网络安全防线
  • 原文地址:https://blog.csdn.net/qq_29517595/article/details/134513339