javascript prototype

Javascript Prototype

자바스크립트는 프로토타입 기반 언어라고 불린다.

객체지향언어 즉, Java에서 사용하는 Class라는 개념과 비슷하지만 자바스크립트에서는 Class라는게 없습니다.

그래서 사용하는게 프로토타입입니다. 클래스가 없으니 상속기능도 없지만 프로토타입을 사용하여 상속이라는걸

흉내내도록 구현해 사용한다.

참조 : https://www.nextree.co.kr/p7323/

• Person 함수를 생성하게 되면 Person 함수의 프로토타입 객체가 생성된다.
• Person 함수는 내부적으로 prototype 이라는 멤버를 갖게 되는데 해당 prototype 멤버는 Person 함수의 프로토타입 객체를 참조한다.
• Person 함수의 프로토타입 객체는 constructor 라는 멤버를 갖는데 Person 함수를 참조한다.
• Person 함수의 prototype 속성이 참조하는 함수 프로토타입 객체는 new 라는 연산자와 Person 함수를 통해 생성된 모든 객체의 원형이 되는 객체이다.
• Person 함수로 만든 joon 객체를 생성하면 __proto__ 라는 속성이 존재하는데 자신을 만들어낸 프로토타입 객체를 참조하는 숨겨진 링크가 있다.

예시 1)

아래와 같이 Obo() 라는 함수를 생성하면 Obo 함수의 프로토타입 객체가 생성되어 있는걸 확인할 수 있다.

Obo 함수의 프로토타입 객체는 constructor 라는 멤버를 가지고 있다.

 

또한 Obo 함수 프로토타입 객체는 constructor 라는 멤버 변수를 가진다고 했는데 constructor 는 아래와 같이

Obo 함수를 참조하는걸 볼 수 있다.

 

oboTest  라는 변수에 new 키워드를 통해 Obo() 함수를 생성하고 oboTest 의 멤버변수인

__proto__ 는 Obo() 함수의 프로토타입 객체를 참조하고 있는걸 볼 수 있다.

 

 

 

예시 2)

function Obo() {
    this.name = 'obo';
    this.address = 'obo7902';
}

var hong = new Obo();
var jung = new Obo();

console.log(hong.name);  // obo
console.log(hong.address);  // obo7902

console.log(jung.name); // obo
console.log(jung.name); // obo7902

 

위 내용처럼 hong 과 jung이라는 변수에 Obo() 함수를 new 키워드로 생성하면 2개씩 총 4개가 메모리에 할당됩니다.

같은 내용이 2번 반복해서 메모리에 할당되면 메모리 낭비입니다.

 

이런문제를 프로토타입을 통해 해결할 수 있습니다.

 

function Obo() {};

Obo.prototype.name = 'obo';
Obo.prototype.address = 'obo7902';

var hong = new Obo();
var jung = new Obo();

console.log(hong.name);  // obo
console.log(hong.address);  // obo7902

console.log(jung.name); // obo
console.log(jung.name); // obo7902

 

똑같은 결과값이 나오지만 Obo() 함수의 prototype을 통해 공유할 수 있는곳의 공간에 name 과 address 를

설정해놓고 hone 과 jung은 그 공간에서 데이터를 읽어오는것입니다.

 

 

자바스크립트의 프로토타입은 총 2가지로 나누어진다.

1. Prototype Object

객체는 언제나 함수(Function)로 생성된다.

function Obo() {} // 함수
var oboObject = new Obo(); // 함수로 객체 생성

 

__proto__

• 자신을 만들어낸 객체의 원형과 연결된 속성

constructor

• 프로토타입 객체 멤버인 constructor 는 함수를 참조하는 내부구조
• 생성자로써 자신을 만들어낸 객체와 연결된 속성

prototype

• 자신을 원형으로 만들어진 새로운 객체들과 연결된 속성
• 다른곳에 생성된 함수이름의 프로토타입 객체를 참조한다.
• Obo() 라는 함수안의 prototype은 Obo Prototype Object 를 참조한다.

 

함수를 생성할때 함수와 함께 Prototype Object도 같이 생성된다.

함수를 생성할때 내부적으로 수행되는 작업으로 인해 함수 멤버로 prototype 속성이 있다.

생성된 함수는 prototype이라는 속성을 통해 Prototype Object에 접근할 수 있으며,

Prototype Object에 존재하는 contructor는 생성되었던 Obo() 함수를 가리키고 있습니다.

 

이제 아래와 같이 Obo(){} 함수를 생성하고 prototype 설정 후 new 키워드를 통해 o 라는 변수에 생성했습니다.

o 라는 변수는 Obo(){} 함수의 prototype에 접근하는걸 볼수 있습니다.

 

예시1)

function obo(){};

var ok = new obo();
var joo = new obo();

obo.prototype.getType = function(){
    return "호랑이";
};

console.log(ok.getType());
console.log(joo.getType());

 

• obo 라는 함수를 생성하고 ok 와 joo 에 new 키워드를 통해 객체를 생성했다.
• obo 함수의 prototype 속성을 통해 getType() 이라는 멤버를 만들었다.
• 호출했을 때 "호랑이" 라는 문자열을 return 하는 함수이다.
• obo 함수를 객체로 생성한 ok 와 joo에 getType 멤버를 호출하니 "호랑이"가 나온걸 볼 수 있다.
• prototype 의 멤버를 추가 하기전 객체를 생성 했으나 추가된 멤버를 호출할 수 있는걸 볼 수 있다.

 

예시2)

function obo(){};

var ok = new obo();
var joo = new obo();

obo.prototype.getType = function(){
    return "호랑이";
};

// 객체를 통해 수정
ok.getType = function(){
    return "고양이";
};

console.log(ok.getType());
console.log(joo.getType());

 

• obo 함수의 prototype에 getType 이라는 멤버 함수를 추가했다.
• ok 객체는 obo 함수로 만들어진 객체이며, ok 객체에 getType 함수를 추가했다.
• ok 와 joo 객체의 getType을 호출했다.
• ok 객체는 "고양이"를 리턴했으며, joo 객체는 "호랑이" 를 리턴했다.

ok 객체의 getType 은 프로토타입의 getType 을 호출한게 아니고

ok 객체안에 생성한 getType 함수를 호출했다.

 

프로토타입 객체의 멤버인 getType() 을 수정하려면 멤버 추가와 같이

obo 함수의 .prototype 속성을 이용해서 수정해야 한다.

 

obo.prototype.getType = function() {
    return "고양이";
};

 

위처럼 obo 함수의 prototype 속성을 사용하여 프로토타입 객체 멤버를 변경해야 한다.

 

 

2. Prototype Link

o 라는 객체에 new 라는 키워드를 사용해서 Obo(){} 함수를 생성했다.

o.name을 통해 'obo' 라는 값은 Obo(){} 함수의 Prototype Object에 존재하는 name 값이다.

이렇게 접근할 수 있는 이유가 Prototype Link라는 것이다.

o 라는 객체에 존재하는 "__proto__" 가 Obo(){} 함수의 Prototype Object 를 가리키고 있었다.

 

 

 

* __proto__ : Prototype Link

* constructor : Prototype Object

​

Obo(){} 이라는 함수가 존재한다.

1. 함수를 생성했을때 Prototyp이라는 객체(Prototype Object)가 생성된다. 해당 prototype 객체에는 constructor 속성이 있는데 생성된 객체를 가르킨다. 해당 Obo 함수를 new 키워드를 통해 o 라는 객체로 생성했을때,

해당 o 객체에는 __proto__라는 속성값이 생성된다.

이 __proto__ 속성값은 Obo의 Prototype Object(constructor)를 바라본다.

​

이와 같은 이유로 prototype을 설정하게된다면, 해당 객체들의 값들을 공유하며 사용한다.

​

결론

참조 : https://www.nextree.co.kr/p7323/

• 자바스크립트에서 Person 함수를 생성하게 되면 Person 함수의 프로토타입 객체도 생성되며, Person함수에는  prototype 이라는 속성이 생긴다.
• Person 함수의 prototype 은 Person 프로토타입 객체를 참조한다.
• Person 프로토타입 객체에는 constructor 라는 속성이 존재하는데 Person 함수를 참조한다.
• Person 프로토타입 객체는 Person 함수를 통해 생성된 joon 과 jisoo 객체의 원형이 되는 객체입니다.
• joon 과 jisoo 객체의 __proto__ 속성은 숨은 링크로 Person 프로토타입 객체를 참조합니다.