-
[Javascript] Object_프로토타입 1To infinity/Javascript 이론 2021. 7. 8. 11:55
자바스크립트는 프로토타입 기반의 객체지향 프로그래밍 언어이다.
객체지향 프로그래밍?
- 객체의 집합으로 프로그램을 표현하려는 패러다임.
- 속성을 통해 실체를 인식
- 여러 속성 중 필요한 속성만 추려내는 것 -> 추상화
- 객체: 속성을 통해 여러개의 값을 하나의 단위로 구성한 복합적 자료구조
상태데이터와 동작을 하나의 논리 단위로 묶은 복합적 자료구조
(속성(프로퍼티); 상태를 나타내는 데이터, 정적 / 동작(메서드); 상태 데이터를 조작, 동적)
예를들어, 원의 반지름은 '상태'이고 해당 반지름으로 원의 넓이, 부피, 둘레 등을 구하는 것은 '동작'이다.
=> 객체는 프로퍼티와 메서드로 이뤄져있다.
상속과 프로토타입
function Circle(radius) { this.radius = radius; this.getArea = function () { return Math.PI * this.radius ** 2; }; }
생성자 함수는 동일한 프로퍼티 구조를 갖는 객체를 여러개 만드는데 유용하다.
위에서 보면, radius는 변할 수 있지만, getArea는 값을 구하기 위한 공식이기 때문에 모든 인스턴스에 동일하게 적용된다.
하지만 Circle 인스턴스를 만들면 getArea가 각 인스턴스마다 생성되기 때문에 불필요한 중복이 발생하게 된다.
그래서~
Circle 함수 안에 getArea함수를 prototype으로 바인딩 시켜서 직접 복사해오지 않아도 이용할 수 있도록 만드는거다.
음.
공인인증서를 내 지갑이라는 곳에서 컴퓨터, 핸드폰에 각각 복사해서 사용하는게 아니라 내 지갑에 접근할수만 있다면 굳이 복사해오지 않아도 공인인증서를 사용할 수 있는 것이다. 공유폴더 느낌?
=> 상위 프로퍼티 기능을 중복사용할 것 같다면 prototype으로 넣자!
프로토타입 객체
객체 간 상속의 구현을 위해 사용된다.
프로토타입은 어떤 객체의 상위객체 역할을 하는 객체로서 다른 객체에 공유 프로퍼티(메서드 포함)를 제공한다.
아, 프로토타입이란 어떤 객체의 상위객체라고 생각하면 될 듯.
모든 객체는 하나의 프로토타입을 갖고, 모든 프로토타입은 생성자 함수와 연결되어 있다.
1) __proto__ 접근자 프로퍼티
- 모든 객체는 __proto__ 접근자 프로퍼티를 통해 자신의 프로토타입, 즉 [[prototype]] 내부슬롯에 간접적으로 접근할 수 있다.
- 프로토타입 체인은 단방향 링크드리스트로 이뤄져야 하기에 순환참조하는 프로토타입 체인의 생성을 막기위해 직접 프로토타입에 접근하지 못하고 __proto__를 통해 간접적으로 접근하도록 만들었다.
- 접근자 프로퍼티는 Object.prototype의 프로퍼티로 모든 객체는 상속을 통해 접근자 프로퍼티를 사용한다.
- __proto__ 는 접근자 프로퍼티이므로 자체적으로 값을 갖지 않고 접근자 함수 (get, set) 프로퍼티 어트리뷰트로 구성된 프로퍼티다.
- 직접 상속을 통해 Object.prototype을 상속받지 않는 객체를 생성할 수도 있으므로
프로토타입의 참조를 취득하고 싶다면 Object.getPrototypeof 메서드를 사용히고
프로토타입을 교체하고 싶다면 Object.setPrototypeof 메서드를 사용하자.
2) 함수 객체의 prototype 프로퍼티
- 생성자함수로 만들 때 생성할 객체(인스턴스)의 프로토타입
=> __proto__와 prototype 프로퍼티는 동일한 프로토타입을 가리킨다.
3) 프로토타입의 constructor 프로퍼티와 생성자함수
4) 리터럴 표기법에 의해 생성된 객체의 생성자 함수와 프로토타입
모든 프로토타입은 constructor를 갖는다.
자신을 참조하고 있는 생성자함수를 가리킨다.
결국 리터럴 표기법으로 생성한 객체도 constructor 프로퍼티를 통해 생정자 함수와 연결된다.
즉, 모든 객체는 생성자 함수와 연결되어 있다.
프로토타입과 생성자 함수는 단독으로 존재할 수 없고 언제나 쌍으로 존재한다.
'To infinity > Javascript 이론' 카테고리의 다른 글
[Javascript] 변수 let, const (0) 2024.01.14 [Javascript 이론] Object_함수는 일급객체, 함수 고유의 프로퍼티는? (0) 2021.07.08 [Javascript 이론] Object 프로퍼티 열거 시 특징 (for...in문) (0) 2021.07.08 [Javascript 이론] 객체의 프로퍼티 키, 값 불러오는 법 (0) 2021.07.08 [Javascript 이론] Map (feat. object) (0) 2021.07.04