[javascript] 7. 자바스크립트 생성자 함수와 프로토타입

javascript] 7. 자바스크립트 생성자 함수와 프로토타입(Prototype)

* 목차 *

1. 생성자 란?

2. 생성자의 필요성?

3. 생성자의 형태

4. 생성자의 사용법

5. 생성자 함수에서 사용되는 함수 정의

6. Prototype 이란?

7. Prototype을 이용한 객체 상속

1. 생성자 함수 란?

  - "객체"를 생성할 때 사용하는 함수 입니다.

  - C++의 클래스의 Class 라고 보시면 됩니다.

2. 생성자 함수의 필요성?

  - 여러개의 동일한 프로퍼티를 가지는 객체를 생성하기 위해서 필요합니다. 

  - Prototype을 이용하여 메모리 절감을 위해서도 필요 합니다.

3. 생성자 함수의 형태

  - 생성자 명 : 대문자로 시작 (일반 함수와 구별을 하기 위한 관례 입니다)

  - 내부의 식별자 선언(var 식별자) 없음

  - 내부의 메소스 선언(var 식별자 = function (){}) 없음

  - "this.프로퍼티"를 통해서 프로퍼티 명시만 가능

function <생성자 명>() {

this.프로퍼티

}

4. 생성자 함수 의 사용법

  1) new 키워드를 통하영 생성자 함수를 호출 합니다.

var 생성자 = new 생성자명();

  2)생성자 함수 생성 과정 분석

    (1) new 키워드는 빈 객체 {}를 생성 합니다. 

    (2) 생성자 함수는 빈 객체에 생성 할 프로퍼티를 정의 합니다.

    (3) 함수의 인수들을 프로퍼티에 할당 합니다.

    (4) 생성된 Student 객체를 student에 할당 합니다.

5. 생성자 함수에서 사용되는 함수 정의

  - 객체에는 프로퍼티를 활용 하기 위한 함수를 정의 할 수 있다고 이전 포트스트에서 말씀 드렸습니다.

  - 정의 방법은 2가지가 있습니다. 

  1) 생성자 내부에 함수 정의 

function Student(_name, _math, _eng) {

this.name = _name,

this.math = _math,

this.eng = _eng,

this.score = function allinfo() {

return "Student name :" +

this.name + "score math : " + this.math + "eng : " + this.eng;

}

}

    - 출력 결과 : Student name :영수score math : 93eng : 11

  2) Prototype을 사용한 함수 정의

function Student(_name, _math, _eng) {

this.name = _name,

this.math = _math,

this.eng = _eng

}

Student.prototype.score = function allinfo() {

return "Student name :" + this.name +

"score math : " + this.math + "eng : " + this.eng;

}

    - 출력 결과 : Student name :영수score math : 93eng : 11

6. Prototype 이란?

  1) 나온 배경

    - 일반적으로 객체를 만들어서 해당 객체를 복사하여 사용하게 되면 , 객체에 들어있는 프로퍼티와 함수가 복사한 객체 개수 많큰 생성이 됩니다. 그러나 이는 매우 비효율 적입니다. 왜냐하면 객체에 들어있는 함수는 모두 동일 할테니 구지 여러개를 생성하여 메모리를 잡아 먹을 필요가 없습니다. 그래서 이를 해결 하기 위해 나온 것이 프로토타입(Prototype) 입니다.

  2)  Prototype의 정의

    - 생성자 함수로 생성한 객체들이 프로퍼티와 메서드를 공유하기 위해 사용하는 객체 입니다.

    - 함수만 갖고 있는 프로퍼티 입니다. 

      자바스크립트는 모든 것이 객체임으로 함수도 프로퍼티를 가질수 있습니다.

    - Prototype은 사용자가 만들어 주는 것이 아니고 javascript에서 자동으로 만들어 줍니다.

  2) 구조

    - 동일한 생성자 함수로 생성된 객체들은 내부적으로 __proto__ 프로퍼티를 사용하여 생성자 함수에 존재하는 Prototype라는 프로퍼티를 참조하여 같은 공간을 공유 하고 있습니다.

7. Prototype을 이용한 객체 상속

  - 생성자함수의 Prototype에 객체를 생성 함으로써 객체를 상속 할수 있다.

  1) 예제 코드

    - 증조 할아버지의 눈

    - 할아버지의 키

    - 아버지의 잘생김을 나는  모두 상속받아 모두 사용 할 수 있다.

// 증조 할아버지

function great_grandfather() {

this.eyes = "파란눈";

}

// 할아버지

function grandfather() {

this.height = "장신";

}

grandfather.prototype = new great_grandfather();

// 아빠

function father() {

this.face = "잘생김";

}

father.prototype = new grandfather();

// 나

function me() {

this.age = "18";

}

me.prototype = new father();

// 내가 태어났다.

var iam = new me();

// 나는 증조 할아버지의 자식인가??

if (me.prototype.isPrototypeOf(great_grandfather)){

// 나는 모든 것을 물려 받았다.

console.log(iam.eyes);

console.log(iam.height);

console.log(iam.face);

console.log(iam.age);

}

console.dir(iam);

  2) 객체의 상속 관계

<연관된 글>

- [javascript] 1. 자바스크립트 기초 (기본 구조)

- [javascript] 2. 자바스크립트 함수란?

- [javascript] 3. 자바스크립트 내장 함수

- [javascript] 4. 자바스크립트 실행 순서

- [javascript] 5. 자바스크립트 객체 란?

- [javascript] 6. 자바스크립트 값 복사와 참조 복사

- [javascript] 7. 자바스크립트 생성자 함수와 프로토타입(Prototype)