📌Class란?
클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다.
🔎 객체
🔎 closure
📝Class
말로 풀면 어렵지만 수업에 예시로 class는 붕어빵기계이고 객체는 붕어빵이라고 했다
사용예제
//constructor method는 최초 1회만 실행됨.(n회? x)
//초기값 설정
class Animal {
constructor(name) {
this.name = name;
this.stomach = [];
this.legs = 4;
this.tail = true;
}
//한라산호랑이.eat
//먹은 음식 확인가능.
get eat() {
return this.stomach;
}
//한라산호랑이.eat = "음식"
set eat(food) {
this.prey = food;
this.stomach.push(food);
}
}
//Animal에 클래스를 Tiget가 상속 받아서 사용하겠다.
class Tiger extends Animal {
constructor(name) {
super(name); //Animal의 constructor를 실행시키겠다.
this.pattern = '호랑이무늬';
//부모인 Animal객체 constructor 추가
}
static options = {
version: '0.0.1',
compay: 'like-lion',
ceo: '---',
};
//언제든지 불러와서 쓸 수 있음.
static bark() {
return '어흥';
}
//한라산호랑이.hunt('음식')
hunt(target) {
return `${target}에 조심히 접근한다.`;
}
}
//class를 이용해 객체 생성
const 한라산호랑이 = new Tiger('한돌이');
- extends는 클래스의 자식 클래스를 생성할때 사용한다.
- super()은 부모 생성자를 호출한다.
- static : 클래스의 인스턴스를 생성하지 않고 바로 사용할 수 있습니다.
위에 예제에 나온 문법들만 적었지만 이것보다 훨씬 많을테니 더 공부해야할거같다,,
조금 더 쉽게 경남씨가 class가 뭔지 알려주었다
class 김치볶음밥레시피 { //김치볶음밥 레시피 =>class
constructor(김치,밥,햄){
this.김치 = 김치; //=> class의 멤버 변수
this.밥 = 밥;
this.햄 = 햄;
}
}
//김치볶음밥 완성 =>인스턴스화
const 김치 볶음밥 = 김치볶음밥레시피();- class : 김치볶음밥레시피
- class의 멤버 변수 : 김치볶음밥 재료
- 인스턴스화 : 김치볶음밥 완성
그럼 class는 여기까지 입니다,,
📝closure
JavaScript의 매우 강력한 특성으로 독립적인 변수를 참조하는 함수를 말합니다.
즉, 클로저에 정의된 함수는 그것이 작성된 환경을 '기억'합니다.
간단한 코드예제를 보면
function first() {
let x = 10; //자유변수
function second() { //중첩변수 \
let y = 20; | //closure
return x + y; |
} /
return second; //point
}
const result = first();표시 되어 있는 부분이 closure입니다.
만약 안에 있는 second라는 함수를 사용하고 싶다면 first라는 함수 스코프에 갇혀있어 사용하지 못합니다. 만약 안에있는 저 second라는 함수를 사용하고 싶으면 closure를 사용할수있습니다.
먼저 closure를 만들때 조건이 있는데요,
closure 즉 저 중첩변수는 자유함수를 참고 하고 있어야함 합니다.
그 이유는 함수는 한번 실행하고 값을 반환하면 종료되기때문에 가비지 컬렉터가 수집해갑니다.
👉 가비지컬렉터를 들었을때 월e가 떠오른다고 범쌤이 그러셔서,,생각나서,,사진첨부..
쨋든 그렇기 때문에 중첩변수는 꼭 자유 변수를 참조해야합니다.
그리고 여기서 가장 중요한 포인트는 위에 코드 예제에 point라는 주석은 만약 이 함수를 실행시켜 리턴했다면 이건 그냥 일반 함수와 동일해집니다. 함수실행 값을 반환하기 때문입니다.
이 중첩합수를 사용하고 싶다면 꼭 실행이 아닌 함수본문을 리턴시켜 사용할 수 있어야합니다.
그리고 또 다른 closure 예제가 있는데요
function counter() {
let count = 0;
function inner() {
console.log(++count);
}
return inner;
}
const c1 = counter();
const c2 = counter();
const c3 = counter();
const c4 = counter();여기서 가장 중요한 포인트는
위에 말씀 드린 '클로저에 정의된 함수는 그것이 작성된 환경을 '기억'합니다.' 입니다.
위에 코드를 보면 아직 배우는 입장에서 본다면 c1이라는 함수를 실행했을때 값이 늘어나는걸 볼 수 있습니다 실행을 4번 했다라는 가정하에 c2를 실행하면 제가보기엔 c1이 실행시킨 값을 이어나갈것 같은데요, ❗❗하지만❗❗ 값은 다시 1을 반환합니다, 그 이유는 c1 c2 c3,,,는 각자 다른 환경을 갖고있기 때문에 실행을 해도 각자의 환경에서 구동하는것입니다.
이처럼 같은 함수를 참조하고 있다고 해도 환경은 다른 환경을 갖고있으니 사용시 주의해야할것같습니다.
오늘은 뭔가 텍스트위주로 작성한거같은데,,이해하면서 적어서 그런가,,정리하기 조금 힘들었습니다,,그럼 20000...
🔗참고 사이트
📍chatGPT
📍Javascript info
📍멋사 수업 내용...
