Chapter 7: Chapter 7. Object orientation with prototypes
Introduces prototypes as the basis for JavaScript’s approach to object-oriented code.
After this chapter you will be able to
- Prototype delegation and reuse. Explain that a prototype is an object to which a property search can be delegated, making its properties and functionality accessible to other objects. Describe why this supports object-oriented code without making JavaScript identical to a class-based language.
- Prototype links for reuse. Explain how an object can delegate a missing-property search to its prototype, and describe how Object.setPrototypeOf establishes that link in the example.
- Prototype chain property search. Trace a property search through successive prototypes, including where it stops, and describe how the in operator tests whether an object has access to a property.
- Normal call versus construction. Distinguish calling Ninja normally from calling new Ninja(), including what the latter does with the new object.
- Prototype methods on constructed objects. Trace how an object made with new Ninja() gains access to swingSword through Ninja.prototype, and distinguish that method from an instance property.
- Constructor-created instance properties. Explain how a constructor called with new uses this to add properties directly to the newly created instance.
- Instance property precedence. Trace which property is used when an instance and its prototype both define swingSword, and explain why.
- Shared versus per-instance methods. Justify placing methods that perform the same logic on the prototype rather than in the constructor, while noting the constructor-method exception described here.
- Changes to an existing prototype. Explain why an instance created before a method is added to its prototype can still use that method.
- Replacing a constructor prototype. Distinguish what happens to instances made before and after a constructor's prototype is replaced.
- Constructor property and origin. Explain that a constructor function’s prototype has a constructor property accessible through its instances, providing a reference to the function that created them. State that overwriting the property loses that original reference.
- Reusing a constructor reference. Describe how an existing instance’s constructor property can be used to construct a second, distinct instance, even when the original constructor name is no longer in scope.
- Inheritance Versus Property Copying. Distinguish giving Ninja a copy of Person’s dance method from making Ninja inherit from Person.
- Prototype Chain Construction And Lookup. Trace how replacing Ninja’s prototype with a new Person instance lets a Ninja object find Person’s dance method.
- Lost Ninja constructor connection. Trace why a ninja instance reports Person rather than Ninja through its constructor property after Ninja.prototype is replaced with a new Person object.
- Restored nonenumerable constructor property. Explain how defining a constructor property on the new Ninja.prototype restores the instance-to-Ninja connection while keeping that property out of for-in iteration.
- Prototype chain membership test. Explain that object instanceof Constructor checks whether the constructor’s current prototype appears in the object’s prototype chain. Trace why the ninja instance passes checks against both Ninja and Person.
- Changed constructor prototype caveat. Explain why replacing a constructor’s prototype after an instance is created can change that instance’s instanceof result.
- Class Syntax and Prototypes. Explain that ES6 added the class keyword to express class-based inheritance, but JavaScript still implements inheritance through prototypes rather than native classical inheritance.
- Class constructors and instance methods. Describe how a class defines a constructor and methods, and how `new` creates an instance. Explain that the constructor can use `this` to add an instance property, while methods in the class body are accessible to instances.
- Classes and underlying prototypes. Explain why the section calls ES6 classes syntactic sugar rather than a replacement for prototypes. Describe how the class example can be translated into functionally identical ES5 code.
- Static versus instance methods. Distinguish a static class-level method from a method available to instances. Explain how `static compare` is accessed on `Ninja` rather than a ninja instance, and how pre-ES6 code can attach such a method to a constructor function.
- ES6 class inheritance. Explain how Ninja extends Person and what that means for instances of each class.
- Base constructor call. Describe the role of super in the Ninja constructor in this example.
What it builds on
- Invocation as a constructor (chapter 4) · Invocation as a constructor and the function context.
- Mimicking private variables (chapter 5) · Mimicking private variables with closures
- Functions as first-class objects (chapter 3) · Uses the idea that functions are objects to explain adding a property to a constructor function.
Section by section
Introduction
Introduces prototypes as the basis for JavaScript’s approach to object-oriented code.
- Prototype delegation and reuse: Explain that a prototype is an object to which a property search can be delegated, making its properties and functionality accessible to other objects. Describe why this supports object-oriented code without making JavaScript identical to a class-based language.
Why it matters: This gives you the basic idea behind the chapter’s later examples of object-oriented JavaScript.
Key terms: prototype, property, object-oriented
7.1 Understanding prototypes
This section explains how JavaScript objects use prototypes to find properties on other objects and form a prototype chain.
- Dynamic object properties: Describe JavaScript objects as collections of named properties whose values can include simple values, functions, and other objects, and whose properties can be added, changed, or deleted.
Why it matters: This establishes what a property is before considering where an object finds one. - Prototype links for reuse: Explain how an object can delegate a missing-property search to its prototype, and describe how Object.setPrototypeOf establishes that link in the example.
Why it matters: A prototype link lets one object access a property supplied by another without defining that property on itself. - Prototype chain property search: Trace a property search through successive prototypes, including where it stops, and describe how the in operator tests whether an object has access to a property.
Why it matters: Following the chain explains why an object can access a property that is not defined directly on it.
Key terms: object, property, object-literal notation, inheritance, prototyping, [[prototype]], Object.setPrototypeOf, prototype chain, in operator
7.1 Do you know?
This section poses three self-check questions about object property access, prototype chains, and ES6 classes without explaining their answers.
7.2 Object construction and prototypes
This section explains how calling a function with new creates an object that can use methods on the function’s prototype.
- Purpose of constructor functions: Explain why constructor functions are useful when creating multiple similar objects instead of assigning each object’s properties individually.
Why it matters: It explains why the section uses constructors rather than building each object by hand. - Normal call versus construction: Distinguish calling Ninja normally from calling new Ninja(), including what the latter does with the new object.
Why it matters: The same function call has a different result when new makes it a constructor call. - Prototype methods on constructed objects: Trace how an object made with new Ninja() gains access to swingSword through Ninja.prototype, and distinguish that method from an instance property.
Why it matters: It shows how constructed objects can share access to a method instead of each storing its own copy.
Key terms: constructor function, new operator, constructor, this, function context, prototype, Ninja.prototype, swingSword, instance properties
7.2.1 Instance properties
This section explains how constructors create instance properties, how those properties take precedence over prototype properties, and why shared methods usually belong on the prototype.
- Constructor-created instance properties: Explain how a constructor called with new uses this to add properties directly to the newly created instance.
Why it matters: It explains why each constructed object can have properties of its own. - Instance property precedence: Trace which property is used when an instance and its prototype both define swingSword, and explain why.
Why it matters: It lets you predict which method runs when an instance and its prototype use the same property name. - Shared versus per-instance methods: Justify placing methods that perform the same logic on the prototype rather than in the constructor, while noting the constructor-method exception described here.
Why it matters: It helps you choose between per-instance properties and shared methods without overlooking a reason to define a method in the constructor.
Key terms: constructor, new operator, this, instance properties, instance members, prototype, prototype chain, swingSword, instance, private object variables
7.2.2 Side effects of the dynamic nature of JavaScript
This section shows how changing a prototype at runtime affects existing and newly constructed objects differently.
- Changes to an existing prototype: Explain why an instance created before a method is added to its prototype can still use that method.
Why it matters: It explains why an object's available methods can change without reconstructing the object. - Replacing a constructor prototype: Distinguish what happens to instances made before and after a constructor's prototype is replaced.
Why it matters: It prevents confusion between modifying a shared prototype and replacing which prototype future instances receive.
Key terms: prototype, swingSword method, function’s prototype, prototype chain, object instantiation, pierce method
7.2.3 Object typing via constructors
This section shows how an instance’s constructor property identifies its originating function, can help check its origin, and can be used to create another instance.
- Constructor property and origin: Explain that a constructor function’s prototype has a constructor property accessible through its instances, providing a reference to the function that created them. State that overwriting the property loses that original reference.
Why it matters: It explains how an object can retain a reference to the function that constructed it. - Instance origin checks: Distinguish what typeof, instanceof, and the constructor property reveal when checking an instance’s origin, without explaining the internal workings of instanceof.
Why it matters: It helps distinguish a general object type from the constructor that created a particular instance. - Reusing a constructor reference: Describe how an existing instance’s constructor property can be used to construct a second, distinct instance, even when the original constructor name is no longer in scope.
Why it matters: An existing object can supply the function reference needed to make another object of the same origin.
Key terms: constructor property, constructor function, prototype, instance, typeof operator, instanceof operator, constructor
7.3 Achieving inheritance
The section explains how JavaScript achieves inheritance through a prototype chain rather than by copying properties.
- Inheritance Versus Property Copying: Distinguish giving Ninja a copy of Person’s dance method from making Ninja inherit from Person.
Why it matters: A shared method alone does not establish the relationship that inheritance is meant to provide. - Prototype Chain Construction And Lookup: Trace how replacing Ninja’s prototype with a new Person instance lets a Ninja object find Person’s dance method.
Why it matters: Following the lookup path shows how Ninja gains access to Person’s behavior without copying it. - Prototype Chain Type Checking: Explain what an instanceof operation can reveal about inheritance through a prototype chain.
Why it matters: It connects the inheritance relationship to a check the section says JavaScript can perform. - Shared Prototype Alias Risk: Justify why Ninja.prototype should not be set directly to Person.prototype.
Why it matters: It explains why the section uses a new Person instance rather than sharing Person’s prototype object directly. - Inherited Prototype Live Updates: Describe what happens to inherited access when prototype properties change.
Why it matters: It highlights that inherited properties remain linked to prototypes rather than being frozen as copies.
Key terms: inheritance, prototype, copying, prototype chain, Ninja.prototype, Person instance, dance method, instanceof, Person.prototype, inherited function prototypes
7.3.1 The problem of overriding the constructor property
Explains why replacing Ninja’s prototype makes instances report the wrong constructor, and how property descriptors let the code restore that connection without exposing it during enumeration.
- Lost Ninja constructor connection: Trace why a ninja instance reports Person rather than Ninja through its constructor property after Ninja.prototype is replaced with a new Person object.
Why it matters: Code that relies on an instance’s constructor property can otherwise get the wrong answer. - Property descriptor controls: Describe how property descriptors configure a property, and explain why the example’s sneaky property can be accessed but does not appear in a for-in loop.
Why it matters: Descriptors provide the control needed to repair the constructor property without making it show up in property iteration. - Restored nonenumerable constructor property: Explain how defining a constructor property on the new Ninja.prototype restores the instance-to-Ninja connection while keeping that property out of for-in iteration.
Why it matters: The repair preserves the expected constructor answer without adding a visible property to for-in output.
Key terms: Ninja.prototype, constructor property, prototype, property descriptor, configurable, enumerable, value, writable, get, Object.defineProperty
7.3.2 The instanceof operator
Explains how JavaScript’s instanceof operator checks a prototype chain and why changing a constructor’s prototype can change the result.
- Prototype chain membership test: Explain that object instanceof Constructor checks whether the constructor’s current prototype appears in the object’s prototype chain. Trace why the ninja instance passes checks against both Ninja and Person.
Why it matters: It lets you interpret instanceof results in terms of the actual prototype chain. - Changed constructor prototype caveat: Explain why replacing a constructor’s prototype after an instance is created can change that instance’s instanceof result.
Why it matters: It prevents you from treating instanceof as an unchanging record of which constructor created an object.
Key terms: instanceof operator, prototype chain, Ninja, Person, instanceof caveat, constructor prototype
7.4 Using JavaScript “classes” in ES6
Explains why ES6 introduced class syntax and clarifies that JavaScript classes still rely on prototype inheritance.
- Class Syntax and Prototypes: Explain that ES6 added the class keyword to express class-based inheritance, but JavaScript still implements inheritance through prototypes rather than native classical inheritance.
Why it matters: This distinction helps you read class syntax without mistaking it for a different inheritance model. - Reason for Standardized Classes: Describe why standardized class syntax was introduced: developers wanted a familiar abstraction over prototype inheritance, while libraries had been simulating classes in different ways.
Why it matters: It explains why JavaScript offers class syntax despite already having prototype inheritance.
Key terms: class keyword, prototype inheritance, classical inheritance, class-based inheritance
7.4.1 Using the class keyword
This section shows how ES6 classes create objects and methods, explains their relationship to prototypes, and distinguishes static methods from instance methods.
- Class constructors and instance methods: Describe how a class defines a constructor and methods, and how `new` creates an instance. Explain that the constructor can use `this` to add an instance property, while methods in the class body are accessible to instances.
Why it matters: This explains what the class syntax does when you create and use an object. - Classes and underlying prototypes: Explain why the section calls ES6 classes syntactic sugar rather than a replacement for prototypes. Describe how the class example can be translated into functionally identical ES5 code.
Why it matters: It keeps class syntax from being mistaken for a different object model. - Static versus instance methods: Distinguish a static class-level method from a method available to instances. Explain how `static compare` is accessed on `Ninja` rather than a ninja instance, and how pre-ES6 code can attach such a method to a constructor function.
Why it matters: It lets you tell whether a method should be called on an instance or on the class itself.
Key terms: class keyword, constructor, this, new, instance, method, syntactic sugar, prototypes, ES6 classes, ES5
7.4.2 Implementing inheritance
The section shows how ES6 classes simplify inheritance, using Person and Ninja to illustrate extends, super, and inherited behavior.
- ES6 class inheritance: Explain how Ninja extends Person and what that means for instances of each class.
Why it matters: It explains why the ninja can use both its own method and the Person method. - Base constructor call: Describe the role of super in the Ninja constructor in this example.
Why it matters: It connects the ninja’s initialization to the Person class it extends. - Simpler inheritance setup: Distinguish the ES6 inheritance declaration from the prototype setup described for pre-ES6 code.
Why it matters: It shows what work the ES6 syntax removes from this inheritance example.
Key terms: extends, Person, Ninja, inheritance, super, constructor, derived, base, prototype, constructor property
7.5 Summary
7.6 Exercises
Where this is used later
- (chapter intro) (chapter 8) · The dynamic nature of JavaScript objects.
Concepts explained in this chapter
- instanceof operatorA JavaScript operator that tests whether an object was created by, or inherits from, a particular constructor via its prototype chain.
- prototype chainThe linked sequence of prototype objects consulted during inherited property lookup.
- constructor propertyA property that references a constructor function associated with an object or prototype.
- prototypeAn object from which another object can inherit properties in JavaScript.
- Object.definePropertyA JavaScript method that defines or modifies a property on an object with explicit control over its attributes.
- inheritanceA reuse relationship in which one object or type can access properties or behavior defined by another through a hierarchical relationship.
- property descriptorAn object that specifies the attributes and accessors used to define or control a JavaScript property.
- classJavaScript syntax introduced in ES6 for defining classes, including constructor behavior, methods, and inheritance over the prototype system.
- constructor functionA function intended to create and initialize an object when invoked with new.
- instance variableA property that belongs directly to a particular object instance rather than being inherited from its prototype.
- new keywordA JavaScript operator that creates an object instance and invokes a constructor function with that object as its this value.
- thisThe implicit JavaScript function binding whose value is determined by how the function is called.
- syntactic sugarLanguage syntax that makes an operation easier to read or write without adding new underlying capabilities.
- getterA pair of property accessors that execute custom code when a property is read or assigned.
- setterA property accessor function called when a value is assigned to the property.
← Chapter 6: Chapter 6. Functions for the future: generators and promises
Chapter 8: Chapter 8. Controlling access to objects →
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.