๐ด Introduction to Classes
class User {
constructor(name) {
this.username = name;
}
sayHello() {
console.log(`Hello, my name is ${this.username}`);
}
}
const myUser = new User("Ryong");
myUser.sayHello(); // Hello, my name is Ryong
๐ Extending Classes
class User {
// this => User
constructor(name, lastName, email, password) {
this.username = name;
this.lastName = lastName;
this.email = email;
this.password = password;
}
sayHello() {
console.log(`Hello, my name is ${this.username}`);
}
getProfile() {
console.log(`${this.username} ${this.email} ${this.password}`);
}
updatePassword(newPassword, currentPassword) {
if (currentPassword === this.password) {
this.password = newPassword;
} else {
console.log("Can't change password.");
}
}
}
class Admin extends User {
constructor(superAdmin) {
this.superadmin = superAdmin;
// ์ด๋ด ๊ฒฝ์ฐ, ๊ธฐ์กด์ constructor๋ฅผ ์์ด๋ฒ๋ฆฌ๊ฒ ๋๋ค.
}
deleteWebsite() {
console.log("Deleting the whole website...");
}
}
const myAdmin = new Admin("Ryong", "Jeong", "ryong@com", "1234", true);
myAdmin.deleteWebsite(); // Deleting the whole website...
console.log(myAdmin);
๐ก super
class User {
// this => User
constructor({ username, lastName, email, password }) {
this.username = name;
this.lastName = lastName;
this.email = email;
this.password = password;
}
sayHello() {
console.log(`Hello, my name is ${this.username}`);
}
getProfile() {
console.log(`${this.username} ${this.email} ${this.password}`);
}
updatePassword(newPassword, currentPassword) {
if (currentPassword === this.password) {
this.password = newPassword;
} else {
console.log("Can't change password.");
}
}
}
const myUser = new User({
username: "Ryong",
lastName: "Jeong",
email: "ryong@com",
password: "1234"
});
class Admin extends User {
constructor({ username, lastName, email, password, superAdmin, isAdmin }) {
super({ username, lastName, email, password });
this.superAdmin = superAdmin;
this.isActive = isActive;
}
deleteWebsite() {
console.log("Deleting the whole website...");
}
}
const myAdmin = new Admin({
username: "Ryong",
lastName: "Jeong",
email: "ryong@com",
password: "1234",
superAdmin: true,
isActive: true
});
class Counter {
constructor({ initialNumber = 0, couterId, plusId, minusId }) {
this.count = initialNumber;
this.counter = document.getElementById(counterId);
this.counter.innerText = initialNumber;
this.plusBtn = document.getElementByID(plusId);
this.minusBtn = document.getElementById(minusId);
this.addEventListeners();
}
addEventListeners = () => {
this.plusBtn.addEventListener("click", this.increase);
this.minusBtn.addEventListener("click", this.decrease);
};
increase = () => {
this.count = this.count + 1;
this.repaintCount();
// arrow function์ด ์๋ normal function์์ this๋ฅผ ์ฌ์ฉํ ๊ฒฝ์ฐ,
// eventListener ์์ ์๋ ํจ์์ this์ด๊ธฐ ๋๋ฌธ์
// this๋ plusBtn์ ๊ฐ๋ฆฌํค๊ฒ ๋๋ค.
// class ๋ด๋ถ์ ๋ชจ๋ ๊ณณ์์ this๋ก class๋ฅผ ๊ฐ๋ฆฌํค๊ธฐ ์ํด์๋
// arrow function์ ์ฌ์ฉํ๋ฉด ๋๋คโ
};
decrease = () => {
this.count = this.count - 1;
this.repaintCount();
};
repaintCount = () => {
this.counter.innerText = this.count;
};
}
new Counter({ counterId: "count", plusId: "add", minusId: "minus" });
'JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[ JS ] Generators and Maps (0) | 2022.07.06 |
---|---|
[ JS ] Symbol, Set and Map (0) | 2022.07.06 |
[ JS ] Async / Await (0) | 2022.07.06 |
[ JS ] Promises (0) | 2022.07.06 |
[ JS ] For Loop (0) | 2022.07.05 |