Classes are used to create objects:
- class <––– object
Vocabulary
- instance properties => what they have instance methods => what they do
- constructor => method that is run once when the object is bring created -- used to set up your object
-
thiskeyword => refers to the object created by the class (the instance)
Creating a class:
class Rectangle {
constructor (_width, _height) {
console.log("Creating a rectangle")
this.width = _width (instance property)
this.height = _height (instance property)
,, }
getArea () (instance method) {
return this.width * this.height
}
printDescription() (instance method) {
console.log(`I am rectangle a of ${this.width} x ${this.height}
}
}
Try it out:
let myRectangle1 = new Rectangle(2, 6)
let myRectangle2 = new Rectangle(10, 6)
console.log(myRectangle1.getArea())
myRectangle2.printDescription()
Getters and Setters
Getter
- Used to define methods on a class, which are then used as if they are properties
Setter
- Assign new values to instance properties
class Square {
constructor (_width) {
this.width =_width
this.height = _width
}
get area() {
return this.width * this.height
}
set area(area) {
this.width = Math.sqrt(area)
this.height = this.width
}
}
Try it out:
let square1 = new Square(4)
console.log(square1.area)
square1.area = 25 //modifies the value of square sides to 5
console.log(sqare1.width)
Static Method
- Method you can define on a class but that does not require an instance of the class to be created in order to be used
- Static method is called on the square class itself. Also called a helper method
- Does not have an object bound to them
- Does not use the
thiskeyword
class Square {
constructor (_width) {
this.width = _width
this.height = _height
}
static equals (a, b) {
return a.width * a.height === b.width * b.height
}
static isValidDemensions (width, height) {
return width === height
}
}
Try it out:
let square1 = new Square(8)
let square2 = new Square(9)
console.log(square1, square2)
console.log(Square.isValidDimensions(7,6))
Inheritance with extend
- Uses the
extendkeyword - Parent class is used to create new child class
- The child class takes attributes and behavior of the parent. It will also have its own custom behavior
class Person {
constructor (_name, _age) {
this.name = _name
this.age = _age
}
describe() {
console.log(`I am ${this.name} and I am $this.age} years old.`
}
}
class Programmer extends Person { //child class Programmer of Person
constructor (_name, _age, _yearsOfExperience) {
super(_name, _age) //calls the properties from the parent class)
//custom behavior
this.yearsOfExperience = _yearsOfExperience
}
code () {
console.log(`${this.name} is coding`)
}
Try it out:
let p1 = new Person("Sheva", 45)
let programmer1 = new Programmer("Ayana", 56, 12)
const programmers = [
new Programmer("Frank", 62, 5),
new Programmer("Jane", 25, 4
];
function developSoftware (programmers) {
for (let programmer of programmers) {
programmer.code()
}
}
Polymorphism
- Act of redefining a method inside a derived child class of a parent class
- When you override a method with the one in the child class, instead of using what's in the parent class
class Animal {
constructor(name){
this.name = name
}
makeSound () {
console.log("Generic sounds")
}
}
class Dog extends Animal {
constructor(name) {
super(name)
}
makeSound() {
super.makeSound() //calls the parent class first, then child class
console.log("Woof!")
}
}
const a1 = new Animal("Dom")
a1.makeSound()
const a2 = new Dog("Jeff")
a2.makeSound()
HTML List Binding
- Creating a class that can manipulate the DOM directly
<ul id = "myList">
//<-----JavaScript List will go here----->
</ul>
<script src = "ListBinding.js"> </script>
<script type = "text/javascript">
const myList = document.getElementById("myList");
const listBinding = new ListBinding(myList);
</script>
ListBinding.js
class ListBinding {
constructor (element) {
this.listElement = element;
this.textList = ["abc", "is as easy","as 123" ]
}
//Makes an <li>text</li> element/tag
static createListItem (text) {
const li = document.createElement("li");
li.textContent = text;
return li;
update() {
// 1---- remove all existing <li> tags
while (this.listElement.firstChild) {
this.listElement.removeChild(this.listElement.firstChild)
}
// 2---- Fill <ul> tag with <li>
for (const text of this.textList) {
this.listElement.appendChild(ListBinding.createListItem(text))
}
}
}
add (text) {
this.textList.push(text)
this.update()
}
remove (index) {
this.textList.splice(index, 1);
this.update();
}
}
Freecodecamp.org Video tutorial I used:
https://youtu.be/2ZphE5HcQPQ
Top comments (0)