JavaScript Object Oriented Programming

Compare class-based and prototype-based inheritance, noting that languages like C++ and Java rely on class chains, while JavaScript uses a prototype chain allowing dynamic properties and flexible object inheritance.

Explore inheritance in JavaScript by comparing real-world vehicles like cars and airplanes, where common properties are shared and move and stop methods are inherited through prototypes.

Explore the prototype chain in JavaScript by tracing how an instance uses its own properties and reaches prototype methods like push through higher prototypes, and observe the length property.

Explore how the prototype chain links every object in JavaScript, using the visible __proto__ property to access the hidden [[Prototype]] link, including primitives, until reaching null.

Explore how prototypes drive JavaScript objects through the prototype chain and how object.prototype is the top level prototype. New objects inherit methods from their prototype via the constructor.

Never reassign a prototype of any object in JavaScript, as it breaks the prototype chain and causes unexpected errors; use safe alternatives like Object.create.

Explore native prototypes in JavaScript, tracing the prototype chain for arrays, strings, and numbers, and see how primitives access shared methods like toUpperCase and toFixed.

Every function in JavaScript is an object and an instance of function.prototype, and arrow functions assigned to variables do not have a prototype and thus cannot be used as constructors.

Learn prototypal inheritance in JavaScript by building a plane with function constructors and a prototype chain, showing how properties initialize on instances and methods live on prototypes.

Explore function constructors in JavaScript by defining a civil plane prototype, creating instances with new, and examining the prototype and constructor properties to understand prototype chains.

Learn how function constructors create new objects with the new keyword, automatically link to the constructor's prototype, and add properties like title and quantity to each instance.

Explore how function constructors create new objects, assign properties like number of seats, and link to the prototype, revealing what happens under the hood when using new.

Learn how function constructors use prototypes to share methods across instances, and how prototype chains enable inheritance, while contrasting this binding in regular versus arrow functions.

Explore how Object.create sets a new object's prototype to a parent object, forming a prototype chain and inheritance without using prototypes or constructors.

Demonstrates creating a child object with object.create using a parent as its prototype, showing inherited type and type info, and how modifying the parent's method affects the child.

Demonstrates building a prototype chain with function constructors, using object.create to set airplane prototype, inherit wingspan and max range, and preserve the constructor and airplane info method.

Learn how to insert a new prototype into an existing prototype chain by creating a new function and reassigning its prototype.

Insert a vehicle prototype into the existing prototype chain, adding max speed and weight properties and a vehicle info method, then verify behavior on small and large objects.

Learn to insert the vehicle prototype into the airplane prototype chain, define max speed and weight properties, and wire the inform method across airplane and vehicle prototypes, with console verification.

Explore the JavaScript prototype chain by using instanceof and typeof to verify instance relationships among plane, small plane, large plane, airplane, and vehicle, and distinguish objects from functions.

Fix mistakes in function constructors to create objects that pass verification, with energy efficiency, a string price, and the DV as an instance of the TV electric device product.

Fix mistakes in function constructors to build a correct prototype chain, move methods to prototypes, and ensure tv, electric device, and product instances inherit behavior.

Explore how the iOS 6 class syntax provides a declarative alternative to functional constructors, using a constructor, new instances, and a clear set of prototype-style methods, not an object literal.

Compare function constructors with ES6 classes to create objects with title and quantity, reuse methods via prototypes, and implement inheritance using extends and super.

Explore how JavaScript classes behave like function constructors, including class declarations, hoisting behavior, and the prototype chain, with constructor methods and class expressions.

Set default values for class properties and handle missing props with ternary logic; explore prototype chain, extends and super in constructors, plus rest and spread operators.

Practice demonstrates extending a parent class with methods, examining prototype chains and instance behavior, and using static methods on the class versus instance methods in JavaScript object oriented programming.

Practice converting function constructors to iOS 6 classes by rewriting a three-prototype chain for a TV, showing inheritance from electric device to product to object.

Convert function constructors to classes by building a three-level prototype chain with product, electric device, and glass, using extends, super, and constructor to define price and energy info.

Extend the built-in array by creating a custom extended array with two methods, some and only numbers, and test these methods on all elements using instances of the extended array.

Extend the built-in array with a custom extended array class, adding some and only numbers methods while inheriting all standard array behaviors.

Tackle a JavaScript object-oriented challenge that extends the built-in array with a custom push method, adds elements without push, updates the instance length, and examines prototype method precedence.

Create a custom push method for a subclass of array that updates the length property automatically, and compare it to bracket notation while logging results.

Explore how ES6 classes map to React components, revealing prototype chains, constructor and super calls, props, state, and render logic, with practical examples using Material UI and React elements.

Extend the previous lecture by adding a second React button below the first, with color secondary and contained variant, wiring a click counter to update the button text.

Reuse an existing React button component to create multiple buttons, configuring each with distinct props such as color and variant to render independently in the DOM.