JavaScript Tutorial

The language for programming web pages.

JS Classes

JavaScript Classes

Classes are a template for creating objects. They encapsulate data with code to work on that data. ES6 introduced class syntax as a cleaner way to work with prototypes.

Class Features:

constructor() — Initialize object
Methods — Functions inside class
extends — Inheritance
super() — Call parent constructor
static — Class-level methods
Getters/Setters — get/set

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<body style="font-family:Arial;padding:20px;">
<h2>JS Classes Demo</h2>
<div id="out" style="background:#1e1e1e;color:#abb2bf;padding:15px;border-radius:8px;font-family:monospace;line-height:2;"></div>
<button onclick="runDemo()" style="margin-top:10px;padding:10px 20px;background:#f7df1e;color:#1a1a2e;border:none;border-radius:5px;cursor:pointer;font-weight:bold;">▶ Run</button>
<script>
class Animal {
  constructor(name, sound) {
    this.name = name;
    this.sound = sound;
  }
  speak() { return `${this.name} says "${this.sound}!"`; }
  static kingdom() { return "Animalia"; }
}
class Dog extends Animal {
  constructor(name) {
    super(name, "Woof");
    this.tricks = [];
  }
  learn(trick) { this.tricks.push(trick); return this; }
  showTricks() { return `${this.name} knows: ${this.tricks.join(", ")}`; }
}
function runDemo() {
  const cat = new Animal("Cat","Meow");
  const dog = new Dog("Rex");
  dog.learn("sit").learn("roll").learn("fetch");
  document.getElementById("out").innerHTML =
    "cat.speak():        "+cat.speak()+"<br>"+
    "Animal.kingdom():   "+Animal.kingdom()+"<br>"+
    "dog.speak():        "+dog.speak()+"<br>"+
    "dog.showTricks():   "+dog.showTricks()+"<br>"+
    "dog instanceof Dog:    "+(dog instanceof Dog)+"<br>"+
    "dog instanceof Animal: "+(dog instanceof Animal);
}
</script>
</body></html>

Result

Topics