이 내용은 '생활코딩'에서 공부한 내용을 정리한 글이다.
자세한 내용은 https://www.opentutorials.org/course/743 이곳에서 확인할 수 있다.
모든 내용의 출처는 이곳이다. 다른 언어를 알고있는 상태로 공부한 내용이다.
C++ 이나 자바를 공부한 사람들이라면 많이 봤을 것이다. C++에서 생성자는 클래스에서 생성자와 소멸자를 접하고 new키워드는 동적 할당을 할때 사용함을 알고 있을것이다.
자바스크립트에서 생성자(constructor)는 객체를 만드는 역할을 하는 함수다. 자바스크립트에서 함수는 재사용 가능한 로직의 묶음이 아니라 객체를 만드는 창조자라고 할 수 있다.
*이때까지 배운 자바스크립트에서 함수란 객체이며, 객체를 만들고 '값'임을 잊지말자
객체의 구조를 재활용하기 위해 생성자를 사용한다. 함수를 호출할 때 new을 붙이면 새로운 객체를 만든 후에 이를 리턴한다.
아래의 코드로 어떻게 재활용되고 사용되는지 참고하자.
|
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
53
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script>
//객체란 서로 연관된 변수와 함수를 그룹핑한 그릇이라 할 수 있다.
//객체내의 변수를 프로퍼티, 함수를 메서드라 한다.
//new 를 이해할때, 변수명or객체 = new 함수명();
//좌항안에 우항 함수의 코드값을 복사해온다, 이로 이해
var person = {
'name' : 'Kim',
'intor' : function () {
return 'my name is' + this.name;
}
}
var person2 = {
'name': 'park',
'intor': function () {
return 'my name is' + this.name;
}
}
// 위의 경우 intor 속성의 메서드(함수)가 중복이 된다.!!! 이것이 문제임
//자바스크립트는 함수형 언어임을 기억하자.
//생성자 : 객체를 만드는 역할을 함, 자바스크립트 함수는 객체를 만드는 창조자이다.
function p() { }
var a0 = p();
// 콘솔 실행시 undefined
var a = new p();// new는 객체의 생성자이다.
// 콘솔 실행시 a는 p{}(비어있는 객체)를 가진다. -> 이 맥락에서 생성자라고 한다.
// 생성자는 함수일 뿐이고 이것이 객체를 만든다. 다른언어와 다르게 어디에 소속되어 있지 않다.
function f(name) {
this.name = name;
// 생성자를 통해 이 함수는 객체가 생성될때마다 실행되고 만들어진다.
// 이 함수를 한번만 정의해서 우리는 사용만 하면 된다.
}
var p1 = new f('Hur'); // 여기서 f는 함수가 아니라 생성자이다 인자가 Hur.
var p2 = new f('Ronal');
//생성자를 통해 객체에 대한 초기화(init)를 하는 것이다.
//생성자 f가 만들어놓은 빈 객체 p1은 어떤 프로퍼티 및 메서드를 가지는지를 셋팅해준다.
</script>
</body>
</html>
|
'JavaScript' 카테고리의 다른 글
| [JavaScript]상속 (0) | 2019.05.29 |
|---|---|
| [JavaScript]전역객체 와 this 키워드 (0) | 2019.05.27 |
| [JavaScript] Closure_클로저 (0) | 2019.05.27 |
| [Javascript] 함수의 호출(apply) (0) | 2019.05.27 |
| [JavaScript] arguments 객체 (0) | 2019.05.19 |