new
and a constructorlet circle = {};
circle.radius = 2;
circle.circumference = function() {
return Math.PI * 2 * this.radius;
};
circle.area = function() {
return Math.PI * this.radius * this.radius;
};
circle.radius; // 2
circle.area; // function () { ... }
circle.area(); // 12.566370614359172
The following code is equivalent to the previous slide, but easier to read:
let circle = {
radius: 2,
circumference: function() {
return Math.PI * 2 * this.radius;
},
area: function() {
return Math.PI * this.radius * this.radius;
}
};
circle.radius; // 2
circle.area; // function () { ... }
circle.area(); // 12.566370614359172
Beware of the difference between value properties and method properties!
circle.radius
is a value and evaluates to 2
circle.area
is a method and evaluates to function() {...}
circle.area()
is a method call and evaluates to 12.566370614359172
class
keywordIn 2015, JavaScript introduced the class
keyword which is syntactic sugar on top of JavaScript's existing prototype system.
This new class
syntax is much easier to understand than the previous system.
class Circle {
circumference() {
return Math.PI * this.radius * 2;
}
area() {
return Math.PI * this.radius * this.radius;
}
}
Use it like this:
let circle = new Circle(); // create a new Circle instance
circle.radius = 2; // set its radius to 2
circle.area(); // call the area method, which
// returns 12.566370614359172
This is the first time we've seen classes in JavaScript
Classes are for making lots of objects with the same methods, but different data
A class defines a type of object.
An instance is an individual object of that type.
For example, there are many houses, but my house is yellow.
new
does, in detail:this
to point to the objectthis
back to whatever it was beforethe principle of Complete Construction says that after the constructor executes, the object is in a valid state
in practice, this means "pass all initial values into the constructor"
class Circle {
constructor(radius) {
this.radius = radius;
}
circumference() {
return Math.PI * this.radius * 2;
}
area() {
return Math.PI * this.radius * this.radius;
}
}
Use it like this:
let circle = new Circle(2); // create a new Circle instance
// with radius 2
circle.area(); // call the area method, which
// returns 12.566370614359172
A: because it preserves encapsulation -- the idea that an object should be responsible for setting its own properties
constructors are a great place to validate your values
class Circle {
constructor(radius) {
if (radius <= 0) {
throw('radius must be a positive number')
}
this.radius = radius;
}
if
statement is known as a "guard clause"
Sometimes one constructor just isn't enough.
When the constructor accepts different parameters from the ones that you have on hand, you could define a factory function like this:
function circleFromDiameter(diameter) {
return new Circle(diameter / 2);
}
The above is called a "factory function" since it constructs objects for you, based on your specifications.
For convenience and code organization, factory functions are often attached to the class -- not the instance -- of the objects they create.
Factory Function | Factory Method |
---|---|
let c = circleFromDiameter(2) |
let c = Circle.fromDiameter(2) |
The factory method works exactly the same way as the factory function, but
the factory method is in the class namespace so it's more clear that it is meant to create one of this class of objects
To make a factory method in JavaScript, use the static
keyword:
class Circle {
static fromDiameter(diameter) {
return new Circle(diameter / 2);
}
constructor(radius) {
if (radius <= 0) {
throw('radius must be a positive number')
}
this.radius = radius;
}
circumference() {
return Math.PI * this.radius * 2;
}
area() {
return Math.PI * this.radius * this.radius;
}
}
and call it like this:
let circle = Circle.fromDiameter(4)
Note that (lowercase "c")
circle.fromDiameter()
does not work. Static methods are attached to classes, not instances.
Prior to 2015 -- and still today under the hood -- a class is really a pointer to a constructor function.
Defining a class required writing code like this:
var Circle = function(radius) {
this.radius = radius;
this.diameter = function() {
return this.radius * 2;
}
this.circumference = function() {
return Math.PI * 2 * this.radius;
}
this.area = function() {
return Math.PI * this.radius * this.radius;
}
};
You shouldn't need to write code like this anymore, but you should be able to recognize it if you see it.
/