JavaScript基础知识：Class 基本语法(一)

JavaScript基础知识：Class 静态属性和静态方法(二)
JavaScript基础知识：Class 其它(三)

一、Class 语法

class MyClass{
	constractor() {}     //初始化对象
	method1() {}         //类的方法间没有逗号
	method2() {}
	method3() {}
	...
}
let  myClass = new MyClass()

在 JavaScript 中，类是一种函数。如下，技术上来说，MyClass 是一个函数（我们提供作为 constructor 的那个），而 methods、getters 和 settors 都被写入了 MyClass.prototype。

class MyClass {
  prop = value; // 属性

  constructor(...) { // 构造器
    // ...
  }

  method(...) {} // method

  get something(...) {} // getter 方法
  set something(...) {} // setter 方法

  [Symbol.iterator]() {} // 有计算名称（computed name）的方法（此处为 symbol）
  // ...
}

二、类继承

类继承是一个类扩展另一个类的一种方式。

1. “extends” 关键字

扩展另一个类的语法是：

class Child extends Parent

看个具体例子，创建继承自 Animal 的 class Rabbit：

class Animal{
    constructor(name){
        this.speed = 0;
        this.name = name;
    }
    run(speed){
        this.speed = speed;
        alert(`${this.name} runs with speed ${this.speed}.`);
    }
    stop(){
        this.speed = 0;
        alert(`${this.name} stand still.`);
    }
}

let animal = new Animal('My pet!');

class Rabbit extends Animal{
    hide(){
        alert(`And then ${this.name} hides!`)
    }
}

let rabbit = new Rabbit('DuoDuo');
rabbit.run(5);   // DuoDuo runs with speed 5.
rabbit.hide();   // And then DuoDuo hides!

注意： 在 extends 后允许任意表达式：

function f(phrase) {
  return class {
    sayHi() { alert(phrase); }
  };
}

class User extends f("Hello") {}

new User().sayHi(); // Hello

2. 重写方法

继续上面 DuoDuo 的例子，stop 方法是 Animal 中的方法。

如果我们在 Rabbit 中，重新指定 stop 方法，
但是又想在 Animal 中的 stop 方法的基础上，怎么办？

class Rabbit extends Animal {
  stop() {
    // ……现在这个将会被用作 rabbit.stop()
    // 而不是来自于 class Animal 的 stop()
  }
}

Class 为此提供了 “super” 关键字。

• 执行 super.method(…) 来调用一个父类方法。
• 执行 super(…) 来调用一个父类** constructor**（只能在我们的 constructor 中）。

class Animal{
    constructor(name){
        this.speed = 0;
        this.name = name;
    }
    run(speed){
        this.speed = speed;
        alert(`${this.name} runs with speed ${this.speed}.`);
    }
    stop(){
        this.speed = 0;
        alert(`${this.name} stand still.`);
    }
}

let animal = new Animal('My pet!');

class Rabbit extends Animal{
    hide(){
        alert(`And then ${this.name} hides!`)
    }
    stop(){
        super.stop();
        this.hide();
    }
}

let rabbit = new Rabbit('DuoDuo');
rabbit.run(5);     // DuoDuo runs with speed 5.
rabbit.stop();     // DuoDuo stand still.    // And then DuoDuo hides!

注意： 箭头函数没有 super

3. 重写constructor

继承类的 constructor 必须调用 super(…)，并且 (!) 一定要在使用 this 之前调用。

继续上面DuoDuo的例子，在 Rabbit 中，并未写自己的 constructor，如果自己定义下会怎么呢？

class Animal{
    constructor(name){
        this.speed = 0;
        this.name = name;
    }
    run(speed){
        this.speed = speed;
        alert(`${this.name} runs with speed ${this.speed}.`);
    }
    stop(){
        this.speed = 0;
        alert(`${this.name} stand still.`);
    }
}

let animal = new Animal('My pet!');

class Rabbit extends Animal{
    constructor(name, earLength){            // ***
        this.name = name;                    // ***
        this.earLength = earLength;          // ***
    }                                        // ***
    hide(){
        alert(`And then ${this.name} hides!`)
    }
    stop(){
        super.stop();
        this.hide();
    }
}

let rabbit = new Rabbit('DuoDuo');
alert(rabbit.name);
alert(rabbit.earLength);

结果：报错了。。。。

把标 //*** 的四行改下，就不会报错了：

    constructor(name, earLength){
        super(name);
        this.earLength = earLength;
    }

以上内容参考于 https://zh.javascript.info/class-inheritance ，在此学习记录！