[JavaScript] new 키워드를 사용한 생성자

오늘 배울 포스팅할 내용은 new 키워드를 이용한 생성자 함수 생성입니다.
new 키워드는 생성자 함수를 생성할때 사용하는 키워드 입니다.

예제를 통해 생성하는 법을 배우겠습니다.

예제)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <script>   
    
       function NewConstructor(data)
       {
           this.data = data;
       }
       
       var newConstructor = new NewConstructor(10);                                
       
       alert(newConstructor.data);     
       
   </script>
</body>
</html>
Colored by Color Scripter
cs

생성자는 일반함수와 크게 다르지 않습니다.
하지만 개발자들끼리 구별하기 위해서 생성자 함수를 만들때는 시작을 대문자로 적어줍니다.
만약 일반 함수를 만들었다면 function newConstructor(data){}; 함수명의 시작을 소문자로 했을것입니다. 이렇게 생성자 함수의 뼈대를 만들었다면 new 키워드를 통해 생성자를 생성해야겠죠!!
생성자 함수 생성은 : new 생성자 함수명()
여기선 new NewContrucotr(10); 이 되겠습니다.

출력결과)
=> 10

여기서 약간의 호기심이 있으시다면 new 키워드를 안붙이면 어떻게 될까?
라는 생각을 하실수 있는데요.
예제를 통해 알아봅시다

예제2)

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <script> 
       
       //new 키워드가 없을 경우
       function NewConstructor1(data1)
       {
           this.data1 = data1;
       }       
       var newConstructor1 = NewConstructor1(10);       
       alert(data1);
          
    
       //new 통해 생성자를 생성할 경우 
       function NewConstructor(data)
       {
           this.data = data;
       }       
       var newConstructor = new NewConstructor(10);                         
       alert(data);      
       
   </script>
</body>
</html>
Colored by Color Scripter
cs

출력결과)
=> 10 , 에러

* new 키워드가 없을 경우
alert(data1)을 했을때 10 이 출력됩니다. 어떻게 출력이 가능할까요?
this 키워드를 사용하게 되면 기본적으로 window 객체를 나타나게 됩니다.
new 키워드를 사용하지 않고 일반함수처럼 호출하게 되면 window 객체에 속성을 추가하는 것이 되어버리므로 alert(data1)을 했을때 데이터가 출력됩니다.

* new 통해 생성자를 생성할 경우
alert(data)를 하게 되면 data는 어디 있는지 알수가 없기 때문에 에러가 납니다.
new 키워드로 함수를 호출하게 되면 객체를 위한 공간을 만들고
this 키워드는 객체를 가르키게 됩니다.
new 객체의 변수를 출력하고 싶다면 newConstructor.data를 해야합니다.

저작자표시

'프로그래밍 > JavaScript' 카테고리의 다른 글

[javaScript] 자기호출 익명함수란? (0)	2018.11.16
[JavaScript] 선언적 함수와 익명 함수 호출순서 (0)	2018.11.12

Sw.Dev