본문 바로가기
개인공부/반딧불

객체지향프로그래밍

by 뭉지야 2023. 1. 16.
728x90

# 객체지향프로그래밍

  • 하나의 모델이 되는 청사진을 만들고, 그 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴이다.
  • 캡슐화(은닉화), 추상화, 상속(가장중요), 다형성

# 프로토타입 체인: 자바스크립트에서 상속을 구현할때 사용.(extends, super사용)

 

#extends Bee

constructor()

super()

이렇게 하면 Bee꺼를 다 상속받는 다는 의미이다!

 

class Car{
construction(brand, name, color){
this.brand = brand;
this.name = name;
this.color = color;

drive(){
console.log(this.name + '가 운전을 시작합니다');
}
}
let avante = new Car('hyundai', 'avante', 'black');

avante.drive();   // 'avante가 운전을 시작합니다'

class Grub {
constructor(){
this.age = 0;
this.color = 'pink';
this.food = 'jelly';
}
eat()
{return `Mmmmmmmm jelly`}
}
module.exports = Grub;

 

const Grub = require('./Grub');

class Bee extends Grub{        //Grub을 상속받는다는의미다
constructor(){
super();
this.age = 5;
this.color = 'yellow';
this.job = `Keep on growing`;
}
}
module.exports = Bee;
const Bee = requre('./Bee');

class HoneyMakerBee extends Bee{
constructor(){
super();
this.age = 10;
this.job = 'make honey';
this.honeyPot = 0;
}
makeHoney(){
this.honeyPot++;
}
giveHoney(){
this.honeyPot--;
}
}
module.exports = HoneyMakerBee;
const Bee = require('./Bee');

class ForagerBee extends Bee{
constructor(){
super()
this.age = 10
this.job = `find pollen`
this.canFly = true
this.treasureChest = []
}
forage(treasure){
this.treasureChest.push(treasure);
}
}

module.exports = ForagerBee;

종합퀴즈

#생성자함수

-인스턴스 객체를 생성하고 초기화하는 메서드이다.

-생성자 함수를 작성하지 않으면 기본생성자가 제공된다.

-부모클래스가 있고, 자식 클래스가 생성자 함수를 작성하지 않았다면 부모 생성자를 따른다.

-클래스내에서 생성자 함수는 하나만 있을수 있다.

 

#human의 부모는 object이다. human은 최상위클래스가 아니다.

 

#mincoding은 student의 인스턴스이다.

student 클래스가 human 클래스를 상속받으니까 mincoding도 human꺼를 쓸수있다.

그러므로 human의 프로토타입에 있는 sleep을 사용할수있다.

 

#javascript는 프로토타입 기반 언어이며, Dom도 프로토타입으로 상속을 구현하였습니다.

 

#div가 addEventListener 메서드를 사용할수 있는 이유는 EventTarget을 상속하고 있기 때문이다.

#eventTarget의 prototype에 addEventListener메서드가 있다 (eventTarget 자식으로 addEventListener가 있다)

div는 HTMLdivelement의 인스턴스이고 eventtarget을 상속받았기때문에 addeventlistener를 사용할수있다.

 

#보통 클래스의 인스턴스는 new키워드로 생성하지만, DOM에서는 new키워드가 아닌 createElement를 사용한다.

 

 

 

 

 

728x90

'개인공부 > 반딧불' 카테고리의 다른 글

[react] twittler-state-props 의사코드  (0) 2023.01.27