javascript - `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 1var 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 1var child = new Child();child.myMethod(2); // instance 2

Answer 2

excalidraw

Answer 3

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

Answer 4

这段 JavaScript 代码涉及到 ES6（ECMAScript 2015）中的类和继承，以及方法解析的动态绑定。下面我将解释为什么输出这个结果，以及程序是如何执行的。

首先，我们来看一下代码的结构：

1. Parent 类有两个同名方法 myMethod，一个静态的（static），一个实例的（instance）。
2. Child 类继承了 Parent 类，并重写了这两个方法。
3. 在 Child 类中，静态的 myMethod 调用父类的静态方法，实例的 myMethod 调用父类的实例方法。

接下来，我们分步解释程序的执行过程：

1. Child.myMethod(1);

• 这里直接调用了 Child 类的静态方法 myMethod，参数为 1。
• 在 Child 类中，静态方法 myMethod 调用了父类的静态方法 myMethod，即 super.myMethod(msg);。
• 因为 Parent 类的静态方法 myMethod 是直接定义的，所以它不依赖于任何实例或上下文，因此它会输出 'static', msg，即 'static' 1。

2. var child = new Child();

• 这里创建了一个新的 Child 类的实例，并赋值给变量 child。

3. child.myMethod(2);

• 这里调用了新创建的 child 实例的 myMethod 方法，参数为 2。
• 在 Child 类中，实例方法 myMethod 调用了父类的实例方法 myMethod，即 super.myMethod(msg);。
• 在执行这个调用时，JavaScript 会使用动态绑定来确定应该调用哪个方法。因为 child 是 Child 类的实例，所以它会优先调用子类（Child）的方法。如果子类没有这个方法，它就会向上查找父类（Parent）。在这个例子中，父类有同名的方法，所以它会调用父类的方法。
• 因此，输出为 'instance', msg，即 'instance' 2。

总结：输出结果为：

static 1instance 2

这是因为静态方法直接调用父类的静态方法，而实例方法在子类中调用父类的实例方法时使用了动态绑定。