ES6 Class: Browser Support, Features, Known Issues

What is ES6 Class?

ES6 Class is the class declaration syntax in ECMAScript 2015, the sixth edition of the ECMA-262 standard published by Ecma International's TC39 committee. It uses the class keyword to declare object templates with a constructor, instance methods, static methods, getters and setters, and prototype-based inheritance through extends and super.

Which browsers does ES6 Class support?

ES6 classes work in every modern desktop and mobile browser by default, with Chrome, Edge, Firefox, Safari, Opera, and Samsung Internet all shipping the full class declaration syntax. Internet Explorer is the only major holdout, and it does not parse the class keyword in any version.

What are the key features of ES6 classes?

ES6 classes formalize the JavaScript pattern of building constructor functions and prototype chains by hand. The class keyword wraps every important piece of object-oriented JavaScript, including instance state, methods, static members, accessors, private fields, and inheritance.

• Constructor: The constructor() method runs once per new call and initialises instance state. Subclass constructors must call super() before they touch this.
• Instance methods: Methods declared inside the class body live on the prototype, so every instance shares one copy. Methods can be regular, async, or generator functions.
• Static methods and fields: The static keyword attaches methods or fields to the class itself, not the instance. Useful for factories, helpers, and constants tied to the type.
• Getters and setters: The get and set accessors let you expose computed properties that read or write through plain property access, instead of explicit method calls.
• Private fields and methods: A leading hash on a name marks a field or method as private. Outside code that touches instance.#name throws a SyntaxError at parse time.
• Inheritance with extends: The extends keyword builds the prototype chain between parent and child. The child can call super.method() to reach the parent's implementation, including from inside the constructor.
• Strict mode by default: The class body always runs in strict mode, so this is undefined inside a method called without a receiver, and silent assignment errors become real exceptions.
• Hoisting and TDZ: Class declarations are hoisted to the top of the block but stay in the temporal dead zone until execution reaches them. Touching the class name above the declaration throws a ReferenceError.

How do you check if a browser supports ES6 classes?

You can confirm ES6 class support inside any browser by trying to compile a small block of class syntax with the Function constructor. The Function constructor throws a SyntaxError on engines that cannot parse the class keyword, which gives you a reliable yes or no answer without breaking the rest of the page.

Paste this snippet into the browser DevTools console to confirm class support and the related private-fields hook:

// Paste this into the browser DevTools console to test ES6 class support.
function supportsEs6Class() {
  try {
    new Function("class Box { constructor(v) { this.v = v; } static of(v) { return new Box(v); } }");
    new Function("class A {}; class B extends A { constructor() { super(); } }");
    return true;
  } catch (e) {
    return false;
  }
}

function supportsPrivateFields() {
  try {
    new Function("class T { #x = 1; getX() { return this.#x; } }");
    return true;
  } catch (e) {
    return false;
  }
}

console.log("ES6 class supported:", supportsEs6Class());
console.log("Private fields supported:", supportsPrivateFields());

If supportsEs6Class() returns true, the engine handles the constructor, static methods, extends, and super in a single class declaration. The supportsPrivateFields() check tells you whether the same engine accepts the hash-prefix syntax for private state, which is the gate for production code that uses #fields.

What are the known issues with ES6 classes?

ES6 class syntax has near-universal modern support, but a few real failure modes still bite teams that target older Windows fleets, embedded WebViews, or features layered on top of the basic class declaration. The biggest hits are Internet Explorer, late sub-features like private fields, and Babel down-compilation quirks.

• Internet Explorer never added support: IE 9, 10, and 11 throw SyntaxError on the class keyword. Because the parse fails, the whole script fails to load, not just the class statement, so the page silently breaks.
• Private fields shipped late: The hash-prefix private fields landed in Chrome 74, Firefox 90, and Safari 14.1. Code that uses #fields throws on older versions even when the basic class syntax works.
• Subclassing built-ins is uneven on legacy engines: Extending Array, Error, or Map needs Reflect.construct or Object.setPrototypeOf calls in older Safari and EdgeHTML, where the prototype chain on the subclass instance comes back wrong.
• Babel down-compilation loses sub-features: When Babel targets ES5, private fields collapse into WeakMaps, instanceof checks against subclassed built-ins return false, and static blocks lose their evaluation order.
• No multiple inheritance: ES6 only supports single inheritance through extends. Mixins still need a manual factory function that returns a class expression, which Babel and TypeScript both compile correctly but eslint sometimes flags.
• Hoisting gotcha: Class declarations sit in the temporal dead zone until the runtime reaches the declaration, so any reference above the line throws a ReferenceError. This trips developers used to function declarations being callable above their definition.
• this binding inside methods: Class methods do not auto-bind to the instance. Passing instance.method as a callback strips this, which is the most common runtime bug in React class components and event handlers.

In my experience, the most surprising failure happens on enterprise Windows fleets where IE 11 still loads in compatibility mode for one internal app. A single inline class declaration in a third-party widget script crashes the whole page with "Object doesn't support this property or method", and the error never surfaces in dev tools because IE silently skips the rest of the script. Always wrap third-party widgets in a feature detect or a Babel build before shipping to a Windows enterprise audience.

Citations

All ES6 class version numbers and feature notes in this guide come from these primary sources:

• Ecma International - ECMA-262, ECMAScript 2015 Language Specification: 262.ecma-international.org/6.0
• TC39 - Current ECMAScript specification, classes section: tc39.es/ecma262/#sec-class-definitions
• MDN Web Docs - JavaScript Classes reference: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
• MDN Web Docs - class declaration: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/class
• MDN Web Docs - extends keyword: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/extends
• MDN Web Docs - super keyword: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super
• MDN Web Docs - Private class features: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_properties
• Wikipedia - ECMAScript: en.wikipedia.org/wiki/ECMAScript
• Wikipedia - ECMAScript version history: en.wikipedia.org/wiki/ECMAScript_version_history
• WebKit - ES6, ES7, and beyond: webkit.org/blog/6756/es6-feature-complete
• Mozilla Hacks - ES6 In Depth: Classes: hacks.mozilla.org/2015/07/es6-in-depth-classes
• Chrome for Developers - V8 release notes archive: v8.dev/blog
• Apple Developer - Safari Release Notes: developer.apple.com/documentation/safari-release-notes