프로토타입>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
함수가 호출을 받아 생성이 되는 시점은,
사실
내부에서 어떻게 동작하냐면,
함수를 호출을 하면,
먼저
함수의 프로토타입이 먼저 생성이 되고 , 그다음 함수 그자체가 생성이 되고 실행이 된다.
즉, 함수는 자기자신의 프로토타입을 보고 만들어진것이다.
그게 함수의 탄생의 과정이다.
그러면 함수의 프로토타입은 뭐로 구성되어져있냐면,
예를 들어
var a = function(){ // 함수 정의
this.a1 = 1; // 함수안에 프로퍼티 정의 했지만 글로벌(window임)영역이죠
a.prototype.a2 = 2; // 프로토타입에 프로퍼티 미리 등록
a.a0 = 0; // a함수의 프로퍼티로 미리 등록
};
a.prototype.a3 = 3; // 프로토타입에 프로퍼티 추가 등록
a.prototype.constructor.a4 = 4; // a함수의 프로퍼티로 추가 등록
a.a5 = 5; // a함수의 프로퍼티로 추가 등록
a(); // 호출하면 함수가 실행됨 ,생성됨 그리고 프로토타입도 생성됨
a.protorype
이렇게 코드가 있을때.....
a.protorype 이라고 콘솔에 치면
a의 프로토타입내용을 볼수 있는데,
{a2: 2, a3: 3, constructor: ƒ}
처음에 이렇게 뜬다
저 내용은 a2 a3 컨스트럭쳐가 들었다는 거고 ,
a2 a3 는 a함수의 프로토타입안에 들어있는 프로퍼티 이고,
컨스트럭쳐는 a함수의 프로퍼티를 의미한다.
그럼 저기옆에 원래 밑으로 볼수있는게 있는데 아무튼 그걸 눌러보면
{a3: 3, a2: 2, constructor: ƒ}
a2: 2
a3: 3
constructor: ƒ ()
proto: Object
요렇게 뜨는데,
보다시피
a2 a3 는 프로토타입에 들어있는 프로퍼티고,
저 컨스트럭쳐를 눌러보면 a함수에 등록된 프로퍼티를 보여준다.
a함수의 프로토타입이랑
a함수랑 다른 별개의 것이다.
a함수의 프로토타입은 a함수의 원형이고,
a함수는 그냥 a함수 그자체이다.
*참고로
a함수의 프로토타입에 속성에 보면 컨스트럭쳐가 있는데
컨스트럭쳐는 생성한다는 의미이다. 즉, 이 컨스트럭쳐를 보고 함수를 만들고(함수도 객체니까) 객체도 만들고 한다.
또 컨스트럭쳐는 생성할 당시, 그 환경을 들고있다. 등록된 프로퍼티도 가지고있고, 추가된 것도 가지고 있다.
근데 만약 이런코드
즉, this 가 들어간 코드는 어떻게 될까?
function a (){
this.a1 = 1;
this.a2 = 2;
}
a();
var b = new a();
b.a1
1
b.a2
2
a.a1 = 4;
4
a.a1
4
b.a1
1
여기서 this 를 쓰게되면,
일단 this를 쓴이유가 뭐냐면,,,
this 는 호출한 객체가 누구냐에 따라 그 대상이 달라지는데,
디폴트로는 window 로 되있는거고,
그래서
new 해서 새로운객체를 생성할때,
this 한거를 갖고오면 마치
a함수가 있는데, 그럼 a함수 프로토타입도 있는데,
저기보면 이미 함수 만들때 this.a1 이라고 프로퍼티를 만들어 놨는데,
일단 저거는
a함수의 프로퍼티라고 생각하면된다
그래서 새 객체를 생성할때 저 퍼로퍼티가 상속이 된다
(참고로 this 로 상속이 되는것은 값이 변경이 안된다.)
