Javascript console.log does not show derived class name – inheritance – classes

I’m playing with ECMAScript6 classes.

I still don’t understand why the following code :

  • Eclipse cant view class files
  • How can I reliably set the class attr w/JavaScript on IE, FF, Chrome, etc.?
  • Iterate over each sibling element
  • Create a JavaScript function dynamically from a string name
  • Change() doesn't react with class identifier
  • Scrolling to the next element
  • "use strict";
    
    class A {}
    class B extends A {}
    
    let b = new B();
    console.log(b);
    

    Displays :

    A { }

    Instead of :

    B { }

    Live Example:

    (function () {
        "use strict";
    
        class A {}
        class B extends A {
            foo() {
            }
        }
    
        let b = new B();
        console.log(b);
    })();
    Open the console. Works only on very up-to-date browsers (such as Chrome 43+).

  • instantiate dynamic class
  • Iterate over each sibling element
  • constructor vs componentWillMount; what a componentWillMount can do that a constructor cannot?
  • jQuery match part of class with hasClass
  • Have private properties & methods in ES6 classes
  • Why is the variable declared inside the JS class `undefined`
  • One Solution collect form web for “Javascript console.log does not show derived class name – inheritance – classes”

    You haven’t said what browser you’re using, but I figure it has to be Chrome, given the style of the output you showed and that it runs at all. (If I run that in IE11, I get [object Object] {} instead. If I run it in Firefox, I get an error — because Firefox doesn’t support class yet.)

    I can’t think of any reason other than a bug in Chrome. Support for class is very new to Chrome, it could easily be that the devtools just aren’t quite handling it correctly yet. I didn’t find a bug report on http://crbug.com in a quick search, you might want to file one. But you did find it.

    It really should be showing B with your code, not A. It does with the equivalent old-fashioned way to do it:

    (function() {
      "use strict";
    
      function A() {}
    
      function B() {
        A.call(this);
      }
      B.prototype = Object.create(A.prototype);
      B.prototype.constructor = B;
    
      var b = new B();
      console.log(b);
    })();
    Open the console.