> ## Documentation Index
> Fetch the complete documentation index at: https://docs.syntblaze.com/llms.txt
> Use this file to discover all available pages before exploring further.
# JavaScript Class Declaration
A class declaration is a syntactic construct in JavaScript used to define a blueprint for creating objects and establishing prototype-based inheritance. Introduced in ECMAScript 2015 (ES6), it provides a standardized, declarative syntax over JavaScript's existing prototype chain mechanics, encapsulating constructors, methods, fields, and inheritance hierarchies.
```javascript theme={"dark"}
class BaseClass {
constructor(id) {
this.id = id;
}
}
class DerivedClass extends BaseClass {
// 1. Private fields (must be declared upfront)
#privateField;
// 2. Public fields (attached to the instance)
publicField = 'default value';
// 3. Constructor
constructor(id, param) {
super(id); // Must call super() before accessing 'this'
this.#privateField = param;
}
// 4. Prototype Instance Method (concise syntax, attached to prototype)
prototypeMethod() {
return this.#privateField;
}
// 5. Instance Field Method (attached directly to the instance)
boundMethod = () => {
return this.publicField;
};
// 6. Getter / Setter
get propertyName() {
return this.publicField;
}
set propertyName(value) {
this.publicField = value;
}
// 7. Static method (attached to DerivedClass itself)
static staticMethod() {
return 'Static context';
}
}
```
## Execution Context and Mechanics
**Hoisting and the Temporal Dead Zone (TDZ)**
Unlike function declarations, class declarations are not initialized when hoisted. The identifier is hoisted to the top of the block scope, but accessing the class before its lexical declaration results in a `ReferenceError`. The class remains in the Temporal Dead Zone until the JavaScript engine evaluates the declaration line.
**Implicit Strict Mode**
The entire body of a class declaration is implicitly executed in strict mode (`'use strict'`). This applies to the constructor, methods, getters, setters, and static methods. Syntax that is invalid in strict mode will throw a `SyntaxError`.
**Instantiation Requirement**
A class declaration creates a constructor function that can only be invoked using the `new` operator. Attempting to call a class as a standard function (e.g., `ClassName()`) will throw a `TypeError`.
**Method Enumerability**
By default, all methods defined within the body of a class declaration using concise syntax (including getters and setters) are non-enumerable. This differs from legacy constructor functions where methods attached directly to the `prototype` object are enumerable unless explicitly configured otherwise via `Object.defineProperty()`.
## Structural Components
* **Inheritance (`extends` and `super`):** The `extends` keyword establishes a prototype chain, linking a derived class to a base class. Within a derived class, the `super` keyword is used to access the parent class. The `super()` method must be invoked inside the derived class's constructor before any reference to `this` can be evaluated.
* **Constructor:** A specialized method invoked automatically during instantiation. A class declaration may contain a maximum of one `constructor` method. If omitted, the engine implicitly generates one based on the class type:
* Base classes receive an empty constructor: `constructor() {}`
* Derived classes receive a constructor that forwards arguments to the parent: `constructor(...args) { super(...args); }`
* **Instance Methods vs. Field Methods:**
* Functions defined using concise method syntax (e.g., `methodName() {}`) are attached to the class's `prototype` object and shared across all instances via the prototype chain.
* Functions assigned to class fields (e.g., `methodName = () => {}` or `methodName = function() {}`) are evaluated during instantiation and attached directly to the *instance* itself, not the prototype.
* **Static Members:** Fields and methods prefixed with the `static` keyword. These are attached directly to the class constructor function object, not to the `prototype`. They cannot be accessed through instances of the class.
* **Private Members:** Fields and methods prefixed with a hash (`#`). These are strictly encapsulated within the class body and cannot be accessed or modified from outside the class lexical scope, enforcing hard privacy at the engine level.
Tired of Poor JavaScript Skills? Fix That With Deep Grasping!
Learn More
