FASTCAMPUS ST-FE 3기
Part 3. JavaScript Essentials - Ch4. JS 클래스
JS 클래스
01. 생성자함수 (prototype)
1.1 new 생성자 함수
new라는 키워드를 통해 새로운 객체를 생성한다.
이때 만들어진 함수를 생성자 함수라고 한다.
생성자 함수는 일반 함수와 구분하기 위해
파스칼 표기법에 따르는 것이 관습적이다.
변수 oching에 new 생성자함수 user를 할당시켰고,
이를 console창에 찍어보니 하나의 객체가 만들어졌다는 것을 알 수 있다.
💡 리터럴방식
객체 데이터를 만들어낼 때 위에서 본 일련의 과정들을 거쳐야하지만
우리는 {}기호를 사용해 매우 간편하게 객체 데이터를 생성해왔다const oching = {}문자열 데이터를 생성할 때에도 ''기호를 사용한 것 처럼..
이러한 기호를 사용해 데이터를 생성하는 방식을 리터럴 방식이라고 한다.
1.2 .prototype
숨어져 있는 .prototype 속성에 접근해서 참조해 코드의 효율성을 높이는 방식.
위에서 본 new생성자 함수는 매개변수에 인수의 값을 전달받아 재활용했다.
이는 메모리 상으로는 비슷한 구문의 코드를 여러번 실행시키는 꼴이 된다.
.prototype을 활용하면 완벽히 동일한 하나의 로직으로도 재활용시킬 수 있다.
이때 new 생성자 함수를 할당받은 변수 oching, amy, neo등은 인스턴스라 불린다.
그리고 더 많은 여러개의 인스턴스가 존재한다할지라도
해당 객체의 메서드 .getFullName()가 하나의 함수에서
참조해오는 형식이기에 한번의 코드를 실행시키는 형태가 된다.
02. this
일반 함수는 호출 위치에 따라 this를 정의하고
화살표함수는 자신이 만들어진 함수 범위에서 this를 정의한다.
normal 메서드의 경우 일반함수로 명령되었기에 호출된 위치 즉 oching의 객체 전체를 받는다.
하지만 arrow 메서드의 경우 화살표 함수로 명령되었기에 호출위치와 상관없이 함수의 범위가 지정되지않아 undefined가 출력된다.
(위 사진 속 예제는 codepen에서 작성해 undefined 대신 codepen이라고 출력되었음.)
2.1 setTimeout()에서 this
일반함수
setTimeout 함수는 함수안에서 인자로서 사용되는 콜백함수이다.
이러한 콜백함수는 내부로직에서 콜백이 되는 개념이기에 호출 위치가
setTimeout안에서 실행된다.
때문에 .name을 속성으로 갖는 timer 인스턴스를 this로 가져오지못하고
this.name값을 undefined로 출력하게 된다.
(위 사진 속 예제는 codepen에서 작성해 undefined 대신 codepen이라고 출력되었음.)
따라서 이러한 경우의 콜백함수에서의 this는 일반 함수가 아닌,
화살표함수로서 해당 this가 만들어진 객체의 함수범위를 잡을 수 있도록 해야한다
화살표함수
화살표 함수의 setTimeout의 this는 자신을 만든 함수 범위인 timeout에 정의된다.
timeout을 기준으로 this는 자기를 명명한 timer이기에 name메서드에 접근해 oching이라는 값을 출력해주는 것이다.
03. ES6 Classes
생성자 함수를 만들어주는 ES6 신문법 class
자바스크립트는 prototype 기반의 언어인데,
좀 더 안정적인 객체지향적 언어들의 영향을 받아
보다 안정성있고 간결한 class라는 신문법을 도입하게 된다.
💡 막간 tip) 일반 함수선언방식은 축약이 가능하다.
이 형태를 활용한 class 신문법!
1. constructor 매개변수로 인수 받아오는 내부함수.
2..prototype 생략 해도 똑같이 prototype을 받아오는 메서드를 생성할 수 있다.
좀 더 간결하고 추후 react문법 구조와도 연관성이 높으니 잘 익혀두자.
04. 상속 (확장)
클래스로 재활용하는 영역에서 좀 더 추가적인 내용을 주기 위해 확장하는 것.
extends Bicycle 생성자 함수에 Vehicle 생성자 함수에서 만들어둔 내용을 참조하겠다. 여기까지 확장해서 사용하겠다. 라는 의미.
super 는 여기서 extends가 끌고온 확장판인 Vihicle이 실행되는 위치.
