[JavaScript] 프로토타입(Prototype)

반응형




프로토타입(ProtoType)






















- 객체의 기본적인 속성을 정의합니다.




- function() 구문을 통해 만든 클래스라는 객체 정의로부터만 생성 있습니다.



자바스크립트는 포토타입 기반 프로그래밍 언어입니다.







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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
    //프로토타입 객체 => JAVA의 클래스와 같은 개념
    function Person(name, age) {
        this.name = name;
        this.age = age;
 
    }
 
    Person.prototype.walk = function(speed) {
        console.log("%s가 %d의 속도로 걸어가.", this.name, speed);
    }
 
    //객체를 참조하여 함수 추가
    var p1 = new Person('Koo'27);
    var p2 = new Person('Heo'30);
    p1.walk(100);
    p2.walk(80);
</script>
</head>
<body>
</body>
</html>
cs


크롬 개발자도구 콘솔창




- Prototype 프로퍼티는 포로토타입 객체를 이용하여 객체를 생성했을 때,  객체들이 참고할 수 있는 객체의 원형을 참조합니다.


- 프로토타입 객체인 function의 객체를 참조합니다.


- Person.prototype은 프로토 타입 객체인 function Person(name, age)을 참조중이다.


- Person 함수를 이용해 객체를 만들면 (new Person) 모든 객체는 walk라는 특성이 해당 메소드를 참조하는 형태로 인스턴스 생성합니다.

 

- 반면에 Person.walk = function(speed) {...}와 같은 형태로 메소드 추가 시에는 Person을 생성할 때 마다 walk 특성이 포함된 형태로 생성합니다.


- Person 생성때 마다 walk 중복되어 생성됩니다.


728x90
반응형