IT/Javascript

Javascript - Prototype(프로토타입)

Normal_One 2017. 3. 25. 16:26

 자바스크립트의 프로토타입은 상속을 구현하기 위해 필요한 프로퍼티입니다. 상속은 프로그래밍을 할 때 매우 중요한 개념입니다.
 만약에 우리가 코딩으로 계산기를 만든다고 가정해봅시다. 어떤 계산기든지 간에 기본적으로 더하기, 빼기, 곱하기, 나누기는 포함되어 있을 것입니다. 여기서 계산기를 만들어 달라고 하는 구매자의 의도에 따라 제곱근을 구하는 기능이 추가 된다든가 아니면 로그 값을 구하는 기능이 추가 된다든가 할 것입니다. 그런데, 여기서 기본적으로 사용되는 더하기, 빼기, 곱하기, 나누기 개념을 계산기 하나를 만들때마다 계속 새롭게 만들기에는 너무 번거롭습니다. 따라서, 기본 기능으로 설정해놓고 용도에 따라 기능을 추가하는 것이 여러모로 현명한 방법일 것입니다.
 이를 재활용성이라고 하는데, 상속은 코딩의 재활용성을 높여주는 개념입니다. prototype을 쓰는 방법은 간단합니다. 아래 코딩을 살펴봅시다.


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
<script type="text/javascript"> 
    function calculator() {  
        return {   
            plus : function(num, _num) {//더하기 기능을 하는 클로저    
                    return num = num + _num;   },   
            minus : function(num, _num) {//빼기 기능을 하는 클로저    
                    return num = num - _num;   },   
            multiple : function(num, _num) {//곱하기 기능을 하는 클로저    
                    return num = num * _num;   },   
            division : function(num, _num) {//나누기 기능을 하는 클로저    
                    return num = num / _num;   }  
            } 
        }  
 
    function superCalculator() {  
        this.sqrt = function(num) {   
                    return Math.sqrt(num);  
        } 
    }//제곱근을 구하는 계산기  
 
    function superCalculator2() {  
        this.log = function(num) {   
                    return Math.log10(num);  
        } 
    }//루트를 구하는 계산기  
 
    superCalculator.prototype = new calculator();//프로토타입을 통해 상속 
    superCalculator2.prototype = new calculator();//프로토타입을 통해 상속 
    var cal = new superCalculator(); 
    var cal2 = new superCalculator2(); 
 
</script>
cs

 
  자 이렇게 prototype을 이용해서 제곱근을 계산하는 기능이 들어있는 계산기 cal과 log값을 구하는 계산기 cal2를 만들었습니다. 크롬 개발자 모드로 계산기를 실행해보면




 다음과 같이 잘 실행됨을 알 수 있습니다. 개발자로 고수가 되기 위해선 상속의 개념을 잘 황용해야 합니다. 상속은 코딩하는걸 어렵게 만들기도 하지만, 위에 적은 바와 같이 재활용성을 높여 작성할 코딩의 양을 확 줄여놓기 때문입니다.