이번에는 객체지향문법에 대해 알아보자. 실용적인 용도로 사용가능한!
어떠한 정보를 오브젝트 형식에 담을때 위 사진처럼 정리를 해준다. 하지만 내용이 비슷한 오브젝트를 여러개 만들면 코드가 복잡해지고 지저분해진다. 비슷한 오브젝트를 많이 만들일이 있다면 class를 만들어서 사용하자. class는 object를 뽑는 기계일뿐 그 이상 그 이하도 아니다.
이렇게 정리를 하면 단순한 함수가 아닌 this 라는것이 존재하면 this가 class역할을 대신해줄수 있다. this나 class나 같은것이다. 예전 문법에는 class가 없어서 this를 사용했다.
this는 해당 함수에서 새로 생성되는 object들을 의미한다.instance라고 부른다.
그렇다면 this.q 는 무엇일까? this는 새로 생성되는 object 라고 했다. 즉 새로 생성된 object에 q키에는 'consume'을 넣어달라는 뜻이다.
이렇게 하면 object생성이 한줄로 가능하다. 실제 값이 들어가있는걸 알수있다.
하지만 이렇게 하면 같은값이 들어갈것이다.변수값을 받아서 원하는 값을 넣어주자.
위 내용을 ES6 class문법을 사용해서 위처럼 작성할수 있다. js에서는 이런 기능을 상속기능이라고 한다.
class와 비슷한 prototype 도 알아보자. prototype사용해서도 자식 objcet에게 데이터를 물려줄수 있다.
prototype 은 위처럼 원형을 의미한다고 적혀있는데 간단하게 유전자 라고 이해해보자.
이런식으로 kim을 추가해본다. 위 문법은 object에 자료를 추가하는 문법인데 prototype 도 object자료임으로 추가 및 수정이 가능한데 위처럼 추가했을때 기계라는 함수의 유전자에 값을 추가해 놓으면 기계라는 함수로 부터 생성된 요소 즉 자식들은 전부다 사용이 가능하다.
직접 오브젝트에 부여하지 않았어도 유전자 즉 prototype에 기록 되어 있으면 사용할수 있다.prototype 이 상속구현을 하는 2번째 장치이다.
prototype을 사용하는데 부모 요소 즉 부모 유전자에 있는걸 자식이 사용 가능한 이유는 뭘까?
그 이유는 js는 위와 같은 원리로 동작하기 때문이다.위처럼 자식요소에 없으면 부모요소도 찾아서 있다면 출력해준다.그마저도 없다면 그 부모요소의 부모 요소까지 찾는다. 즉 부모요소가 있으면 계속 올라가면서 찾는것이다. prototype chain이라고 한다. 그런 동작이 있기 때문에 부모요소에 기록을 해 놓아도 자식요소가 사용 가능한것이다.
이런 array형태 에서 sort() / length() 등을 사용할수 있는 이유는 Array라는 요소에 기록되어있어서 사용이 가능할 것이다.
실제로 요소를 확인하면 정의가 다 되어있다. 그렇기 때문에 내가 자주 사용할만한 기능의 함수를 두번째 사진처럼 Array.prototype에 넣어서 사용할수도 있다.
