프로토타입

객체 리터럴로 생성되는 모든 객체는 자바스크립트 표준 객체 Object 의 속성인 prototype 객체에 연결된다.

 

어떤 객체를 생성할 때에는, 해당 객체의 원형 ( 프로토타입 ) 이 될 객체를 선택할 수 있다.

아래는 객체 protoObj 를 프로토타입으로 삼아 newObj 를 생성하는 코드이다.

var protoObj = {
    "name" : "myName"
}

// Object.create - 최신 브라우저에서 지원하는 메소드
var newObj = Object.create(protoObj);

console.log(newObj.name) // myName

  

최신 브라우저가 아닌 경우 아래 코드를 통해 Object.create 를 직접 추가할 수도 있다.

if(typeof Object.create !== 'function'){ // 현재 브라우저에 존재여부 검사
    Object.create = function (pro){
        var fn = function(){};
        fn.prototype = pro
        return new fn();
    };
};

 

프로토타입을 통해 생성된 객체가 변경되어도 프로토타입 객체에는 영향을 미치지 않는다. 

newObj.name = "otherName";
console.log(protoObj.name); // myName

 

프로토타입 객체의 속성 추가(변화)는 이 객체를 기반으로 생성된 객체들에 영향을 미친다.

protoObj.newAttr = "Hello_New_World";
console.log(newObj.newAttr); // Hello_New_World

 

객체와 객체의 프로토토타입 모두 같은 속성이 작성된 경우 현재 객체의 속성이 우선 검색된다.

console.log(protoObj.name); //myName;
console.log(newObj.name); //otherName;

 

자바스크립트에서는 객체의 속성값을 읽을 때 그 속성이 객체에 존재하지 않는 경우,

해당 객체의 프로토타입 객체에서 검색을 하게 된다. 

이렇게 객체의 속성값을 이어서 찾도록 하는 연결을  프로토타입 연결 ( prototype chain )  이라고 한다. 

이 연결은 Object.prototype 까지 이어져있다.