javascript 69 lines · 1 tab

JavaScript classes and prototype-based inheritance

Alex Chang Feb 2026

1 tab

// ES6 Class syntax
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    return `Hello, I'm ${this.name}`;
  }

  get info() {
    return `${this.name}, ${this.age} years old`;
  }

  static species() {
    return 'Homo sapiens';
  }
}

const person = new Person('Alice', 30);
console.log(person.greet());

// Inheritance
class Employee extends Person {
  constructor(name, age, jobTitle) {
    super(name, age);
    this.jobTitle = jobTitle;
  }

  greet() {
    return `${super.greet()}, I work as a ${this.jobTitle}`;
  }
}

// Private fields
class BankAccount {
  #balance = 0;

  deposit(amount) {
    this.#balance += amount;
    return this.#balance;
  }

  get balance() {
    return this.#balance;
  }
}

// Prototype-based
function Animal(name) {
  this.name = name;
}

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

const dog = new Animal('Dog');
console.log(dog.speak());

// Static methods
class MathUtils {
  static PI = 3.14159;

  static circleArea(radius) {
    return this.PI * radius * radius;
  }
}

1 file · javascript Explain with highlit

JavaScript classes provide syntactic sugar over prototype-based inheritance using class keyword. I define constructors with constructor() method for initialization. Using extends creates subclasses that inherit from parent classes. The super keyword calls parent class methods and constructors. Instance methods are defined directly in class body. Static methods belong to class itself using static keyword. Private fields use # prefix for encapsulation. Getters and setters with get and set keywords control property access. Understanding prototypes reveals how JavaScript inheritance works under the hood. The prototype chain links objects to their constructors. Modern classes make object-oriented programming more intuitive in JavaScript.

Related snips

javascript

// Creating a Promise
const myPromise = new Promise((resolve, reject) => {
  const success = true;

  setTimeout(() => {
    if (success) {

Promises and async/await patterns for asynchronous JavaScript

javascript promises async-await

by Alex Chang 1 tab

javascript

import { Controller } from "@hotwired/stimulus"
import Mousetrap from "mousetrap"

export default class extends Controller {
  connect() {
    // Global shortcuts

Keyboard shortcuts with Stimulus and Mousetrap

stimulus javascript ux

by Jordan Lee 2 tabs

javascript

// Get canvas and context
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 1. Basic shapes
// Rectangle (filled)

Canvas API for graphics and animations

canvas javascript graphics

by Alex Chang 1 tab

javascript

// Basic event listener
const button = document.getElementById('myButton');

button.addEventListener('click', function(event) {
  console.log('Button clicked!');
  console.log('Event type:', event.type);

Event handling and event delegation patterns in JavaScript

javascript events event-delegation

by Alex Chang 1 tab

javascript

// Basic GET request
fetch('https://api.example.com/users')
  .then(response => {
    console.log('Status:', response.status);
    console.log('OK:', response.ok);
    return response.json();

Fetch API for HTTP requests and AJAX communication

javascript fetch api

by Alex Chang 1 tab

erb

<turbo-stream action="set_title">
  <template><%= "Inbox (#{@unread_count})" %></template>
</turbo-stream>

Turbo Streams: update document title with a custom action

rails hotwire turbo

by Henry Kim 2 tabs

Share this code

Here's the card — post it anywhere.

JavaScript classes and prototype-based inheritance — share card

Link copied