먼저 함수를 선언하면 위와 같은 구조의 2개의 객체가 생성이 됩니다.
하나는 function 객체이고, 다른 하나는 prototype 객체입니다.
단순히 2개의 객체가 생성된 것만 아니라 두 객체는 서로 이어져 있는데
함수에서는 프로토타입 객체에 prototype이라는 내부변수로 접근 할 수 있고,
프로토타입에서는 constructor라는 변수로 함수에 접근 할 수 있게 됩니다.
서로를 참조하는 레퍼런스 변수를 통해 두 객체는 접근 뿐만 아니라 변경도 가능합니다.
function Foo (){}
Foo.prototype.proto_val = '원형 값';
Foo.prototype.constructor.construct_val = "생성자 값";
console.log(Foo.prototype.proto_val); //원형 값 을 출력
console.log(Foo.construct_val); //생성자 값 을 출력
console.log(Foo.proto_val); //?! undefined를 출력
이거 마지막 콘솔로그는
바로 Foo함수에서 접근하니까 안되는거고,
(왜냐면 값은 프로토타입에 들어있으니까요)
접근하려면 prototype 키워드로 접근하면 가져올수있는데,
그렇게 잘 안하고,
인스턴스를 만들어서 사용한다.
(new 키워드로 새 객체를 만든가는 말이다.)
새 객체에서는 이제
function Foo (){} //함수 선언
Foo.prototype.proto_val = "접근 할 수있다!!"; //Foo의 프로토타입을 설정
var foo_instance = new Foo(); //Foo의 인스턴스를 생성
console.log(foo_instance.proto_val); //접근 할 수있다!! 를 출력
이렇게 인스턴스로 접근하는거고
이거의
내막은
function Foo(){
//var this = {}; this가 생성이 됩니다.
//이 this는 dunder proto라는(proto)라는 참조변수로 프로토타입 객체를 참조합니다.
//return this; this가 반환됩니다.
}
var foo_instance = new Foo();
위의 코드와 같이, new를 할 경우 this 객체가 생성되며, 또한 반환되어 foo_instance에서 해당 객체를 사용할 수
있게 됩니다.
주목해야 할점은 this가 가지고 있는 내부 변수인 proto(Dunder Proto 라고 불립니다.) 가 무엇을 가르키고
있느냐입니다.
이 this는 Foo의 프로토타입을 가르키게 되고, Foo 함수객체와는 다르게 Foo의 함수에 직접 접근 할 수 있는
권한을 가지게 됩니다.
이부분이다.
아무튼
이코드에서
단순하게 인스턴스가
프로토타입에 접근해서
그 값을 참조해올때는
링크값 주소값을 가져오는거고,
실제 인스턴스(메모리)에는 전혀 저장된게 없다.
그리고 수정하려고하면,,,,
function Foo(){}
Foo.prototype.proto_val = 100; //프로토타입 속성을 설정합니다.
var foo_instance = new Foo(); //Foo의 인스턴스를 생성합니다.
console.log(foo_instance.proto_val); //프로토타입값 100을 출력을 합니다.
foo_instance.proto_val -= 1; // 인스턴스에서 proto_val을 1줄여봅니다.
console.log(foo_instance.proto.proto_val); //프로토타입의 값은 그대로입니다.
console.log(foo_instance.proto_val); //하지만 인스턴스는 1이 줄은 99가 출력이 됩니다.
이거는 이제,,
새 객체(인스턴스)에서
값을 수정하려고 하는 부분이 뭐냐면
저렇게 = 해서 수정하게되면
수정이 아니고,
인스턴스에 따로 생성이 되는거다.
즉, 진짜 수정을 하고싶으면,
prototype 키워드로 접근해서 수정을 해야되고,
그냥 값을 저렇게 쓰면 복사해서 가져오는거, 랑 수정하면 걍 자기한테 저장이 되는거랑 이렇게 된다.
즉, prototype이 왜 원형이란 의미를 가지는지가 바로 여기서 나오는 것 같습니다.
비록 prototype에서 값을 가져오지만 어디까지나 프로토타입은 인스턴스를 찍어낼 때 참조 가능한 기본값을 가지고
각각의 인스턴스는 프로토타입으로 받은 값을 개별로 사용이 가능하게 된다는 것입니다.
그래고 한가지 더 참고를 하자면 언제 프로토타입에 있는 값을 인스턴스가 자신의 메모리로 가져오냐 입니다.
function Foo(){}
Foo.prototype.proto_val = 100;
var foo_instance = new Foo();
console.log(foo_instance.proto_val === Foo.prototype.proto_val); //true를 출력합니다.
//foo_instance.proto_val = Foo.prototype.proto_val -1;
console.log(foo_instance.proto_val === Foo.prototype.proto_val); //false를 출력합니다.
인스턴스에서 값을 찾을때
프로토타입의 속성을 접근해서
프로토타입에 값이 있는지 확인한 뒤에 참조만 한다.
인스턴스에서 프로토타입 속성으로 연산을 하려고 할 경우,
인스턴스에 메모리가 주어지고, 프로토타입의 속성을
호출하여 받은 값을 연산하여 할당된 메모리에 저장이 되어집니다.
이렇게 할당받은 메모리로 인스턴스는 고유의 속성을 가지게 되는겁니다.


