오늘 배운 것
1. DOM
-Document Object Modeling
-HTML파일을 js로 알 수 있게 한 것
2. Class
-js에서 객체지향적인 클래스 문법은 es6에서 도입됐다(2015년)
-생성자: js에서 생성자는 constructor로 이름이 고정돼있는듯?
-따로 멤버 변수를 설정하지 않고, 생성자에서 this.~~으로 정의한다(너무 신기)
-Getter와 Setter: C#의 get, set 프로퍼티와 비슷한 것
-get ~~ (){}, set ~~ (){}
-상속: extends 키워드로 상속한다
-super 키워드로 부모 클래스에 접근할 수 있다
-static 키워드
3. 클로저
-이게 좀 어려웠다
- A closure is the combination of a function and the lexical environment within which that function was declared (클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합니다.) - MDN
function foo() {
const x = 1;
const y = 2;
// 클로저의 예
// 중첩 함수 bar는 외부 함수보다 더 오래 유지되며
// 상위 스코프의 식별자를 참조한다.
function bar() {
debugger;
console.log(x);
}
return bar;
}
const bar = foo();
bar();
요컨대, 내부에 있는 중첩 함수가 외부의 함수보다 더 오래 살아남으면서 외부 함수의 변수를 참조하는 경우 클로저라고 할 수 있다.
-사실 클래스로 구현하면 더 편하지 않나 싶긴 한데, 아무튼 js에서는 유용하게 사용된다고 한다
-상태를 안전하게 변경하고 유지하기 위해 사용한다.
예)
// 카운트 상태 변경 함수 #3
const increase = (function () {
// 카운트 상태 변수
let num = 0;
// 클로저
return function () {
return ++num;
};
})();
// 이전 상태값을 유지
console.log(increase()); //1
console.log(increase()); //2
console.log(increase()); //3
숙제도 있는데, 아직 못했다...
내일 마저 해야겠다.