이 내용은 '생활코딩'에서 공부한 내용을 정리한 글이다.
자세한 내용은 https://www.opentutorials.org/course/743 이곳에서 확인할 수 있다.
모든 내용의 출처는 이곳이다. 다른 언어를 알고있는 상태로 공부한 내용이다.
C++에서 포인터를 배우고 클래스를 배우게 된다. 자바스크립트에서 클로저를 알아보고 이후에 알아보는 이 프로토타입을 배우는것은 C++을 배우는 커리큘럼과 비슷하다고 생각하면 좋다.
그만큼, 클로저와 프로토타입이 중요한 내용이라고 생각하면 좋을 것 같다.
참고 및 출처 : http://insanehong.kr/post/javascript-prototype/ http://www.nextree.co.kr/p7323/
위 링크에서 더 자세하게 프로토타입에 대해 알 수 있다.
function Person(){}
var joon = new Person();
var jisoo = new Person();
이같이 person함수 prototype 속성은 프로토타입 객체를 참조한다. 이 person함수의 prototype 속성이 참조하는 프로토타입 객체는 new라는 연산자와 person함수를 통해 생성된 모든 객체의 원형이 되는 객체이다.
JavaScript에서는 기본 데이터 타입인 boolean, number, string, 그리고 특별한 값인 null, undefined 빼고는 모두 객체, 이 객체안에는 proto(비표준) 속성이 있다.
이 속성은 객체가 만들어지기 위해 사용된 원형인 프로토타입 객체를 숨은 링크로 참조하는 역할을 한다.
var joon = new Person();
var jisoo = new Person();
Person.prototype.getType = function (){
return "인간";
};
console.log(joon.getType());
console.log(jisoo.getType());
prototype 속성을 이용하여 맴버를 추가하여 프로토타입 객체에 getType()이라는 함수를 추가하면 맴버를 추가하기 전에 생성된 객체에서도 추가된 맴버를 사용가능하다.
같은 프로토타입을 이용하여 생성된 두 객체는 getType()을 사용, 객체를 변경하려면 prototype 속성을 사용해서 접근한다.
결론 : 프로토타입 객체는 새로운 객체가 생성되기 위한 원형이 되는 객체, 같은 원형으로 생성된 객체가 공통으로 참조하는 공간!!
프로토타입이란 : 함수의 멤버인 prototype 속성은 프로토타입 객체를 참조하는 속성 그리고 함수와 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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script>
//--------------Prototype---------------------
//프로토타입 안에는 객체가 들어가있다.
function parent() { }
parent.prototype.parentp = true;
//3. parent의 prototype값은 parentp라는 값을 true로 가진다.
function child() { }
child.prototype = new parent();
//2. child생성자에 prototype객체는 parent생성자에 의해 만들어진 객체가 들어간다.
function baby() { }
var s = new child();
baby.prototype = new child();
//1. child생성자가 만든 객체가 new child()안에 들어감.
var o = new baby();
//생성자는 기본적으로 함수이다. new로 인해 함수가 생성자라는 함수가된다.
//그 결과는 객체를 만들어서 객체를 반환함 -> o라는 변수는 생성자를 통해 만들어진 객체를 저장
document.write(o.parentp);
//parent -> child -> baby의 상속구조,
//o(baby)의 생성자는 parentp가 없지만 상속으로 인해 사용가능.
//prototype chain이라 한다.
//생성자가 만들어지면 생성자 값을 찾기위해 생성자와 prototype으로 상속된것이 있는지 다 확인한다.
</script>
</body>
</html>
|
'JavaScript' 카테고리의 다른 글
| [JavaScript]Object 객체 (0) | 2019.06.02 |
|---|---|
| [JavaScript]표준 내장 객체 (0) | 2019.05.29 |
| [JavaScript]상속 (0) | 2019.05.29 |
| [JavaScript]전역객체 와 this 키워드 (0) | 2019.05.27 |
| [JavaScript]생성자와 new (0) | 2019.05.27 |