반응형
개요
자바스크립트는 프로토타입 기반 객체지향 프로그래밍 언어이다.
- 객체지향 프로그래밍 언어는 class 기반과 prototype 기반이 있다.
- class 기반 : C++ / Java / C# / Python
- prototype 기반 : JavaScript / Lua / R / Perl
- JavaScript는 Prototype 기반 언어으로, 과거 class가 없었으나 ES6부터 Prototype 문법을 이용하여 class 문법이 추가 되었다.
const a = [1, 2, 3];
console.log(a);
콘솔을 확인해 보면 프로토타입을 확인할 수 있다.
자바스크립트의 모든 객체들의 조상은 “Object” 객체이다.
- 자바스크립트는 기본적으로 원시타입을 제외한 모든 타입은 객체
- 함수, 객체, 배열 모두 객체
- 최상위 객체이며, 객체 생성시 기본적으로 Object를 상속한다.
자바스크립트에서도 Class 사용 가능하다.
실제로는 프로토타입 기반을 편하게 사용하기 위해 class라는 명칭이 붙은 상태
예제
1. 클래스 생성
클래스를 생성하고 생성자에 내 이름을 저장 후 내 이름을 출력해 보기
코드
<!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>
class Human {
constructor(name) {
this.name = name;
}
myname() {
console.log(`내 이름은 ${this.name}`);
}
}
const p1 = new Human("김똥끼");
p1.myname();
const p2 = new Human("황똥깡");
p2.myname();
const p3 = new Human("베리굳");
p3.myname();
</script>
</body>
</html>
출력
2. 클래스 상속(super 활용)
super 활용 시 두가지 특징이 있다.
- 부모 클래스에 정의된 메서드에 접근이 가능
- 부모 생성자를 호출 할때 사용
실습
1. student 클래스 생성
생성자로 이름, 나이, 자기소개가 들어갈 수 있게 만든 뒤 introduce 메서드 호출 시 이름, 나이, 자기소개를 console.log로 출력하기
코드
<!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>
class Student {
constructor(name, age, myself) {
this.name = name;
this.age = age;
this.myself = myself;
}
introduce() {
console.log(this.name);
console.log(this.age);
console.log(this.myself);
}
}
const student = new Student("전똥끼", 30, "안녕하세요우!");
student.introduce();
</script>
</body>
</html>
출력
2. Hero 클래스 만들기
batman 인스턴스를 만들어 showHP(), run(), showHP() 메서드 호출하기
HP의 초기값은 100, run() 호출 시 HP 10 감소, showHP() 메서드 호출 시 HP 값 출력
코드
<!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>
class Hero {
constructor() {
this.hp = 100;
}
showHP() {
console.log(this.hp);
}
run() {
this.hp -= 10;
}
}
const batman = new Hero();
batman.showHP();
batman.run();
batman.run();
batman.showHP();
</script>
</body>
</html>
출력
3. 계산기 클래스 만들기
- 기본 값 = num 입력하기
- add(num) 메서드 : num 만큼 더하기
- mult(num) 메서드 : num 만큼 곱하기
- sub(num) 메서드 : num 만큼 빼기
- divide(num) 메서드 : num 만큼 나누기
- getResult(num) 메서드 : 값 출력하기
코드
<!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>
class Calc {
constructor(num) {
this.num = num;
}
add(num) {
this.num += num;
}
mult(num) {
this.num *= num;
}
sub(num) {
this.num -= num;
}
divide(num) {
this.num /= num;
}
getResult() {
console.log(this.num);
}
}
const calc = new Calc(50);
calc.add(5)
calc.mult(2)
calc.sub(3)
calc.divide(2)
console.log(calc.getResult());
</script>
</body>
</html>
출력
4. 클래스 상속하기
코드
<!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>
class Hero {
constructor(hp) {
this.hp = hp;
}
walk() {
console.log("조금 빠르게 걷기");
}
run() {
this.hp -= 10;
}
}
class SuperMan extends Hero{
constructor(hp, mp) {
super(hp)
this.hp = hp;
this.mp = mp;
}
walk() {
super.walk();
console.log("완전 빠르게 걷기");
}
fly() {
console.log("fly");
console.log(this.hp);
}
}
let superman = new SuperMan(100, 100);
superman.run();
superman.fly();
</script>
</body>
</html>
출력
728x90
반응형
'웹(WEB) > 자바스크립트(JS)' 카테고리의 다른 글
| 자바스크립트 map, filter, reduce (0) | 2024.08.06 |
|---|---|
| 자바스크립트 Array의 순회 메서드 (0) | 2024.08.06 |
| 자바스크립트 Spread, Rest (0) | 2024.08.05 |
| 자바스크립트 백틱 `` (0) | 2024.08.05 |
| 자바스크립트 긍정/부정의 의미 (0) | 2024.08.05 |