모던 웹을 위한 Javascript jQuery 책을 보면서 정리하는 내용이다.


생성자 함수는 new 키워드로 객체를 생성할 수 있는 함수를 말한다. 


1
2
3
4
5
<script>
    function Student() {
 
    }
</script>
cs


생성한 생성자 함수는 new 키워드로 객체를 생성한다.


1
2
3
4
5
6
7
<script>
    function Student() {
 
    }
 
    var student = new Student();
</script>
cs


생성자 함수는 일반적으로 대문자로 시작한다. 에러가 나는 건 아니지만 규칙으로 생각하고 대문자로 작성한다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>생성자 함수</title>
<script>
 
/*
생성자 함수
*/
 
function Student (name, korean, math, english) {
    this.이름 = name;
    this.국어 = korean;
    this.수학 = math;
    this.영어 = english;
    
    // create method
    this.getSum = function () {
        return this.국어 + this.수학 + this.영어;
    };
    
    this.getAverage = function () {
        return this.getSum() / 3;
    };
    
    this.toString = function (){
        return this.이름 + '  ' + this.getSum() + '  ' + this.getAverage();
    };
}
 
var students = [];
var output = '';
 
students.push(new Student('ㄱㄱㄱ', 100, 90, 80));
students.push(new Student('ㄴㄴㄴ', 90, 90, 80));
students.push(new Student('ㄷㄷㄷ', 80, 90, 80));
students.push(new Student('ㄹㄹㄹ', 70, 90, 80));
students.push(new Student('ㅁㅁㅁ', 60, 90, 80));
 
for (var i in students) {
    output += students[i].toString() + '\n';    
}
 
alert(output);
 
</script>
</head>
<body>
 
</body>
</html>
cs



그냥 함수로 객체를 리턴하는 방법과의 차이???


이전 포스팅과 비교하기 : [문돌이의 IT/JavaScript] - 자바스크립트 객체와 배열


Student 함수는 new로 객체를 생성하기에 생성자 함수이다. 생성자 함수로 만든 student는 객체 또는 인스턴스라고 부른다. 


생성자 함수는 왜 사용할까?


 속성은 모든 객체가 다른 값을 가지지만 메서드는 모두 같은 값을 갖는다. 각 객체를 생성할 때마다 계속 함수를 생성하면 1000개면 1000번을 생성해야 한다. 


 이러한 메모리 남비를 막기 위해 자바스크립트는 프로토타입(prototype)이란 공간이 있다. 

즉, 메서드를 하나만 생성해도 모든 객체가 해당 메서드를 쓸 수 있다. so!!! 생성자 함수로 객체를 만들 때는 생성자 함수 내부에 속성만 넣는다.


 아래와 같이 넣으라는 의미다.

1
2
3
4
5
6
7
8
9
10
/*
생성자 함수
*/
function Student (name, korean, math, english) {
    this.이름 = name;
    this.국어 = korean;
    this.수학 = math;
    this.영어 = english;
}
 
cs


 그리고 메서드는 모두 프로토타입 안에 넣는다. 프로토타입은 우리가 만드는 게 아니라 자바스크립트의 모든 함수는 변수 prototype을 갖는다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
/*
생성자 함수
*/
function Student (name, korean, math, english) {
    this.이름 = name;
    this.국어 = korean;
    this.수학 = math;
    this.영어 = english;
}
 
Student.prototype.getSum = function () {};
Student.prototype.getAverage = function () {};
Student.prototype.toString = function () {};
cs


퇴사 관련 이야기들을 모아 책으로 출판했습니다. 

아래 링크에서 전체 목차를 읽어보세요!

대기업 퇴사 이야기 전체보기 : http://www.bookk.co.kr/book/view/21659



아래 링크로 간단한 후기 링크를 남기면 배송비도 환급된다고 하니 참고해주세요.

http://www.bookk.co.kr/community/postscript

저작자표시 비영리 변경금지

'문돌이의 IT > JavaScript' 카테고리의 다른 글

자바스크립트 내장객체  (0) 2017.10.13
자바스크립트 상속  (0) 2017.10.12
자바스크립트 객체와 배열  (0) 2017.10.10
자바스크립트 객체의 속성추가 및 제거  (0) 2017.10.09
자바스크립트 in / with 키워드  (0) 2017.10.08

+ Recent posts

티스토리툴바