객체지향 프로그래밍을 배우다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 김채원, 장원영, 카리나 객체 3개 생성
/*
let person1 = {
name: "김채원",
age : 22
}
let person2 = {
name: "장원영",
age : 18
}
let person3 = {
name: "카리나",
age : 23
}
*/
/*
Class와 Object를 함께 사용
Class : 각 객체가 가진 정보를 추상화하여 만든 설계도
Object: 클래스로부터 탄생한 개체
*/
// 1. Class 선언
class Person {
// 생성자 -> 클래스로 객체를 생성할 때
// 꼭 가져가야하는 데이터(변수)를 초기화 할 때 사용하는 기능
constructor(name, age){
this.name = name;
this.age = age; // this.변수 = 매개변수
}
// 함수, 클래스가 하는 행위
speak(){
console.log(`제 이름은 ${this.name}입니다.`);
}
}
// 2. 우리가 만든 Class(틀)를 통해서 실존하는 Object(만들어질 것)를 만들어보자.
let person1 = new Person('김채원', 22)
console.log(person1);
person1.speak()
let person2 = new Person('장원영', 18)
console.log(person2);
person2.speak()
let person3 = new Person('카리나', 23)
console.log(person3);
person3.speak()
// 객체 생성 실습!
// GameChar라는 클래스를 하나 생성
// => 이름 (name) 체력 (hp) 마력 (mp)
// => 공격 (attack)이라는 기능 존재
class Character{
constructor(name, hp, mp){
this.name = name;
this.hp = hp;
this.mp = mp
}
attack(){
alert("캡틴 티모 공격~!😜🍄")
}
}
let Teemo = new Character("티모", 30, 70)
console.log(Teemo)
Teemo.attack()
</script>
</body>
</html>Class는 constructor와 함수부분으로 나눌 수 있다. constructor는 반복되는 객체를 하나의 틀로 찍어내고, 변수를 초기화하고 함수는 그 클래스가 할 수 있는 행동이라고 생각하면 된다.
this는 메소드 내의 변수를 지칭? 할 때 쓰인다. 구별해주는 느낌?으로 생각하면 된다.
'Front-End > 5. 프로그래밍 패러다임' 카테고리의 다른 글
| Ex06_map.html (0) | 2023.07.04 |
|---|---|
| Ex05_순수함수html (0) | 2023.07.04 |
| Ex04_객체지향자판기수출.html (0) | 2023.07.04 |
| Ex03_객체지향자판기.html (0) | 2023.07.04 |
| Ex02_절차지향자판기.html (0) | 2023.07.04 |
