[JS]프로토타입

자바스크립트는 명령형, 함수형, 프로토타입 기반의 객체지향 프로그래밍 언어입니다.

대표적인 차이인 클래스 기반의 객체지향 프로그래밍과 다르게 '프로토타입' 기반의 객체지향 프로그래밍이며

자바스크립트를 이루고 있는 모든 것은 거의 객체입니다.

객체지향 프로그래밍이란, 실세계의 실체를 속성을 통해 인식하거나 구별하는 철학적인 사고를 프로그래밍에 접목하였습니다.

특정한 속성을 추상화하여 필요한 속성만을 찾아냅니다.

객체는 상태 와 동작을 논리적인 단위로 묶는 자료구조입니다.

 

객체지향 프로그래밍의 장점이자 특징 중 하나인 상속은 프로퍼티, 또는 메서드를 다른 객체가 받아서 사용할 수 있는 것입니다.

프로토타입 객체를 통해 상속을 구현하며 프로토타입이란, 어떠한 객체의 '부모'(상위) 객체 역할을 하는 객체입니다.

1. 모든 객체는 __proto__ 접근자 프로퍼티를 통해 자신의 부모(상위) 객체에 간접적인 접근이 가능합니다.
=> 직접접근 말고 간접적인 접근을 하는 이유는 상호 참조 방지입니다.

2. 함수 객체만이 가지는 prototype 프로퍼티는 생성자 함수가 생성할 인스턴스의 프로토 타입을 가리킵니다.

 

3. prototype의 constructor 프로퍼티와 생성자 함수 모든 prototype은 constructor을 가지며 constructor

프로퍼티는 prototype 프로퍼티로 자신을 참조하고 있는 생성자 함수를 가리킵니다.

오버라이딩(overriding) 상위 클래스가 가지고 있는 메서드를 하위 클래스가 재정의하여 사용하는 방식입니다.

오버 로딩(overloading) 함수의 이름은 동일하지만 매개변수의 타입 또는 개수가 다른 메서드를 구현하고 매개변수에 의해 메서드를 구별하여 호출하는 방식입니다.

자바스크립트는 오버 로딩을 지원하지 않지만 arguments 객체를 사용하여 구현할 수는 있습니다.

 

---

객체란, 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합이며,

 

목적은 다양한 데이터타입의 자료를 가지고 있기 위함입니다.

 

• 프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 symbol 값
• 프로퍼티 값 : 모든 값

종류)

1)프로퍼티

 

2)메소드

프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라 부른다. 즉, 메소드는 객체에 제한되어 있는 함수를 의미한다.

 

객체 생성 방법은 하단과 같습니다.

 

1.객체 리터럴 (2의 축약)
const obj = {}

const me = {
	name : 'Heobeomsung',
	gender : 'male',
	dream : function (){
		console.log("I want to be rich")
 }
}

2. object 생성자 함수

const person = new Object();
person.name = 'Heobeomsung';
person.gender = 'male';

3. 생성자 함수

1또는 2를 반복해 객체를 무한개 생성하려면..?
같은 값을 가지면서도 매번 서술 해야됨. 그게 불편함

function Person(name, gender) {
  this.name = name;
  this.gender = gender;
  this.dream = function(){
    console.log("I want to be rich");
  };
}

const person1 = new Person('HEOBEOMSUNG,', 'male');
const person2 = new Person('Choi', 'female');

• 생성자 함수 이름은 일반적으로 대문자로 시작한다. 이것은 생성자 함수임을 인식하도록 도움을 준다.
• 프로퍼티 또는 메소드명 앞에 기술한 this는 생성자 함수가 생성할 인스턴스(instance)를 가리킨다.
• this에 연결(바인딩)되어 있는 프로퍼티와 메소드는 public(외부에서 참조 가능)하다.
• 생성자 함수 내에서 선언된 일반 변수는 private(외부에서 참조 불가능)하다. 즉, 생성자 함수 내부에서는 자유롭게 접근이 가능하나 외부에서 접근할 수 없다.

위 코드에서 person1을 출력해보자

 

person1 객체

person1 객체는, 부모로 Person.prototype이라는 객체를 가지고 있으며, Person.prototype.constructor는 Person 생성자 함수입니다. 이를 그림으로 나타내면

 

person1

person1만 생성했을때 위 그림과 같습니다. person2도 생성하면

 

person2

위 그림과 같습니다, 단 생성자 함수와 prototype은 person1과 같이 참조하고 있습니다.

 

이를 통해, 상속을 구현하는 방법은 

 

prototype을 이용한 상속

Person 생성자 함수의 prototype에 money라는 프로퍼티 키와 10000이라는 프로퍼티 값을 할당하니,

person1__proto__로 접근시 money와 constructor(생성자 함수)로 접근할 수 있습니다 이는

 

person2.__proto__

person2도 동일합니다.

 

---

프토토타입은 다른 말로 "부모 객체" 정도로 번역을 하고 싶습니다, 자바스크립트에서는 부모 객체에 프로퍼티로 값을 가지고, 생성자 함수를 통해 생성된 인스턴스들에 상속을 사용합니다.