javascript - 为什么 ES6 类语法控制台日志记录与 ES5 类语法不同？

Question

我正在努力学习更多的 ECMAScript 6 和更好的继承。

问题当我控制台注销时 bob 与 daisy 它们不同。 bob logs __proto__ 下的原型(prototype)，并显示他的 run:true; 构造函数。在 ES6 实现中，daisy 没有 __proto__ 但是，它仍然可以访问 isRunning。为什么？

var Man = (function(){
  "use strict";
  function Man() {
    this.run = true
  }

  Man.prototype.isRunning = function() {
    console.log('yesss imma run');
  };

  return Man;
})();

var bob = new Man();
console.log(bob);

class Woman {
  constructor(){
    this.run = true;
  }

  isRunning() {
    console.log('yess imma run');
  }
}

var daisy = new Woman();
console.log(daisy);

Answer 1

这是因为在 ES6 类中定义的方法是不可枚举的。在 Man 对象中，isRunning 是可枚举的，但在 Woman 中不是。 Chrome 有一种处理控制台日志的特定方式。取决于是否存在可枚举属性会影响显示。

控制台显示的差异很小，但它显示了使用 ES6 Class 构建类的方式的有趣差异。为了更清楚地看到它，您可以尝试使 Man isRunning 不可枚举或 Woman isRunning 可枚举，它应该在控制台中提供相同的输出。对于 Man 中的不可枚举，就像这样:

var Man = (function() {
     "use strict";

     function Man() {
       this.run = true
     }

     Object.defineProperty(Man.prototype, 'isRunning', {
       value: function() {
         console.log('yesss imma run');
       },
       enumerable: false
     });

     return Man;
   })();

   
   bob = new Man();
   console.log(bob);

   class Woman {
     constructor() {
       this.run = true;
     }

     isRunning() {
       console.log('yess imma run');
     }
   }

   daisy = new Woman();
   console.log(daisy);

或在 Woman 中可枚举:

   var Man = (function() {
     "use strict";

     function Man() {
       this.run = true
     }

     Man.prototype.isRunning = function() {
       console.log('yesss imma run');
     };

     return Man;
   })();


   bob = new Man();
   console.log(bob);

   class Woman {
     constructor() {
       this.run = true;
     }

     isRunning() {
       console.log('yess imma run ');
     }
   }
   Object.defineProperty(Woman.prototype, 'isRunning', {
     enumerable: true
   });
   daisy = new Woman();
   console.log(daisy);

编辑:

请注意，ES6 的初始草案默认将 enumerable 设置为 true，但它已更改，这是一个设计决定。您可以在此处查看导致该决定的讨论: https://esdiscuss.org/topic/classes-and-enumerability

基本上， native 原型(prototype)通常具有不可枚举的方法，因此与用户定义的类具有相同的行为是有意义的。

该决定是在第 32 版草案中引入的。 http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts#february_2_2015_draft_rev_32