세번째 과제를 수행할 때 다른 팀원분이 class를 사용하여 코드를 짠 것을 보고 굉장히 편리하다는 생각이 들었고, 이참에 한번 자바스크립트에서 클래스를 사용하는 법을 명확하게 알아봐야겠다는 생각을 했다.
왠지 어렵게만 느껴져서 미뤄왔던 클래스 공부, 이번 기회에 잡고 가자👊🏻
class Human {
}
const kim = new Human();
console.log(kim)
// Human {}
class Square {
constructor (height, width) {
this.height = height;
this.width = width;
}
sayHi() {
alert(this.name)
}
}
이 구조가 의미하는 바는
데이터 + 그 데이터를 조작하는 코드 = 클래스
class Square {
constructor (height, width) {
this.height = height;
this.width = width;
}
}
클래스 선언과 함수 선언의 차이점: 함수 선언 시 호이스팅(Hoisting)이 일어나지만, 클래스 선언은 그렇지 않음
따라서, 클래스를 사용하여 객체를 만들기 위해서는 미리 클래스 선언을 해둬야 함 👉🏻 그렇지 않으면, ReferenceError 발생
// 이름을 갖지 않는 클래스
let Square = class {
constructor(height, width) {
this.height = height;
this.width = width;
}
};
console.log(Square.name);
// "Square"
// 이름을 갖는 클래스
let Square = class Triangle{
constructor(height, width) {
this.height = height;
this.width = width;
}
};
console.log(Square.name);
// "Triangle"
function makeClass(name) {
// 클래스 선언 및 반환
return class {
sayHi() {
alert("Hello, " + name);
};
};
}
// 새로운 클래스를 만듦
let User = makeClass("Kim");
new User().sayHi(); // Hello, Kim
class Human {
constructor (name, age) {
this.name = name;
this.age = age;
}
}
const kim = new Human('Kim', 15);
console.log(kim)
// Human {name: 'Kim', age: 15}
class Square {
constructor(name) {
this.name = name;
}
sayHi() {
alert(this.name);
}
}
let square = new Square("Nemo");
square.sayHi();
// "Nemo"
class Human {
constructor (name, age) {
this.name = name;
this.age = age;
}
changeName (newName) {
this.name = newName
}
}
const park = new Human()
park.changeName('Park')
console.log(park.name)
// 'Park'
class Human {
constructor (name,age) {
this.name = name;
this.age = age;
}
changeName (newName) {
this.name = newName
}
}
const kim = new Human('Kim', 24);
kim.sayHi = function () {
return 'Hi, ' + this.name
}
console.log(kim.sayHi());
// "Hi, Kim"
class Human {
constructor (name,age) {
this.name = name;
this.age = age;
}
changeName (newName) {
this.name = newName
}
}
const kim = new Human('Kim', 24);
kim.sayHi = function () {
return 'Hi, ' + this.name
}
console.log(kim.sayHi());
const park = new Human('Park', 13)
console.log(park.sayHi());
// TypeError: park.sayHi is not a function
class Human {
constructor (name,age) {
this.name = name;
this.age = age;
}
changeName (newName) {
this.name = newName
}
}
class Kid extends Human {
saySchoolName (schoolName) {
this.schoolName = schoolName
return `저는 ${this.schoolName}에 다녀요.`
}
}
const choi = new Kid()
console.log(choi.saySchoolName('oo 초등학교'))
// "저는 oo 초등학교에 다녀요."
class Human {
constructor (name,age) {
this.name = name;
this.age = age;
}
changeName (newName) {
this.name = newName
}
}
class Kid extends Human {
constructor(name, age, schoolName){
super(name, age); // 부모 클래스의 초기값 가져다 쓰기
this.schoolName = schoolName;
}
saySchoolName () {
return `저는 ${this.schoolName}에 다녀요.`
}
sayNewName (newName) {
super.changeName(newName) // 부모 클래스의 메소드 가져다 쓰기
return `저의 새 이름은 ${this.name}입니다.`
}
}
const choi = new Kid('Choi', 10, 'oo 초등학교')
console.log(choi.saySchoolName())
// "저는 oo 초등학교에 다녀요."
console.log(choi.sayNewName('Choi Kim Park'))
// "저의 새 이름은 Choi Kim Park입니다."