Introduction
In JavaScript, objects are the fundamental building blocks. Understanding prototypes and inheritance is crucial for mastering object-oriented programming in JavaScript. This section will cover the following key concepts:
- Prototypes
- Prototype Chain
- Inheritance
- Practical Examples
- Exercises
- Prototypes
What is a Prototype?
A prototype is an object from which other objects inherit properties. Every JavaScript object has a prototype, which is also an object. This prototype object can have its own prototype, forming a chain known as the prototype chain.
Creating a Prototype
When you create a function in JavaScript, a prototype property is automatically created for that function. This prototype property is an object that contains a constructor property pointing back to the function.
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.greet = function() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};
const john = new Person('John', 30);
john.greet(); // Output: Hello, my name is John and I am 30 years old.Explanation
- Person: A constructor function used to create new objects.
- Person.prototype.greet: Adding a method to the prototype of the Person constructor.
- john: An instance of Person. It inherits the greet method from Person's prototype.
- Prototype Chain
Understanding the Prototype Chain
The prototype chain is a series of linked objects. When you try to access a property or method on an object, JavaScript first looks at the object itself. If it doesn't find the property or method there, it looks at the object's prototype, and so on, up the chain.
console.log(john.__proto__ === Person.prototype); // true console.log(Person.prototype.__proto__ === Object.prototype); // true console.log(Object.prototype.__proto__); // null
Explanation
- john.proto: Points to Person.prototype.
- Person.prototype.proto: Points to Object.prototype.
- Object.prototype.proto: Points to null, indicating the end of the chain.
- Inheritance
Classical vs. Prototypal Inheritance
JavaScript uses prototypal inheritance, which is different from classical inheritance found in languages like Java or C++. In prototypal inheritance, objects inherit directly from other objects.
Inheriting Properties and Methods
You can create a new constructor function that inherits properties and methods from another constructor function.
function Employee(name, age, jobTitle) {
Person.call(this, name, age);
this.jobTitle = jobTitle;
}
Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;
Employee.prototype.work = function() {
console.log(`${this.name} is working as a ${this.jobTitle}.`);
};
const jane = new Employee('Jane', 28, 'Software Engineer');
jane.greet(); // Output: Hello, my name is Jane and I am 28 years old.
jane.work(); // Output: Jane is working as a Software Engineer.Explanation
- Employee: A constructor function that calls the Person constructor using
Person.call(this, name, age). - Employee.prototype = Object.create(Person.prototype): Sets up inheritance so that Employee instances inherit from Person.
- Employee.prototype.constructor = Employee: Corrects the constructor property to point to Employee.
- jane: An instance of Employee that inherits methods from both Employee and Person.
- Practical Examples
Example 1: Extending Built-in Objects
You can extend built-in objects like Array or String by adding methods to their prototypes.
Array.prototype.last = function() {
return this[this.length - 1];
};
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.last()); // Output: 5Example 2: Creating a Chain of Inheritance
You can create a chain of inheritance by linking multiple constructor functions.
function Manager(name, age, jobTitle, department) {
Employee.call(this, name, age, jobTitle);
this.department = department;
}
Manager.prototype = Object.create(Employee.prototype);
Manager.prototype.constructor = Manager;
Manager.prototype.manage = function() {
console.log(`${this.name} is managing the ${this.department} department.`);
};
const alice = new Manager('Alice', 35, 'Project Manager', 'IT');
alice.greet(); // Output: Hello, my name is Alice and I am 35 years old.
alice.work(); // Output: Alice is working as a Project Manager.
alice.manage(); // Output: Alice is managing the IT department.
- Exercises
Exercise 1: Create a Prototype Chain
Create a prototype chain where Animal is the base constructor, Mammal inherits from Animal, and Dog inherits from Mammal.
function Animal(name) {
this.name = name;
}
Animal.prototype.eat = function() {
console.log(`${this.name} is eating.`);
};
function Mammal(name, hasFur) {
Animal.call(this, name);
this.hasFur = hasFur;
}
Mammal.prototype = Object.create(Animal.prototype);
Mammal.prototype.constructor = Mammal;
Mammal.prototype.walk = function() {
console.log(`${this.name} is walking.`);
};
function Dog(name, hasFur, breed) {
Mammal.call(this, name, hasFur);
this.breed = breed;
}
Dog.prototype = Object.create(Mammal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function() {
console.log(`${this.name} is barking.`);
};
const buddy = new Dog('Buddy', true, 'Golden Retriever');
buddy.eat(); // Output: Buddy is eating.
buddy.walk(); // Output: Buddy is walking.
buddy.bark(); // Output: Buddy is barking.Solution Explanation
- Animal: Base constructor with an
eatmethod. - Mammal: Inherits from Animal and adds a
walkmethod. - Dog: Inherits from Mammal and adds a
barkmethod. - buddy: An instance of Dog that can eat, walk, and bark.
Conclusion
Understanding prototypes and inheritance in JavaScript is essential for writing efficient and maintainable code. By mastering these concepts, you can create complex object hierarchies and extend built-in objects to suit your needs. In the next module, we will delve deeper into classes and object-oriented programming in JavaScript.
JavaScript: From Beginner to Advanced
Module 1: Introduction to JavaScript
- What is JavaScript?
- Setting Up Your Development Environment
- Your First JavaScript Program
- JavaScript Syntax and Basics
- Variables and Data Types
- Basic Operators
Module 2: Control Structures
Module 3: Functions
- Defining and Calling Functions
- Function Expressions and Arrow Functions
- Parameters and Return Values
- Scope and Closures
- Higher-Order Functions
Module 4: Objects and Arrays
- Introduction to Objects
- Object Methods and 'this' Keyword
- Arrays: Basics and Methods
- Iterating Over Arrays
- Array Destructuring
Module 5: Advanced Objects and Functions
- Prototypes and Inheritance
- Classes and Object-Oriented Programming
- Modules and Import/Export
- Asynchronous JavaScript: Callbacks
- Promises and Async/Await
Module 6: The Document Object Model (DOM)
- Introduction to the DOM
- Selecting and Manipulating DOM Elements
- Event Handling
- Creating and Removing DOM Elements
- Form Handling and Validation
Module 7: Browser APIs and Advanced Topics
- Local Storage and Session Storage
- Fetch API and AJAX
- WebSockets
- Service Workers and Progressive Web Apps (PWAs)
- Introduction to WebAssembly
Module 8: Testing and Debugging
Module 9: Performance and Optimization
- Optimizing JavaScript Performance
- Memory Management
- Efficient DOM Manipulation
- Lazy Loading and Code Splitting
Module 10: JavaScript Frameworks and Libraries
- Introduction to React
- State Management with Redux
- Vue.js Basics
- Angular Basics
- Choosing the Right Framework