Classes Flashcards
(44 cards)
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 {
