在以前javascript 不支持 class 类的写法，在现在可以用 class 来命名一个类给这个类实现一个构造方法，父类可以背子类继承，一种面向对象的实现模式。

1
2
3
4
5
6
class Parent {
  // 创建一个构造方法
  constructor(name = "I am class") {
    this.name = name;
  }
}

创建一个类

1
2
3
4
5
6
7
8
9
10
11
12
{
    // 类的基本定义和实例的生成
    class Parent {
        // 创建一个构造方法
        constructor(name = "lelei") {
            this.name = name;
        }
    }
    // 生成类的实例并且赋值
    let parent = new Parent("less");
    console.log(parent);
}

类的继承 extends

1
2
3
4
5
6
7
8
9
10
{
    class Parent {
        constructor(name = "lelei") {
            this.name = name;
        }
    }
    class Child extends Parent { }
    console.log(new Child());
}

类的继承传递参数 super

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
    class Parent {
        constructor(name = "lelei") {
            this.name = name;
        }
    }
    // 继承关系中用了 super 传递参数的时候 一定要放置在第一行。
    class Child extends Parent {
        constructor(name = "child") {
            super(name);
            this.type = "type";  // 子类新增属性
        }
    }
    console.log(new Child("hello"));
}

getter setter 方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
    class Parent {
        constructor(name = "lelei") {
            this.name = name;
        }
        // 这里的 newName 是一个属性 而不是一个方法。
        get newName() {
            return 'new ' + this.name;
        }
        // 同理 这里的newName 也只是一个属性不是一个方法
        set newName(value) {
            this.name = value;
        }
    }
    let parent = new Parent();
    // 默认调用的是get方法
    console.log(parent.newName);
    // 设置属性 使用set 方法
    parent.longName = 'hello';
    console.log(parent.newName);
}

静态方法和静态属性的创建和使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
    class Parent {
        constructor(name = "lelei") {
            this.name = name;
        }
        // 创建一个静态方法
        static tell() {
            console.log("I am static method");
        }
    }
    // 静态方法 直接使用类名去调用
    Parent.tell();
    // 静态属性的设置
    Parent.type = 'I am static attr';
    // 读取的时候
    console.log(Parent.type);
}