prototype

프로토타입

자바스크립트의 모든 객체는 자신의 프로토타입(부모)을 가르키는 [[Prototype]] 이라는 숨겨진 프로퍼티를 가지고 있다

    var a = {
        b:1,
        c:"123",
        d:{
            e: 'e'
        }
    };
    console.log(a.toString());

위 코드의 결과값

이 결과는 살짝 의문점을 갖게 만든다

우리는 객체 a에 toString()이라는 메소드를 생성해 준적이 없는데 아무런 에러 없이 정상적인 출력이 되고 있다

어째서 일까?

console.dir(a);
로 객체 a를 크롬에서 출력해보면 다음과 같은 값을 얻을 수 있다

위 코드의 결과값

순서대로 b,c,d의 값이 출력되는 것을 볼 수 있지만

맨 마지막의 __proto__는 뭘까?

바로 이 프로퍼티가 맨 위에서 얘기한 숨겨진 프로퍼티인 [[Prototype]]이며

다른 객체를 가르키고 있는 프로퍼티이고

우리가 생성해주지 않았지만 사용할 수 있는 toString()메소드 또한 __proto__가 가르키고 있는 객체에서 빌려온 메소드이다

그럼 이 프로토타입들은 무엇을 가르키고 있을까?

객체마다 가르키는 프로토타입이 다른데

객체 리터럴 방식으로 생성한 경우 그 객체의 프로토타입은 Object.prototype을
배열 객체를 생성한 경우 그 객체의 프로토타입은 Array.prototype을
생성자 함수 People을 사용해서 객체를 만든 경우 그 객체의 프로토타입은 People.prototype을

등등..

생성자 함수를 예시로 활용법 등 좀 더 자세히 알아보자

    var Student = function (name, grade) {
        this.name = name;
        this.grade = grade;
    }
    st1 = new Student('1', 4);
    st2 = new Student('2', 2);

학생들 st1과 st2을 생성했다

이후 코드에서 학생들을 1학년씩 올리려는 메소드를 만들려면 어떻게 해야할까?

    st1.addGrade = function () {
        this.grade += 1;
    }
    st2.addGrade = function () {
        this.grade += 1;
    }

이렇게 코드를 추가하면 간단하다

하지만 이렇게 학생 수가 적으면 상관 없겠지만 학생수가 많아진다면..?

학생 객체 하나하나마다 다 메소드를 추가해야하는 귀찮음이 생긴다

우리는 배운 프로토타입을 통해서 이 문제를 해결할 수 있다

생성자 함수 People을 사용해서 객체를 만든 경우 그 객체의 프로토타입은 People.prototype을..

라고 했고 이에 따라서

생성자 함수 Student를 이용해서 만든 st1,st2,...의 객체들은 모드 Student.prototype객체를 가르키고 있을 것이다

그 객체에 메소드를 추가하면 모든 st들은 Student.prototype객체에 있는 메소드를 사용할 수 있게 된다

바로 위 코드 대신

    Student.prototype.addGrade = function(){
        this.grade += 1;
    }

를 추가해주면 생성된 객체와 앞으로 생성될 모든 Student 객체에서 addGrade()메소드를 사용가능하다