Command Palette

Search for a command to run...

Hectal
Phase 7Intermediate8 of 16 in JavaScript

this, Prototypes and Classes

How `this` is decided, call/apply/bind, the prototype chain, what `new` really does, classes, private fields, inheritance and composition.

Phase 6 taught you objects as bags of properties. This phase explains the machinery underneath: how a function knows which object it is working on (**this), how you can choose that object yourself (call, apply, bind), and how one object can borrow properties from another through the prototype chain**, the single idea that powers every method you have used so far, from [].map to "hi".toUpperCase.

Then you'll build objects the three ways JavaScript offers: **constructor functions with new, classes (ES2015, with fields, static members and getters), and private #fields (ES2022) that nothing outside the class can touch. You'll learn inheritance** with extends and super, and finally when not to use it: composition, mixins and delegation, and when a plain object and a few functions beat a class.

Every topic shows the real mechanism, with live examples whose console output you can predict and check. These ideas come up in almost every JavaScript interview, and you'll meet them again in the DOM phase (event handlers and this), in custom elements (class extends HTMLElement) and in every framework.

0/8 · 0%
8 topics ~4 h 30 code blocks & diagrams
Start with the first topic
1
7.1

The this Keyword

this is a hidden extra input to every regular function, and its value is decided by how the function is called, not where it was written; arrow functions are the exception, because they have no this of their own and use the one around them.

28 min 4 code practice

2
7.2

call, apply and bind

Every function has three methods that let you choose this yourself: call runs the function now with arguments listed one by one, apply runs it now with arguments in an array, and bind doesn't run it at all but returns a new function whose this (and optionally first arguments) are fixed for good.

25 min 3 code practice

3
7.3

Prototypes and the Prototype Chain

Every object has a hidden link to another object, its prototype; when you read a property the object doesn't have, JavaScript follows that link, and the next one, up the prototype chain until it finds the property or reaches null.

26 min 3 code practice

4
7.4

Constructor Functions and new

A constructor is an ordinary function meant to be called with new; new creates a fresh object, links it to the function's prototype property, runs the function with this set to that object, and gives you the object back.

26 min 3 code practice

5
7.5

Classes

A class is a cleaner way to write a constructor and its prototype methods in one block, with fields, static members, getters and setters; under the hood it builds the same prototype chain, but adds safety rules such as strict mode and refusing to run without new.

28 min 5 code practice

6
7.6

Private Fields and Methods

Names that start with # (like #balance or #validate()) are private: only code written inside that class body can read or change them, and the engine enforces it, so the outside world must go through the methods you choose to make public.

27 min 4 code practice

7
7.7

Inheritance with extends and super

class Child extends Parent makes a class that starts with everything Parent has and adds or changes parts; super(...) runs the parent's constructor, super.method() calls the parent's version of a method you override, and instanceof checks the whole family line.

26 min 4 code practice

8
7.8

Composition over Inheritance

Instead of building tall family trees of classes, build objects from small parts: an object has an engine rather than is an engine, borrows abilities through mixins, or hands work to a helper (delegation); and when there is no shared behaviour to organise, a plain object and a few functions beat a class.

29 min 4 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Fix the like button that lost this

The Like button should add one to likes.count and show the new number. Right now clicking it shows NaN, because likes.add loses its this when it's passed to addEventListener.

Beginner
2

A Rectangle constructor with shared methods

Write a constructor function (not a class) Rectangle(width, height) that stores width and height on the new object.

Intermediate
3

A Temperature class with a getter, setter and factory

Write a class Temperature that stores one value, celsius, set from the constructor.

Intermediate
4

A bank account with a private balance

Rewrite BankAccount so the balance is private (#balance) and can only change through deposit(amount) and withdraw(amount). Outside code can read it through a getter balance, but can't set it.

Intermediate
5

A shape gallery with inheritance

Shape is the base class. Its area() throws, because each kind of shape must provide its own; describe() uses area().

Advanced