JavaScript: JavaScript Classes and Modules

Last updated: 2026-10-13

As projects grow, you need more than scattered functions and variables — you need organized code structure. Classes provide object-oriented patterns, and Modules provide file-level code isolation. Together, they form the foundation of modern JS projects.

Related Statements：class set

1. Class Syntax

A Class is a template for creating objects — syntactic sugar over constructor functions.

<script>
class ClassName {
  constructor(params) {
    this.property = params;
  }
  method() {
    // ...
  }
}
</script>

▶ Example: Creating a Student Class

2. Properties and Methods

(1) Instance Properties and Methods

Properties and methods defined with this.xxx inside constructor belong to the instance — each object gets its own copy.

(2) Static Methods

Methods defined with the static keyword belong to the class itself, not to instances. Call them via ClassName.method().

(3) Getters and Setters

Use get and set keywords to define "virtual properties" — functions that execute automatically on read/write.

<div id="output" style="white-space: pre; font-family: monospace; padding: 10px; border: 1px solid #ccc;"></div>
<script>
const output = document.getElementById('output');

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  get fullName() {
    return this.firstName + ' ' + this.lastName;
  }

  set fullName(value) {
    const parts = value.split(' ');
    this.firstName = parts[0];
    this.lastName = parts[1];
  }
}

const p = new Person('John', 'Doe');
output.textContent = 'fullName: ' + p.fullName + '\n';
p.fullName = 'Jane Smith';
output.textContent += 'After change: ' + p.fullName;
</script>

▶ Example: Static Methods and Getters/Setters

3. Inheritance

extends lets a child class inherit properties and methods from a parent class. super calls the parent's constructor or methods.

▶ Example: Inheritance Demo

4. ES Modules

Modules are JS's code organization unit. One module = one file. Variables inside a module are private by default — only explicitly exported items are accessible externally.

(1) Named Exports / Imports

<script>
// math.js
export const PI = 3.14;
export function add(a, b) { return a + b; }

// app.js
import { PI, add } from './math.js';
</script>

(2) Default Exports / Imports

<script>
// logger.js
export default function log(msg) { console.log(msg); }

// app.js
import log from './logger.js';
</script>

(3) Using Modules in HTML

Simply add type="module" to the script tag.

<script type="module">
  import { add } from './math.js';
  console.log(add(1, 2));
</script>

▶ Example: Single-File Module Simulation (Inline Module)

In real projects, modules should be split into separate files. Here we simulate them within a single HTML file using type="module".

Related Statements：class set

❓ FAQ

📖 Summary

• class is syntactic sugar over constructors; constructor is the initializer, and methods are defined on the prototype
• static methods belong to the class, not instances — ideal for utility and factory methods
• get/set define virtual properties that intercept reads/writes for validation or computation
• extends enables inheritance; a child constructor must call super() first
• ES modules use export/import for code isolation and reuse; type="module" enables them in HTML
• Modules organize code by feature, enable lazy loading, and prevent global namespace pollution

📝 Exercises

1. Basic: Create a Rectangle class with width and height properties, plus getArea() and getPerimeter() methods.
2. Intermediate: Add a get area() getter and set area(value) setter to Rectangle (setting area adjusts width/height proportionally). Then create a Square subclass that extends Rectangle.
3. Challenge: Design an EventManager class with on(event, callback), off(event, callback), and emit(event, data) methods to simulate a simple event system (hint: use an object mapping events to arrays of callbacks).

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us