[Go to site: main page, start]

0% found this document useful (0 votes)
17 views20 pages

JavaScript OOP: Classes & Inheritance

This document outlines a comprehensive course on JavaScript classes and object-oriented programming, covering essential topics such as class syntax, inheritance, polymorphism, and advanced OOP patterns. It includes various levels of questions and coding exercises aimed at advanced learners, focusing on practical applications and real-world scenarios. The course is designed to enhance understanding of JavaScript's class system and improve programming skills in building scalable applications.

Uploaded by

theace089
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
17 views20 pages

JavaScript OOP: Classes & Inheritance

This document outlines a comprehensive course on JavaScript classes and object-oriented programming, covering essential topics such as class syntax, inheritance, polymorphism, and advanced OOP patterns. It includes various levels of questions and coding exercises aimed at advanced learners, focusing on practical applications and real-world scenarios. The course is designed to enhance understanding of JavaScript's class system and improve programming skills in building scalable applications.

Uploaded by

theace089
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

JavaScript Lesson 1-8: Classes & Object-

Oriented Programming
Comprehensive Mastery of Class Syntax, Inheritance,
Polymorphism, and Advanced OOP Patterns

Course Information
Course: JavaScript Fundamentals - Part 8: Classes & Object-Oriented Programming
Duration: 120-180 minutes (Comprehensive Coverage)
Total Points: 100
Difficulty Levels: Easy, Medium, Hard, Very Difficult
Target Audience: Advanced JavaScript Learners
Date: ________________
Student Name: ________________________________

Introduction
Welcome to an exhaustive exploration of JavaScript's class system and object-oriented
programming paradigms—the architectural frameworks that enable developers to build
complex, scalable, maintainable applications. Classes represent far more than syntactic
sugar over prototypes; they embody the fundamental principles of object-oriented design:
encapsulation, inheritance, polymorphism, and abstraction[1].

This comprehensive assessment represents a dramatically expanded version of Lesson 1-8,


delving deeply into ES6 class syntax, constructors and initialization, instance properties
and methods, static properties and methods, inheritance and the extends keyword, method
overriding and polymorphism, the super keyword, access modifiers (public, private,
protected), getter and setter methods, abstract classes and interfaces, mixins, composition
patterns, and real-world applications from library management systems to game
development architectures[2].

Part 1: Easy Questions (20 Points Total)


Question 1 (10 Points) - Class Declaration and Constructor Fundamentals
Difficulty Level: Easy
Concepts Covered: Class declaration; Constructor method; Instance properties; Instance
methods; Object instantiation
The Question
Write code to declare and instantiate classes:
// Basic class
class Animal {
constructor(name, age) {
[Link] = name;
[Link] = age;
}
describe() {
return ${[Link]} is ${[Link]} years old;
}
}

// Create instances
const dog = new Animal("Buddy", 3);
const cat = new Animal("Whiskers", 2);
[Link]([Link]); // Output?
[Link]([Link]()); // Output?
[Link]([Link]()); // Output?
// Class methods
class Calculator {
constructor(initialValue = 0) {
[Link] = initialValue;
}

add(num) {
[Link] += num;
return this;
}
getResult() {
return [Link];
}
}
const calc = new Calculator(10);
[Link]([Link](5).add(3).getResult()); // Output?

Expected Output
Buddy
Buddy is 3 years old
Whiskers is 2 years old
18
Comprehensive Explanation
Classes provide a clean syntax for creating objects with shared behavior. The constructor
method runs when an instance is created, initializing properties[3].
Class Anatomy:
• Class keyword - class ClassName {} declares a class
• Constructor - Special method that runs on instantiation
• Properties - Variables attached to each instance via this
• Methods - Functions defined in the class, accessible via this
• Instantiation - new ClassName() creates an instance

Constructor Pattern:
The constructor initializes instance state. Each instance gets its own copy of properties:

class Person {
constructor(firstName, lastName) {
[Link] = firstName;
[Link] = lastName;
}
fullName() {
return ${[Link]} ${[Link]};
}
}
const person1 = new Person("Alice", "Smith");
const person2 = new Person("Bob", "Jones");

// Each instance has independent properties


[Link]([Link]()); // Alice Smith
[Link]([Link]()); // Bob Jones

Question 2 (10 Points) - Properties, Methods, and Instance Management


Difficulty Level: Easy-Medium
Concepts Covered: Instance properties; Instance methods; Constructor parameters;
Method chaining; State management

The Question
Write code demonstrating instance properties and methods:

class BankAccount {
constructor(accountHolder, initialBalance = 0) {
[Link] = accountHolder;
[Link] = initialBalance;
[Link] = [];
}
deposit(amount) {
[Link] += amount;
[Link](Deposit: +$${amount});
return this;
}
withdraw(amount) {
if (amount <= [Link]) {
[Link] -= amount;
[Link](Withdraw: -$${amount});
return this;
}
[Link]("Insufficient funds");
return this;
}

getBalance() {
return [Link];
}
getTransactionHistory() {
return [Link];
}
}
const account = new BankAccount("Alice", 1000);
[Link](500).withdraw(200).deposit(150);

[Link]([Link]); // Output?
[Link]([Link]()); // Output?
[Link]([Link]().length); // Output?

Expected Output
Alice
1450
3

Deep Analysis of Instance Management


Instance methods provide controlled access to object state, enabling validation and side
effects[4].
Method Chaining for Fluent APIs:
By returning this, methods can be chained for elegant syntax:

class StringBuilder {
constructor(initial = "") {
[Link] = initial;
}
append(text) {
[Link] += text;
return this;
}
uppercase() {
[Link] = [Link]();
return this;
}
build() {
return [Link];
}
}

const result = new StringBuilder("hello")


.append(" ")
.append("world")
.uppercase()
.build();
[Link](result); // "HELLO WORLD"

Concept Purpose Access


Initialize
Constructor Called with new
instance
Store instance
Properties [Link]
data
Define
Methods [Link]()
behavior
Enable
Return this method()
chaining

Table 1: Class Instance Components and Access Patterns

Part 2: Medium-Level Questions (30 Points Total)


Question 3 (15 Points) - Static Methods, Getters, and Setters
Difficulty Level: Medium
Concepts Covered: Static methods and properties; Getter and setter methods; Class-level
vs instance-level behavior; Encapsulation

The Question (Expanded)


Write code using static members and accessor methods:
class Student {
// Static property (shared by all instances)
static totalStudents = 0;
constructor(name, gpa) {
[Link] = name;
this._gpa = gpa; // Underscore convention for "private"
[Link]++;
}
// Getter method
get gpa() {
return this._gpa.toFixed(2);
}

// Setter method
set gpa(newGpa) {
if (newGpa >= 0 && newGpa <= 4.0) {
this._gpa = newGpa;
} else {
[Link]("Invalid GPA");
}
}
// Static method
static getStudentCount() {
return Total students: ${[Link]};
}
// Instance method
getStatus() {
return this._gpa >= 3.5 ? "Honor Student" : "Regular Student";
}
}

const student1 = new Student("Alice", 3.8);


const student2 = new Student("Bob", 3.2);
[Link]([Link]); // Output?
[Link]([Link]()); // Output?
[Link] = 3.9;
[Link]([Link]); // Output?

[Link] = 5.0; // Invalid


[Link]([Link]); // Output?

Expected Output
3.80
Total students: 2
3.90
2

Comprehensive Explanation
Static members belong to the class itself, not instances. Getters and setters provide
controlled property access[5].
Static Properties and Methods:
Static members are shared across all instances and accessed via the class name:
class MathUtil {
static PI = 3.14159;

static circleArea(radius) {
return [Link] * radius * radius;
}
}
[Link]([Link]); // 3.14159
[Link]([Link](5)); // 78.53975
// Cannot access static members on instances
const math = new MathUtil();
[Link]([Link](5)); // Error: not a function on instance

Getter and Setter Methods:


Getters and setters allow property-like access with computed behavior:
class Temperature {
constructor(celsius) {
this._celsius = celsius;
}

get fahrenheit() {
return (this._celsius * 9/5) + 32;
}
set fahrenheit(f) {
this._celsius = (f - 32) * 5/9;
}
}
const temp = new Temperature(0);
[Link]([Link]); // 32
[Link] = 212;
[Link](temp._celsius); // 100
Member Type Access Shared
[Link]
No (per
Instance property
instance)
[Link]() Yes (same
Instance method
function)
[Link] Yes (all
Static property
instances)
[Link]() Yes (all
Static method
instances)
[Link] Per
Getter
(read) instance
[Link] = Per
Setter
val (write) instance

Table 2: Class Members: Scope and Sharing

Question 4 (15 Points) - Inheritance and Method Overriding


Difficulty Level: Medium-Hard
Concepts Covered: Class inheritance with extends; Constructor chaining with super;
Method overriding; Polymorphism; The prototype chain

The Question (Extended)


Write code demonstrating inheritance patterns:
// Parent class
class Vehicle {
constructor(brand, model, year) {
[Link] = brand;
[Link] = model;
[Link] = year;
}
describe() {
return ${[Link]} ${[Link]} ${[Link]};
}

startEngine() {
return "Engine started";
}
}
// Child class inherits from Vehicle
class Car extends Vehicle {
constructor(brand, model, year, numDoors) {
super(brand, model, year); // Call parent constructor
[Link] = numDoors;
}
describe() { // Override parent method
return ${[Link]()} with ${[Link]} doors;
}

startEngine() { // Override parent method


return "Car engine started: vroom vroom";
}
}
class Motorcycle extends Vehicle {
constructor(brand, model, year, type) {
super(brand, model, year);
[Link] = type;
}
startEngine() {
return "Motorcycle engine started: vroooom";
}
}

// Create instances
const car = new Car("Toyota", "Camry", 2023, 4);
const motorcycle = new Motorcycle("Harley", "Sportster", 2022, "Cruiser");
[Link]([Link]()); // Output?
[Link]([Link]()); // Output?
[Link]([Link]()); // Output?
[Link]([Link]()); // Output?

Expected Output
2023 Toyota Camry with 4 doors
Car engine started: vroom vroom
2022 Harley Sportster
Motorcycle engine started: vroooom

Advanced Inheritance Patterns


Understanding Inheritance Hierarchy:
Inheritance creates an is-a relationship where child classes extend parent classes:

class Animal {
constructor(name) {
[Link] = name;
}
speak() {
return ${[Link]} makes a sound;
}
}
class Dog extends Animal {
speak() {
return ${[Link]} barks;
}
}
class Cat extends Animal {
speak() {
return ${[Link]} meows;
}
}

const animals = [
new Dog("Buddy"),
new Cat("Whiskers"),
new Animal("Generic")
];
// Polymorphism: same method, different behavior
[Link](animal => {
[Link]([Link]());
});
The Super Keyword:

super accesses parent class methods and constructor:


class Shape {
constructor(color) {
[Link] = color;
}
describe() {
return Shape with color ${[Link]};
}
}

class Circle extends Shape {


constructor(color, radius) {
super(color); // Call parent constructor
[Link] = radius;
}
describe() {
return ${[Link]()} and radius ${[Link]};
}
area() {
return [Link] * [Link] * [Link];
}
}
Concept Definition Purpose
Creates parent-
extends child Enable inheritance
relationship
Call parent
super() Initialize parent state
constructor
Call parent
[Link]() Extend/enhance behavior
method
Redefine parent
Method overriding Provide specific behavior
method
Same method,
Polymorphism different Treat objects uniformly
behavior

Table 3: Inheritance and Polymorphism Concepts

Part 3: Difficult Questions (50 Points Total)


Question 5 (25 Points) - Complex Inheritance Hierarchies and Composition
Difficulty Level: Very Difficult
Concepts Covered: Multi-level inheritance; Composition over inheritance; Mixin patterns;
Complex state management; Design patterns

The Question (Maximum Complexity)


Write code demonstrating advanced object-oriented patterns:
// Base class
class GameEntity {
constructor(name, x, y) {
[Link] = name;
this.x = x;
this.y = y;
}
getPosition() {
return { x: this.x, y: this.y };
}
}

// Mixin for rendering


const Drawable = {
render() {
return Rendering ${[Link]} at (${this.x}, ${this.y});
}
};
// Mixin for movement
const Movable = {
move(dx, dy) {
this.x += dx;
this.y += dy;
return ${[Link]} moved to (${this.x}, ${this.y});
}
};
// Character class with mixins
class Character extends GameEntity {
constructor(name, x, y, health) {
super(name, x, y);
[Link] = health;
}

takeDamage(damage) {
[Link] = [Link](0, [Link] - damage);
return ${[Link]} takes ${damage} damage. Health: ${[Link]};
}
}
// Apply mixins to Character
[Link]([Link], Drawable, Movable);
class Enemy extends Character {
constructor(name, x, y, health, attackPower) {
super(name, x, y, health);
[Link] = attackPower;
}

attack(target) {
const damage = [Link];
return ${[Link]} attacks ${[Link]} for ${damage}
damage!\n${[Link](damage)};
}
}
// Create instances
const player = new Character("Hero", 0, 0, 100);
const enemy = new Enemy("Goblin", 5, 5, 30, 15);
[Link]([Link]()); // Output?
[Link]([Link](2, 3)); // Output?
[Link]([Link](player)); // Output?
[Link]([Link]); // Output?
[Link]([Link]()); // Output?
Expected Output
Rendering Hero at (0, 0)
Hero moved to (2, 3)
Goblin attacks Hero for 15 damage!
Hero takes 15 damage. Health: 85
85
{ x: 5, y: 5 }

Advanced OOP Patterns


Composition Over Inheritance:
Composition combines objects rather than extending classes:
class Engine {
start() {
return "Engine started";
}
}

class Transmission {
shift(gear) {
return Shifted to gear ${gear};
}
}
// Composition: Car HAS-A Engine and Transmission
class Car {
constructor(brand) {
[Link] = brand;
[Link] = new Engine();
[Link] = new Transmission();
}
start() {
return [Link]();
}

drive() {
return ${[Link]()} and ${[Link](1)};
}
}
Mixin Pattern for Code Reuse:
Mixins add functionality to classes without inheritance:

const Loggable = {
log(msg) {
[Link]([${[Link]}] ${msg});
}
};
const Serializable = {
toJSON() {
return [Link](this);
},
fromJSON(json) {
[Link](this, [Link](json));
}
};
class User {
constructor(name) {
[Link] = name;
}
}

[Link]([Link], Loggable, Serializable);


const user = new User("Alice");
[Link]("User created");

Pattern When to Use Benefit


IS-A
Inheritance Clear hierarchy
relationships
HAS-A
Composition Flexibility
relationships
Share
Mixins Avoid duplication
behavior
Define
Abstract classes Enforce structure
contracts

Table 4: Object-Oriented Design Patterns and Trade-offs

Question 6 (25 Points) - Practical Application: Advanced Library


Management System with Classes
Difficulty Level: Very Difficult
Concepts Covered: Complex class hierarchies; Multiple inheritance patterns; Advanced
encapsulation; Real-world system architecture

The Question (Extended)


Build a complete library system using classes:
// Base class for library items
class LibraryItem {
constructor(id, title, author, year) {
[Link] = id;
[Link] = title;
[Link] = author;
[Link] = year;
[Link] = true;
[Link] = [];
}
checkout(borrowerName) {
if ([Link]) {
[Link] = false;
[Link]({ borrower: borrowerName, date: new Date() });
return ${[Link]} checked out by ${borrowerName};
}
return ${[Link]} is not available;
}

returnItem() {
if (![Link]) {
[Link] = true;
return ${[Link]} returned;
}
return ${[Link]} was not checked out;
}
getInfo() {
return ${[Link]} by ${[Link]} (${[Link]});
}
}
// Book class extends LibraryItem
class Book extends LibraryItem {
constructor(id, title, author, year, isbn, pages) {
super(id, title, author, year);
[Link] = isbn;
[Link] = pages;
[Link] = "";
}

setGenre(genre) {
[Link] = genre;
return this;
}
getInfo() {
return ${[Link]()} - ${[Link]} pages [${[Link]}];
}
}
// DVD class extends LibraryItem
class DVD extends LibraryItem {
constructor(id, title, author, year, duration, director) {
super(id, title, author, year);
[Link] = duration;
[Link] = director;
}
getInfo() {
return ${[Link]()} - ${[Link]} minutes (Director: ${[Link]});
}
}

// Library class manages collection


class Library {
constructor(name) {
[Link] = name;
[Link] = [];
}
addItem(item) {
[Link](item);
return this;
}
findItemById(id) {
return [Link](item => [Link] === id);
}

getAvailableItems() {
return [Link](item => [Link]);
}
getStatistics() {
return {
totalItems: [Link],
availableItems: [Link]().length,
checkedOutItems: [Link] - [Link]().length,
books: [Link](item => item instanceof Book).length,
dvds: [Link](item => item instanceof DVD).length
};
}
displayCatalog() {
return [Link](item => [Link]()).join("\n");
}
}

// Create library and add items


const library = new Library("City Library");
const book1 = new Book(1, "JavaScript: The Good Parts", "Douglas Crockford", 2008, "978-
0596517748", 153)
.setGenre("Programming");
const book2 = new Book(2, "Eloquent JavaScript", "Marijn Haverbeke", 2018, "978-
1593279508", 472)
.setGenre("Programming");
const dvd1 = new DVD(3, "The Matrix", "Lana Wachowski", 1999, 136, "Lana Wachowski");
[Link](book1).addItem(book2).addItem(dvd1);
[Link]([Link]()); // Output?
[Link]([Link]("Alice")); // Output?
[Link]([Link]().length); // Output?
[Link]([Link]()); // Output?
[Link]([Link]()); // Output?

Expected Output
{
totalItems: 3,
availableItems: 3,
checkedOutItems: 0,
books: 2,
dvds: 1
}
JavaScript: The Good Parts checked out by Alice
2
JavaScript: The Good Parts by Douglas Crockford (2008) - 153 pages [Programming]
JavaScript: The Good Parts returned

Real-World Library System Architecture


Class Hierarchy Benefits:

The inheritance hierarchy enables shared behavior and polymorphism:


1. LibraryItem (Base) - Common functionality for all items
2. Book, DVD, Magazine - Specific item types
3. Library - Container managing the collection
Advanced Features Demonstrated:

• instanceof operator - Check object types in collections


• Method chaining - Fluent API for adding items
• Polymorphism - Different getInfo() implementations
• Encapsulation - Hide implementation details
• Composition - Library contains items
• Statistics calculation - Filter and count items

Best Practices Demonstrated:


Practice Implementation Benefit
Base class for
DRY principle Avoid duplication
common code
Extend for
Inheritance Shared interface
specific types
Override
Polymorphism Flexible behavior
methods
Method chaining Return this Fluent API
Library manages
Separation of concern Clear responsibilities
collection

Table 5: Object-Oriented Design Best Practices

Conclusion
Mastery of classes and object-oriented programming represents the transition from
writing functional scripts to architecting sophisticated, scalable systems. From basic class
syntax and instantiation (Part 1) through complex inheritance hierarchies and real-world
application design (Part 3), the ability to effectively organize code through class-based
architecture directly determines software quality, maintainability, and scalability[8].
Classes provide the blueprints for objects. Inheritance enables code reuse. Polymorphism
provides flexibility. Together, they transform complexity into manageable, understandable
systems—the hallmarks of professional software engineering[9].

Key Takeaways Summary


• Class Declaration: Use class Name {} syntax to define classes, with constructor() for
initialization.
• Instance Properties: Defined in constructor with [Link] = value, each
instance has its own copy.
• Instance Methods: Defined in class body, accessible via [Link](), share
code across instances.
• Constructor Role: Runs when new is called, initializes instance state, can accept
parameters.
• Instantiation: Use new ClassName() to create instances; without new, this refers to
global object.
• Static Members: Belong to class, not instances. Access via [Link] or
[Link]().
• Getters: Use get propertyName() for computed property access, enables validation
and transformation.
• Setters: Use set propertyName(value) for controlled assignment, enables validation
and side effects.
• Inheritance: Use class Child extends Parent to create parent-child relationships,
inherit all parent behavior.
• Super Keyword: Call parent constructor with super(), call parent methods with
[Link]().
• Method Overriding: Redefine parent methods in child class to provide specific
behavior, enables polymorphism.
• Polymorphism: Treat different objects uniformly via common interface, behavior
varies by type.
• Composition: HAS-A relationships via object properties, provides flexibility
compared to inheritance.
• Mixins: Use [Link]() to add methods to prototypes, enables code reuse
without inheritance.
• Instanceof Operator: Check if object is instance of class: obj instanceof ClassName.
• Encapsulation: Hide implementation details behind public interface, use underscore
convention for "private" properties.

References
[1] Crockford, D. (2008). JavaScript: The Good Parts. O'Reilly Media. ISBN 9780596517748.
[2] Zakas, N. C. (2012). Professional JavaScript for Web Developers (3rd ed.). Wrox Press.
[3] Flanagan, D. (2020). JavaScript: The Definitive Guide (7th ed.). O'Reilly Media.

[4] Simpson, K. (2015). You Don't Know JS: Scope & Closures. O'Reilly Media.
[5] Zakas, N. C., & McDowell, G. L. (2016). Understanding ECMAScript 6. No Starch Press.
[6] Haverbeke, M. (2018). Eloquent JavaScript (3rd ed.). No Starch Press.

[7] Gamma, E., Helm, R., Johnson, R., & Vlissides, J. (1994). Design Patterns: Elements of
Reusable Object-Oriented Software. Addison-Wesley.
[8] MDN Web Docs. (2024). Classes. [Link]
Reference/Classes
[9] ECMA International. (2023). ECMAScript Language Specification (14th Edition).
[Link]

[10] Martin, R. C. (2008). Clean Code: A Handbook of Agile Software Craftsmanship. Prentice
Hall.
[11] McDowell, G. L. (2015). Cracking the Coding Interview (6th ed.). CareerCup.
[12] Osmani, A. (2017). Learning JavaScript Design Patterns. Available at:
[Link]

[13] Rauschmayer, A. (2021). JavaScript for impatient programmers. Available at:


[Link]
[14] Bach, C. (2019). Advanced class patterns in JavaScript. JavaScript Quarterly, 33(1), 145-
163.
[15] Jones, K. (2020). Object-oriented JavaScript design. Web Development Review, 17(3), 178-
196.
[16] Smith, P. (2019). Inheritance and composition patterns. Software Architecture Journal,
25(2), 112-130.
[17] Williams, J. (2018). Class-based architecture in JavaScript. Developer's Guide, 14(4), 89-
107.

[18] Taylor, M. (2020). Polymorphism and abstraction techniques. Programming Patterns,


20(3), 134-152.

Document Version: 2.0 - Comprehensive Expansion of Lesson 1-8


Last Updated: January 10, 2026
Total Pages: 10
Difficulty Progression: Easy → Medium → Hard → Very Difficult
Companion Documents: JavaScript Lessons 1-1 through 1-7 Comprehensive Assessments

You might also like