- Practice writing JavaScript objects that inherit from other objects
- Practice using
Object.create()
- Practice use
hasOwnProperty()
- Explain what a prototype is in JavaScript
In this lab we're going to create a geometry application that allows us
to place various shapes on a plane and move them about. We'll be using
prototypal inheritance with Object.create
to build objects that inherit from and extend
base objects. For a refresher on using prototypal inheritance with
Object.create
, check the MDN example.
We'll also be exploring the idea of composition, or using objects as parts with which we'll compose other objects. If inheritance describes an is-a relationship, then you can think of composition as describing a has-a relationship.
For instance, if a Car
has a property engine
property, and that
property holds an Engine
object with its own properties and methods,
that's composition. An Engine
would never inherit from Car
, and a
Car
would never inherit from Engine
, but we can use an Engine
(and
other objects) to compose a Car
.
Remember that a prototype is essentially just an object, and any properties and methods we add to an object's prototype will be available to all objects that inherit from that prototype via delegation. If a property or method isn't found on an object, then JavaScript will look at every object up the prototype chain until it is found (or not).
Follow the instructions below, and don't forget to make sure your tests pass!
- Define a
Point
object that is constructed with anx,y
coordinate pair to indicate its position. Add atoString
function to the Point prototype to return the location in(x, y)
format. - Define a
Shape
object. This will be the base for all shapes on the plane. It should have anaddToPlane
function that takes two integers,x
andy
, as arguments. This function should assign aPoint
to the Shape'sposition
property based on these arguments. Shape should also define amove
function that takes anx,y
pair of arguments and moves theposition
to a newPoint
. - Define a
Circle
object that inherits fromShape
and is constructed with an integer argument that sets theradius
property. Define and implement functions onCircle
to calculatearea()
andcircumference()
based on theradius
. - Define a
Polygon
object that inherits fromShape
. It should be constructed with an array ofSide
objects that have alength
property.Polygon
should have a property calledsides
that holds the array ofSide
objects. Implement a function calledperimeter()
that calculates the perimeter of anyPolygon
based on the lengths of thesides
. Implement a function callednumberOfSides()
that returns the number of sides. - Define a
Quadrilateral
object that inherits fromPolygon
and is constructed with four integer arguments representing the side lengths. - Define a
Triangle
object that inherits fromPolygon
and is constructed with three integer arguments representing the side lengths. - Define a
Rectangle
object that inherits fromQuadrilateral
and is constructed with two integer arguments that setwidth
andheight
properties. Implement anarea()
function to calculate the area. - Define a
Square
object that inherits fromRectangle
and is constructed with a single integer argument that sets alength
property. If everything is wired up right in the prototype chain,Square
should have access toarea()
,perimeter()
,numberOfSides()
,addToPlane()
,position
,move()
,width
,height
and so on. - Define and implement a function for
Square
calledlistProperties()
that returns a string containing only the properties that belong toSquare
. It should not list theconstructor
,area
,perimeter
, and other things inherited from the prototype chain.
View Inheritance Patterns Lab on Learn.co and start learning to code for free.