JavaScript Static Method

A static method in JavaScript is a function bound directly to a class constructor rather than to the class’s prototype object. Consequently, static methods are invoked on the class itself and cannot be accessed or executed through instantiated objects of that class.

Syntax

Static methods are defined using the static keyword preceding the method name within a class declaration or expression.

class ClassName {
  static methodName() {
    // Method execution context
  }
}

Execution Context (`this` Binding)

Within a static method, the this keyword references the class constructor itself, not an instance. Because JavaScript classes execute in strict mode by default, extracting a static method and invoking it without its class context will result in this evaluating to undefined. Attempting to access properties on this in an extracted static method will throw a TypeError.

class ContextExample {
  static getContextName() {
    return this.name;
  }
}

console.log(ContextExample.getContextName()); // "ContextExample"

const extractedMethod = ContextExample.getContextName;
console.log(extractedMethod()); // TypeError: Cannot read properties of undefined (reading 'name')

Instance Inaccessibility

When a class is instantiated, the resulting object inherits properties and methods from the class’s prototype. Because static methods are assigned to the constructor function object rather than Constructor.prototype, they do not exist on the instance’s prototype chain. Attempting to invoke a static method on an instance throws a TypeError.

class Entity {
  static initialize() {
    return "Initialized";
  }
}

const instance = new Entity();

console.log(Entity.initialize()); // "Initialized"
console.log(instance.initialize()); // TypeError: instance.initialize is not a function

Static Method Inheritance

Static methods are inherited by subclasses. When a class extends another class, the prototype chain is established not just between the instance prototypes (SubClass.prototype inherits from BaseClass.prototype), but also between the constructor functions themselves (SubClass inherits from BaseClass). When an inherited static method is invoked on a subclass, the this context dynamically binds to the subclass constructor.

class Parent {
  static getName() {
    return this.name;
  }
}

class Child extends Parent {}

console.log(Parent.getName()); // "Parent"
console.log(Child.getName());  // "Child" (Inherited, 'this' points to Child)

Static Blocks

JavaScript also supports static initialization blocks, which allow for complex initialization logic for static properties or methods. These blocks execute exactly once when the class is evaluated.

class Configuration {
  static configData;
  
  static {
    // Executes once during class evaluation
    this.configData = { environment: "production" };
  }
}