Classes Flashcards
function Rectangle(length, width) {
this.length = length;
this.width = width;
}
Rectangle.prototype.getArea = function() {
return this.length * this.width;
};
let rec = new Rectangle(10, 5);
console.log(rec.constructor == Rectangle);
true
There is a property
Create a constructor with the class keyword
class Rectangle {
constructor(length, width) {
this.length = length;
this.width = width;
}
getArea() {
return this.length * this.width;
}
}
let rec = new Rectangle(10, 5);
console.log(typeof Rectangle); // function
console.log(rec instanceof Rectangle); // true
console.log(rec.constructor); // [class Rectangle]
console.log(rec.getArea()); // 50
What will this log?
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
area() {
return this.height * this.width
}
}
let apple = new Rectangle(2, 2);
console.log(apple.constructor);
[class Rectangle]
(vs function Rectangle that would have happened with the class keyword)
What happens with this
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
area() {
return this.height * this.width
}
}
let apple = Rectangle(2, 2);
Type error
Create a class expression (rather than class declaration)
let Rectangle = class {
constructor(length, width) {
this.length = length;
this.width = width;
}
getArea() {
return this.length * this.width;
}
};
What happens with:
function createObject(classDef) {
return new classDef();
}
class Foo {
sayHi() {
console.log(‘Hi!’);
}
}
let obj = createObject(Foo);
obj.sayHi();
//=> logs ‘Hi!’
Difference between class methods and static methods
Same thing,
But in js we call them static methods. Classes are just syntactic sugar
Define properties (static properties) and methods an a constructor made using the class keyword
class Rectangle {
constructor(length, width) {
this.length = length;
this.width = width;
}
static getDescription() {
return ‘A rectangle is a shape with 4 sides’;
}
getArea() {
return this.length * this.width;
}
}
console.log(Rectangle.getDescription()); // A rectangle is a shape with 4 sides
What is logged
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
area() {
return this.height * this.width
}
}
Rectangle.poper = 123;
console.log(Rectangle.poper);
123
Class is synactic sugar, but what are 4 things unique to it?
- All code in class executes in strict mode.
- class declarations are not hoisted
- must use new keywordor it throws an error
- you can’t reassign the prototype of a class
ClassName.prototype cannot be reassigned (wlll fail silently)
What is the typeof of each animal
function Dog() {
}
function Pet(type) {
if (type === ‘dog’) {
return new Dog();
} else if (type === ‘lion’) {
return ‘not a pet!’;
}
}
let dog = new Pet(‘dog’);
let lion = new Pet(‘lion’);
let cat = new Pet(‘cat’);
Object
Object
Object
Why does this give an error:
const Animal = function(species) {
this.species = species;
return species;
};
Animal.prototype.sleep = function() {
console.log(The ${this.species} is sleeping);
};
let lion = Animal(‘Panthera leo’);
lion.sleep(); // TypeError
Animal is called without the new keyword
What will this log?
let Applesauce = class {
constructor(height, width) {
this.height = height;
this.width = width;
}
static apple = 123;
area() {
return this.height * this.width;
}
}
let rectangle = new Applesauce(2, 4);
console.log(Applesauce)
[class Applesauce] { apple: 123 }
When creating objects and setting prototypes with
let newObject = Object.create(object);
Set some beginning properties of newObject using a function on object.
let carPrototype = {
start: function() {
this.started = true;
},
stop: function() {
this.started = false;
},
init(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
},
};
let car1 = Object.create(carPrototype);
car1.init(‘Toyota’, ‘Corolla’, 2016);
When creating objects and setting prototypes with
let newObject = Object.create(object);
Set some beginning properties of newObject using a function on object. But do it in 1 line.
let carPrototype = {
start: function() {
this.started = true;
},
stop: function() {
this.started = false;
},
init(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
return this;
},
};
let car1 = Object.create(carPrototype).init(‘Toyota’, ‘Corolla’, 2016);
Give an example of an OLOO function creation system
What does OLOO stand for?
Objects Linking to Other Objects
let carPrototype = {
start: function() {
this.started = true;
},
stop: function() {
this.started = false;
},
};
let car1 = Object.create(carPrototype);
car1.make = ‘Toyota’;
car1.model = ‘Corolla’;
car1.year = 2016;
Adv and Dis of OLOO vs factory functions (1 each)
the OLOO pattern has one significant advantage over factory functions: memory efficiency. Since all objects created with the OLOO pattern inherit methods from a single prototype object, the objects that inherit from that prototype object share the same methods. Factory functions, on the other hand, create copies of all the methods for each new object. That can have a significant performance impact, especially on smaller devices with limited memory.
However, that doesn’t mean that OLOO is decidedly better than the factory pattern. An advantage of the factory pattern is that it lets us create objects with private state. If that doesn’t make sense to you yet, don’t worry. We’ll return to this topic in a later course when we discuss closures.
Question 2
https://launchschool.com/lessons/d5964d17/assignments/02f965cb
const PetPrototype = {
init(animal, name) {
this.animal = animal;
this.name = name;
return this;
},
sleep: function() {
console.log(“I am sleeping”);
},
wake: function() {
console.log(“I am awake”);
},
};
Create a prototypal chain like this, using a Constructor Function (not classes!):
sqr —> Square.prototype —> Rectangle.prototype —> Object.prototype
Make sure the sqr consructor also points to Square
function Rectangle(length, width) {
this.length = length;
this.width = width;
}
Rectangle.prototype.getArea = function() {
return this.length * this.width;
};
Rectangle.prototype.toString = function() {
return [Rectangle ${this.length} x ${this.width}];
};
// rect test code omitted
function Square(size) {
Rectangle.call(this, size, size);
}
Square.prototype = Object.create(Rectangle.prototype);
Square.prototype.constructor = Square;
Square.prototype.toString = function() {
return [Square ${this.length} x ${this.width}];
};
// sqr test code omitted
Difference between prototypal inheritance and pseudo-classical inheritance
Prototypal inheritance is inheritance object to object.
Pseudo classical inheritance is when the prototype is an object on a constructor
Problem at the bottom:
https://launchschool.com/lessons/d5964d17/assignments/006358da
https://launchschool.com/lessons/d5964d17/assignments/006358da
Using the class keyword, have a class prototype reference another
class Rectangle {
constructor(length, width) {
this.length = length;
this.width = width;
}
getArea() {
return this.length * this.width;
}
toString() {
return [Rectangle ${this.width * this.length}];
}
}
class Square extends Rectangle {
constructor(size) {
Rectangle.call(this, size, size);
}
toString() {
return [Square] ${this.width * this.length};
}
}
Using the super keyword, have a class use the constructor method of the parent class
basically equivalent to this:
Rectangle.call(this, size, size);
class Rectangle {
constructor(length, width) {
this.length = length;
this.width = width;
}
getArea() {
return this.length * this.width;
}
toString() {
return [Rectangle ${this.width * this.length}];
}
}
class Square extends Rectangle {
constructor(size) {
super(size, size);
}
toString() {
return [Square] ${this.width * this.length};
}
}
Do a Class declaration and then a class expression using the extends keyword
class Student extends Person {
let Student = class extends Person {
Practice Problems
https://launchschool.com/lessons/d5964d17/assignments/16921628
https://launchschool.com/lessons/d5964d17/assignments/16921628
What’s a mix-in, what problem does it solve
It’s the mix of prototypal inheritance and factory function (the same method on all instances for example).
It solves the problem where it seems like one object should have 2 prototypes.
Create a mix-in with birds of subtype flying or swimming birds which are subtypes of bird
Birds can be swiming, flying, or swiming and flying.
Basically with Object.assign
https://launchschool.com/lessons/d5964d17/assignments/e7850b07
Create factory functions with birds of subtype flying or swimming birds which are subtypes of bird
https://launchschool.com/lessons/d5964d17/assignments/e7850b07
const Swimmable = {
swim() {}
}
class Bird {}
class FlyingBird extends Bird {
fly() {}
}
class Stork extends FlyingBird {}
class Parrot extends FlyingBird {}
class Penguin extends Bird {}
Object.assign(Penguin.prototype, Swimmable);
class Ostrich extends Bird {}
Object.assign(Ostrich.prototype, Swimmable);
class Duck extends FlyingBird {}
Object.assign(Duck.prototype, Swimmable);
class Goose extends FlyingBird {}
Object.assign(Goose.prototype, Swimmable);
Practice Problems:
https://launchschool.com/lessons/d5964d17/assignments/e7850b07
https://launchschool.com/lessons/d5964d17/assignments/e7850b07
Return the name of a function
Return the name of a constructor
(for example when the function is declared or a function expression assigned to a variable)
theFunction.name
anObject.constructor.name
What is polymorphism? What’s the benefit?
What’sthe difference between polymorphism by inheritence and polymorphism by ducktyping.
Different objects repond in different ways to the same message.
Data of different types responding to a common interface.
Polymorphism refers to the ability of objects with different types to respond in different ways to the same message (or method invocation); that is, data of different types can respond to a common interface.
It makes the code more manageable.
By inheritence: When a subclass has the same method name as a superclass
By Ducktyping: When different objects have identical method names
Describe two different polymorphic implementations
You could have a chain of methods (Polymorphism Through Inheritance):
https://launchschool.com/lessons/d5964d17/assignments/22f0ecca#:~:text=to%20implement%20polymorphism.-,Polymorphism,-Through%20Inheritance
Or just objects with the same name of method (Polymorphism Through Duck Typing)
https://launchschool.com/lessons/d5964d17/assignments/22f0ecca#:~:text=Polymorphism%20Through%20Duck%20Typing
The Quiz
https://launchschool.com/quizzes/a3cb12b5/edit
https://launchschool.com/quizzes/a3cb12b5/edit
https://launchschool.com/lessons/e3c64e3f/assignments/cb0a5ff7
https://launchschool.com/lessons/e3c64e3f/assignments/cb0a5ff7
https://launchschool.com/lessons/1eaf5e37/assignments/39b60e49
https://launchschool.com/lessons/1eaf5e37/assignments/39b60e49
https://launchschool.com/lessons/1eaf5e37/assignments/69e660e6
https://launchschool.com/lessons/1eaf5e37/assignments/69e660e6
https://launchschool.com/lessons/fb892747/assignments/271844ae
https://launchschool.com/lessons/fb892747/assignments/271844ae
The class that inherits properties from an object is called the…
The class this object inherits from is called the
Subclass
SuperClass
What does this do
class AClass {
afunction = function() {
console.log(‘applesauce’);
}
}
let anObject = new AClasss()
console.log(anObject)
AClass { afunction: [Function: afunction] }
the prototype methods need to be in the format of
afunction() {
}
What does this log to console?
function Rectangle(length, width) {
this.length = length;
this.width = width;
}
Rectangle.prototype.getArea = function() {
return this.length * this.width;
};
Rectangle.prototype.toString = function() {
return Rectangle ${this.length} x ${this.width};
};
function Square(size) {
Rectangle.call(this, size, size);
}
Square.prototype = Object.create(Rectangle.prototype);
Square.prototype.toString = function() {
return Square ${this.length} x ${this.width};
};
let square = new Square(2,5);
[Function: Rectangle]
Where is an object’s constructor property?
On the prototype
object.constructor
Is really like going:
Object.getPrototypeOf(object).constructor
When does instanceof return true?
- When the object was created using the new keyword
- the object after ‘instanceof’ is in the prototype chain for the object before
class Critter {}
class Snake extends Critter {}
class Rattler extends Snake {}
rattler is a subtype of critter
T or F
F
What happens if you omit the constructor function from a class that extends another
It basically uses the parent class’ constructor as if you had a contructor function and super() was called.
