`ES6`为什么会输出这个结果，程序是怎么执行的，有大佬可以解释一下吗？

Question

ES6为什么会输出这个结果，程序是怎么执行的，有大佬可以解释一下吗？

class Parent {
  static myMethod(msg) {
    console.log('static', msg);
  }

  myMethod(msg) {
    console.log('instance', msg);
  }
}

class Child extends Parent {
  static myMethod(msg) {
    super.myMethod(msg);
  }

  myMethod(msg) {
    super.myMethod(msg);
  }
}

Child.myMethod(1); // static 1

var child = new Child();
child.myMethod(2); // instance 2

Answer 1

static表示这个属性/方法属于这个类本身，而不会被实例所拥有，也就是说Child.myMethod调用的是static标识的myMethod，new Child().myMethod调用的是没有static的那个myMethod，如果Child只有static myMethod，那new Child().myMethod调用就会报错:

当然如果你继承extends了类，那就会沿着父类链条一直往上找，整个链条都没有就会报错，哪个环节有就调用哪个

这就是所谓原型链。

然后再讲super，super你可以理解为父级，具体指向谁取决于位于类属性也就是有static标识还是实例属性，在类属性中就指向父类，实例属性就指向父实例属性，简单讲就是static中的super.xxx访问的是父类中的static xxx,没有static的同理。

所以把你的例子转换一下就差不多是下面这样：

class Parent {
  static myMethod(msg) {
    console.log('static', msg);
  }

  myMethod(msg) {
    console.log('instance', msg);
  }
}

class Child extends Parent {
  static myMethod(msg) {
    Parent.myMethod(msg);
  }

  myMethod(msg) {
    new Parent().myMethod(msg);
  }
}

Child.myMethod(1); // static 1

var child = new Child();
child.myMethod(2); // instance 2

Answer 2

excalidraw

Answer 3

因为static关键字 决定了里面的super是指向静态还是实例

Answer 4

在JavaScript中，super关键字的行为取决于它所在的上下文。在类的方法中，super可以引用父类的实例方法或静态方法，具体取决于调用super的方法本身是实例方法还是静态方法。

在你的代码中，Child类有两个myMethod方法：一个是静态的（static myMethod），另一个是实例的（myMethod）。这两个方法都使用了super.myMethod(msg)来调用父类Parent中的相应方法