JS 생성자 함수, prototype 속성

 

 

 

new라는 키워드를 함수 앞에 붙이면 그 함수는 생성자 함수가 되고,

생성자 함수는 함수에 입력된 인자 값들을 가지고 원래의 함수 작업을 동일하게 해내도록 한다.

 

위의 user라는 함수는 첫번째 인자를 받아 이 객체의 firstName이라는 변수에 그 인자 값을 할당하고, 

두번째 인자를 받아 이 객체의 lastName이라는 변수에 그 인자 값을 할당하여 이루어진 객체 데이터를 생성한다.

new 키워드로 생성자 함수가 된 user는 함수의 두 개의 인자 값만 받으면, 

위에서 선언된 user 함수에 따라 자동으로 객체 데이터가 생성되는 것이다.

 

이 때 키는 firstName과 lastName이고,

각각의 키의 값은 Merry와 Jang, Amy와 Chandler, venom과 Pink인 객체 데이터가 user라는 생성자 함수로 생성된 것이다.

 

 

 

 

다만 함수가 생성자 함수인 것을 구분하기 쉽게 하기 위해,

함수의 이름을 첫 글자는 대문자인 파스칼 케이스 표기법으로 작성하도록 합의하여 사용하고 있다.

파스칼 케이스로 작성되는 함수는 클래스라고 부르기도 한다 !

 

 

 

 

 

 

 

생성자 함수를 다시 복습하는 차원에서 다음의 Swiper 생성자 함수를 살펴보면,

생성자 함수의 내부는 알 수 없지만, 인수로 문자 데이터 하나('.notice-line .swiper-container')와 옵션으로 사용할 

객체 데이터 하나({ direction: 'vertical', autoplay: true, loop: true})  즉, 두 개의 인수를 전달받는 것을 볼 수 있다.

 

 

 

 

 

 

Swiper는 인스턴스로 따로 변수에 생성자 함수를 할당하지 않았지만,

인수를 전달하는 것만으로도 Swiper 생성자 함수 그 자체의 이미 만들어져 있는 논리(로직)에 의해 슬라이더를 동작시키는 플러그인이다.

 

 

 

 

 

 

 

 

 

 

user 객체의 prototype 속성에 firstName과 lastName을 반환해주는 getFullName 함수를 할당해주면,

이 함수는 prototype 속성의 특성으로 인해  getFullName 함수를 위한 메모리가 한 번만 만들어지게 된다 !

그래서, 각 인스턴스(const merrymary, amy, venom)의 getFullName을 호출시에 각 인스턴스는

이미 메모리 상에 한 번 만들어져 있는 getFullName 함수를 참조하는 형태가 된다 !

 

 

 

 프로토타입을 좀 더 살펴보기 위해 배열을 콘솔창에서 출력해보니

다음과 같이 그 배열의 자세한 정보를 살펴볼 수 있었다. 

 

배열에는 프로토타입으로 만들어져 있는 concat, filter, map 등과 같은 다양한 (배열) 메서드들이 있고,

 

 

 

 

 

 

배열의 메서드들 외에 그 안의 또 객체의 프로토타입 속성이 존재함을 볼 수 있었다.