[자바스크립트 객체지향]prototype 뭘까이게..

프로토타입 동영상을 여러번 돌려 보았지만

알듯 말듯 아리송 하다.

이게 맞는것 같은데 아닌것같기도하고..

일단 내가 이해한것대로만 정리해보려 한다.

function Person(name, first, second){
            this.name = name;
            this.first = first;
            this.second = second;
            this.sum = function(){
                return this.first+this.second;
            }
        }
    
        var kim = new Person('kim', 10, 20);
        var lee = new Person('lee', 10, 10);
        console.log(kim.sum())
        console.log(lee.sum())

ㅇ일단 기존의 생성자 함수(constructor)이다.

new Person 을 통해 객체를 생성한다.

근데 여기서 sum 이라는 부분이 객체가 생성될때마다 이 함수가 생성이되는데

이놈을 만드는 시간이 또 들고, 그렇다보면 이게 메모리가 낭비된다고 한다.(이게 맞나..?)

그러니 모든 객체들이 공통적으로 사용할수 있는놈을 만들어주면 참 좋은데

이걸 프로토타입을 이용하면 된다고 한다. (또한 수정을 할때도 편리하다)

 

이제 저 sum 만 프로토타입으로 만들어보자

 

function Person(name, first, second){
            this.name = name;
            this.first = first;
            this.second = second;
            }
            Person.prototype.sum = function(){
                return this.first+this.second;
            }

이런식으로 적어준다. 위와의 차이점은 sum을 Person 의 생성자함수에서 빼내었고,

그앞에 생성자함수의 이름(Person).prototype 를 붙여줬다.

이렇게 되면 sum은 Person의 프로토타입이 된다.

 

var kim = new Person('kim', 10, 20);

console.log(kim)
	//Person{name:"kim", first:10, second:20}
    
console.log(kim.sum())
	//50

f그리고 kim이라는 변수에 new Person 으로 객체를 만들어 준다.

그리고 console.log로 찍어보면 객체가 잘 생성되었다고 나온다.

근데 console.log(kim.sum())을 찍어보면 그냥 생성자함수 안에  sum을 넣었을때랑 똑같이 작동을 하는데

이게 왜 이러냐.. 보니 Person 의 __proto__ 에 sum이 들어가 있다.

뭔가 링크가 되어있는 느낌이다.(사실 그냥 이렇게 이해하고 말았다.)

좀더 만들어보려고 예제를 한번 더 만들어 보았는데,

 

    function one(){
        this.first = "kim.first";
        this.second = "kim.second";
    }
        one.prototype.xx = "안녕 나는 one의 prototype이야 :)"
        console.dir(one)

    function two(){
    	this.twofirst = "twofirst"
        }
        two.prototype = new one();
        console.dir(two)

    function three(){}
        three.prototype = new two();
        console.dir(three)

        var object = new three();

        console.log(object.xx)

 ㅇ이렇게 만들어 봤다. 프로토타입 체인이라던가..

최종적으로 three를 이용해서 object 라는 객체를 만들었는데

이 three에는 three의 prototype으로  new two를통해 또 객체를 생성하고..

two에도 마찬가지로 해준다음에 two에는 this.twofirst = "twofirst" 를 넣고

그다음에 new one으로 또 객체를 생성한 후

one에는 one의 prototype.xx 를 넣었다.(뭔소리를 하는건지 모르겠네.) 아무튼 이렇게 하고 콘솔을 찍어보았다.

 

three의 내부 __proto__에  one이 들어가 있다.

two 의 내부 prototype 에는 one {first : "kim.first", second:"kim.second"}

one에는 prototype으로 "안녕 나는 one의 prototype이야 :)" 가 들어있었다.

 뭐가 어떻게 연결되어있는지 너무 복잡해서 뭔지 모르겠는데...

아무튼 이렇게 연결해놓으면 맨 마지막 생성자함수를 통해 생성된 객체는

그와 연결된 모든 객체들의 요소를 사용할 수 있었다.

 

이야...이게 도대체 뭐냐.....