9 Objects, prototypes, and classes

This chapter explores how JavaScript objects can be shaped far beyond simple key-value bags. It shows how properties can be controlled with getters and setters, how descriptors can make values read-only, hidden from iteration, or permanently fixed, and how private fields add a strong layer of encapsulation inside classes. It also introduces proxies as a way to intercept reads, writes, deletions, and other operations, giving developers a flexible mechanism for logging, validation, testing, and other advanced behaviors.

A major theme is that JavaScript inheritance is built on prototypes, where property lookup falls back through a chain of linked objects. The chapter explains how this lookup works, how constructor functions create objects whose prototype is set automatically, and why class syntax is mostly a cleaner shorthand over the same underlying model. It also highlights practical concerns such as distinguishing own properties from inherited ones, understanding enumerability, and recognizing the performance and maintenance costs of runtime prototype changes or proxies.

The final part connects these ideas to modern object-oriented programming with classes and inheritance. Classes are shown as a more readable way to define constructors, instance methods, static members, and child classes with extends and super. The chapter emphasizes that class-based syntax still relies on prototypes under the hood, while also offering conveniences like static methods and private elements. Overall, it builds a complete mental model for working with objects in JavaScript, from low-level property control to high-level class design.

The syntax for defining getters and setters. Prefix the property name with either the get or the set keyword.

Accessing the name property directly (on the left) and indirectly, through a proxy (on the right)

Initially, each object has access to only its own properties.

When we access a property that the object doesn’t have, the object’s prototype is searched for that property. Here, we can access hattori’s sneak property through yoshi, because hattori is yoshi’s prototype.

The search for a particular property stops when there are no more prototypes to explore. Accessing yoshi.creep triggers the search first in yoshi, then in hattori, and finally in kuma.

Every function, when created, gets a new prototype object. When we use a function as a constructor, the constructed object’s prototype is set to the function’s prototype.

Properties assigned to an object in the constructor are direct properties of that object. Properties from class prototypes are inherited as fallbacks, following the same rules we saw earlier for prototype inheritance.

• We can use accessor methods (getters and setters) to run functions when properties are accessed or assigned.
• Accessor properties can be defined by using the built-in Object.defineProperty method or with a special get and set syntax as parts of object literals or ES6 classes.
• We can also use Object.defineProperty to control whether properties are writable or enumerable.
• With proxies, we can define custom actions that will be executed when an object is interacted with in any way.
• Proxy handlers for specific actions are called “traps.”
• The Reflect.get and Reflect.set methods allow us to perform property access from within a proxy trap while preserving the this context.
• Every object can have a prototype, an object to which we delegate the search for a particular property, if the object itself doesn’t have the searched-for property. An object’s prototype can have its own prototype, and so on, forming a prototype chain.
• Prototypes are closely linked to constructor functions. Every function has a prototype property that’s set as the prototype of objects that it instantiates.
• A function’s prototype object has a constructor property pointing back to the function itself. This property is accessible to all objects instantiated with that function and, with certain limitations, can be used to find out whether an object was created by a particular function.
• With the class keyword, we can define a constructor function and a prototype at the same time.
• The extends keyword creates a prototype chain where the parent class’s prototype is the fallback from the child class’s.
• Within a child class, the parent can be referenced with super.
• Fields whose names start with # are called private elements. They can only be referenced by using the dot syntax from within the same class in which they’re defined.

FAQ