FE

SEB_17_프로토타입과_클래스 본문

SEB_FE

SEB_17_프로토타입과_클래스

zizonemoi 2022. 7. 22. 17:50

프로토타입과 클래스 

자세하고 정확한 설명은 https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes

 

Object prototypes - Web 개발 학습하기 | MDN

Javascript에서는 객체를 상속하기 위하여 프로토타입이라는 방식을 사용합니다. 본 문서에서는 프로토타입 체인이 동작하는 방식을 설명하고 이미 존재하는 생성자에 메소드를 추가하기 위해

developer.mozilla.org

javascript는 프로토타입 기반 언어이다

객체를 상속하기 위하여 프로토타입이라는 방식을 사용하는데 약간 비밀스러운 공간이라고 생각하면 된다 

정확히 말하면 상위 객체에 있는 속성을 하위 객체에게 물려준다는 것보다 프로토타입 체인이라는 방식으로 메서드가 있는지 하나씩 찾아가는 과정을 거친다

프로토타입 객체는 __proto__ 속성으로 접근 가능한 내장 객체이다.

this랑은 다르다

비유가 좀 이상할 지 모르겠지만

자바스크립트는 집요하게 독촉하는 사람라고 생각하자.

프로토타입은 집이라고 보면 된다. 자식클래스(인스턴스) 부모클래스는 모두 따로 산다.

자식은 독촉자의 이상한 계약문서에 도장을 찍어서 독촉자는 원하는걸 얻을때까지 이 가문에게 요구한다. 

자식에게 물건이 없으면 부모집에가서 독촉을 한다 근데 부모도 없다? 그럼 그 부모의 부모까지 쭉 올라가면서 원하는걸 찾아낸다.(프로토타입체인) > 없다면 오류뜬다

이러한 원리로 그동안 사용해온 array를 볼 수 있다

array의 부모클래스는 Array다

array.sort() //배열을 정렬해주는 함수

array.length

우리가 array라는 자식에게 직접 저 메서드를 주지 않았지만 자바스크립트라는 독촉자가 우리 대신 부모클래스의 프로토타입을 찾아가준다

그러니까 .length는 부모 프로토타입 어딘가에 있는 메서드라 쓸 수 있는 것이다.

여기서 그러면 인스턴스를 찍기 전에 부모클래스 자체에 속성이나 메서드를 넣으면 안되나? 굳이 프로토타입을 거치는 이유가 뭐지라는 생각이 들 수 있다. 만약 부모클래스에 속성이나 메서드를 준다면 이 클래스로 만든 인스턴스는 이 속성과 메서드를 다 가지게 된다. 만약 내가 array.length만 사용하면 되는데 sort()부터 pop(),push().....이 모든 속성과 메소드를 가진 배열이 되버리는 것이다(불필요한 코드)

그냥 부모 클래스의 프로토타입에 저장해두고 필요한건 자바스크립트가 프로토타입 뒤지면서 찾게 두고 인스턴스는 깔끔한 코드만 가져가면 되는것이다.

부모에 어떤 프로토타입이 있는지는 부모.prototype 하면 되는데 자식이 부모의 프로토타입을 알고 싶을 때에는

자식.__proto__ 하면 된다

위의 예시에서는 

Array.prototype === array.__proto__

열심히 찾는 자바스크립트

'SEB_FE' 카테고리의 다른 글

SEB_19_REST_API  (0) 2022.08.05
SEB_18_프로토타입_체인  (0) 2022.07.25
SEB_16_객체_지향_프로그래밍  (0) 2022.07.22
SEB_15_클래스와_인스턴스  (0) 2022.07.22
Section1_회고  (0) 2022.07.20
Comments