Level: Intermediate | Players: 12_Closure and_Scope

Learning Objectives

Define an object blueprint using the class grammar.
Initialize the instance with constructor.
Implement inheritance with extends and super.
Use static method and getter/setter.
We know that classes are prototype-based syntactic sugar.

1. Class basics

class Person {
  constructor(name) {
    this.name = name;
  }
  hello() {
    return `Hi, I am ${this.name}`;
  }
}
const p = new Person("Sun");
p.hello();

If called without new, it is a TypeError.

2. Inheritance (extends, super)

class Student extends Person {
  constructor(name, grade) {
    super(name);
    this.grade = grade;
  }
  intro() {
    return `${super.hello()} (grade ${this.grade})`;
  }
}

super(...) calls the parent constructor, and super.method() calls the parent method.

3. static and getter/setter

Static members are attached to the class itself, not to the instance.

class MathX {
  static square(x) { return x * x; }
}
MathX.square(5);

class Temp {
  constructor(c) { this._c = c; }
  get fahrenheit() { return this._c * 9/5 + 32; }
  set fahrenheit(f) { this._c = (f - 32) * 5/9; }
}

4. Relationship with prototype

class uses function and prototype chains internally. This is Person.prototype.hello === p.hello.

Core example

file	Contents covered
`01_class_basic.js`	class default
`02_constructor.js`	constructor and instance fields
`03_extends.js`	inheritance and super
`04_static_getter.js`	static, getter/setter

⚠️ Common Mistakes

Class call without new → TypeError.
Access this before super() in the child constructor.
When defining a method with an arrow function, a function is created for each instance, wasting memory.
In the static method, there is a misunderstanding that this points to an instance (points to a class).
You want to have properties with the same name as getter/setter at the same time.

❓ Frequently Asked Questions (FAQ)

Q1. What about private fields? A. You can create truly private fields with the #field syntax (ES2022+).

Q2. Multiple inheritance? A. Not supported. Utilizes the mixin pattern.

Q3. Class vs factory function? A. Class is newpart/inheritance stronger, and factory is easier to create private state with closure.

Example files

The runnable files used in this lesson. Copy them into your own project and experiment.

src/01_class_basic.jsJavaScript

/**
 *class default
 */
"use strict";

class Person {
  constructor(name) {
    this.name = name;
  }
  hello() {
    return `Hi, I am ${this.name}`;
  }
}

const p = new Person("Yuna");
console.log(p.hello());
console.log(p instanceof Person);

src/02_constructor.jsJavaScript

/**
 *constructor and instance fields
 */
"use strict";

class Book {
  //class field
  likes = 0;

  constructor(title, author) {
    this.title = title;
    this.author = author;
  }

  like() {
    this.likes += 1;
  }
}

const b = new Book("JS", "Kim");
b.like();
b.like();
console.log(b);

src/03_extends.jsJavaScript

/**
 *inheritance and super
 */
"use strict";

class Animal {
  constructor(name) { this.name = name; }
  speak() { return `${this.name} makes a sound`; }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }
  speak() {
    return `${super.speak()} (woof, ${this.breed})`;
  }
}

const d = new Dog("Rex", "Husky");
console.log(d.speak());
console.log(d instanceof Animal); // true

src/04_static_getter.jsJavaScript

/**
 *static and getter/setter
 */
"use strict";

class MathX {
  static square(x) { return x * x; }
}
console.log(MathX.square(6));

class Temp {
  constructor(c) { this._c = c; }
  get fahrenheit() { return this._c * 9 / 5 + 32; }
  set fahrenheit(f) { this._c = (f - 32) * 5 / 9; }
  get celsius() { return this._c; }
}

const t = new Temp(0);
console.log("F =", t.fahrenheit); // 32
t.fahrenheit = 212;
console.log("C =", t.celsius);    // 100

Assignment

homework_01.js

Animal class: name field, speak() method (returns "<name> speaks")
Dog class: inherit Animal, override speak() ("<name> barks")

homework_02.js

Write the Rectangle class. -Field: width, height

getter area → area
static from(square) → Receives the length of one side of a square and returns Rectangle

Show the reference solution

Try the assignment yourself first — comparing your attempt with a working solution is where most of the learning happens.

homework_01.jsJavaScript

/**
 *Task 1: Animal / Dog
 */
"use strict";

class Animal {
  constructor(name) { this.name = name; }
  speak() { return `${this.name} speaks`; }
}

class Dog extends Animal {
  speak() { return `${this.name} barks`; }
}

console.log(new Animal("Cat").speak());
console.log(new Dog("Rex").speak());

homework_02.jsJavaScript

/**
 *Task 2: Rectangle
 */
"use strict";

class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }
  get area() {
    return this.width * this.height;
  }
  static from(side) {
    return new Rectangle(side, side);
  }
}

const r = new Rectangle(4, 5);
console.log("area =", r.area);

const sq = Rectangle.from(7);
console.log("sq area =", sq.area);

Classes