- Define Prototypes and Inheritance
- Describe how Constructors pass properties to new objects
- Define a custom Constructor method that sets one or more properties of a new object
So far, we've worked with variables, objects, and functions in Javascript.
- How do we define a variable to stores the value of the number 3?
- How do we define a variable to stores the value of your first name?
Answer:
var num = 3
var firstName = 'Hammad'
We might have seen in earlier exercises that there are methods we can call on these variables.
num.toFixed(2)
// -> 3.00
firstName.charAt(1)
// -> 'a'
But - We never defined these methods, so where do they come from?
In Javascript, there are objects that correspond to each of the basic data types.
- Number
- String
- Boolean
- etc
Whenever we assign one of these values to a variable, as in the examples, these new values inherit properties and methods from these Object Prototypes.
Prototypical Inheritance simply means that objects can pass properties to other objects.
These Object Prototypes themselves inherit from the Object Prototype
itself, and the diagram of how properties and methods are passed down from object to object is the Prototypal Chain.
If we look for a property or method, Javascript will look at that object, and if it cannot find it then it will go up the Prototype Chain and search for it in the Constructors.
Question: why might this be useful?
A few reasons:
- Reuse properties and methods (DRY)
- Flexible: objects can add their own properties
- Organization
We can use Prototypal Inheritance in our own custom objects, too!
Let's say we want to make a bunch of Objects to represent cars.
What are some good properties for a car?
Answer:
var carA = {
make: 'Camry',
year: 2010
}
Now, what if we want to make ANOTHER car?
function Car (make, year) {
this.make = make,
this.year = year,
this.honkHorn = function () {
alert('HOOOOOOONK!')
}
}
Note: by convention, we capitalize the first letter in Constructors.
How do we now use the Car Constructor to make a new car object?
var camry = new Car('camry', 2010)
Let's make some cars!
As a class, let's make a constructor function for a Book and give it two properties, and create a book object.
How do we start?
If we look closely at our new objects, we might notice that the honkHorn
method is duplicated in each object we create.
Bonus: how could we use Prototype methods to check if an object has it's own property, or if it is inheriting it from a constructor?
The Constructor method has a property called .prototype
that allows us to add methods specifically to the method. That way, we can remove it from the method itself and each time we make a new object, it will then look at the Prototype for that method.
/** new Car constructor */
function Car (make, year) {
this.make = make,
this.year = year
}
Car.prototype.honkHorn = function () {
alert('HOOOOOOONK!')
}
There's a lot to unpack with this code change, let's make sure everyone understands what's happening before we start the You Do
Make a Constructor function called Temperature.
- Give the Constructor two properties:
- a property to store the unit for the temperature (Fahrenheit, Celsius, Kelvin, go nuts!)
- a property to store the value of the temperature
- Use the Constructor to create two unique Objects
Give the constructor a method to convert the temperature from one measurement unit to another