JS 프로토타입과 클래스 - 객체 생성자

객체 생성자

객체란? 서로 연관된 변수와 함수를 그룹핑하고 이름을 붙인 것 

 

자바스크립트는 prototype 기반의 언어

Java와 C++은 클래스 기반의 객체지향 언어이지만  JS는 prototype 기반의 객체지향 언어

Class 기반의 객체지향 언어는 class를 통해 객체 생성

But, prototype 기반의 객체지향 언어인 자바스크립트는 class 정의 없이도 객체를 생성할 수 있다

생성자함수가 class를 대신함

(+ES6부터 Class 추가)

 

캡슐화와 상속 지원

객체지향 프로그래밍에서 중요한 특징 중 하나는 캡슐화 & 상속

자바스크립트는 Class가 없어도 클로저를 통해 캡슐화가 가능하고, prototype을 통해 상속이 가능

 

프로퍼티와 값의 모임

객체 { } 안에서 프로퍼티와 값을 쌍으로 하는 집합의 모임

 

객체를 생성하기 위해서는 먼저 자바스크립트 엔진에 내장된 객체 생성자 함수를 통해 먼저 선언을 해야 한다.

객체 생성자 함수 선언은 function을 사용 function 함수명(매개변수){} *객체생성자(constructor) 만들때 함수이름은 대문자

함수 정의문에는 1개의 속성과 1개의 함수가 등록되어 있음. 속성은 this.name = 속성값; 형태로 사용되며 함수는 this.say= function(){코드} 형태로 사용

둘 다 this 키워드를 통해 등록하는 걸 확인 할 수 있다

 

객체생성자 constructor를 사용하면 좋은점 : 

객체 재정의 하지않고 constructor 덕분에 새로운 객체 양산 된다

 

*객체생성자를 사용해서 객체만들땐 new라는 키워드 사용

const 변수명 = new Person(인자정보);

함수의 인자로 name, first, second, third받기 

 

여기서 this.say는 똑같은 함수인데

부를때마다 선언된다. 여기선 두번 사용됨!

이럴때 say함수를 밖으로 꺼내서 재사용할 수 있다.

 

프로토타입을 사용 - 코드의 재사용성 높임

 

프로토타입 사용 풀이:

Animal.prototype.say = function(){

  console.log(this.sound);

}

는 

function say(){

  console.log(this.sound);

}

kor.say = say;

eng.say = say;

과 같다.

 

즉 프로토타입이란 모든 Person에게 공통된 함수를 가지고 있게하자! 랑 같은말

 

+또다른예시

프로토타입이란 ? 

  같은 객체 생성자 함수를 사용하는 경우, 특정 함수 또는 값을 재사용 할 수 있는데 바로 그게 프로토타입

  객체 생성자 함수 아래에 .prototype.[원하는키] = 코드를 입력하여 설정 할 수 있다.

 

객체 생성자 상속받는법