프로토타입이란?
javascript에서 기본 데이터 타입을 제외한 몯느 것은 객체입니다. 객체가 만들어지기 위해서는 자신을 만드는 데 사용된 원형인 프로토 타입 객체를 이용하여 객체를 만듭니다. 자신을 만드는데 사용된 원형인 프로토타입 객체를 이용하여 객체를 만들게 되는데 이때 만들어진 객체 안에 _ _proto__ 속성이 자신을 만들어낸 워형을 의미하는 프로토타입 객체를 참조하는 링크가 숨겨져 있습니다.
이 숨겨진 링크를 프로토 타입이라고 정의합니다.
function Dog(color, name, age) { // 개에 관한 생성자 함수를 작성함.
this.color = color; // 색에 관한 프로퍼티
this.name = name; // 이름에 관한 프로퍼티
this.age = age; // 나이에 관한 프로퍼티
}
var myDog = new Dog("흰색", "마루", 1); // 이 객체는 Dog라는 프로토타입을 가짐.
document.write("우리 집 강아지는 " + myDog.name + "라는 이름의 " + myDog.color + " 털이 매력적인 강아지입니다.");쉽게 생각하면 위에 코드에
Dog.prototype.name = "mimi"를 적었다고 가정했을때 myDog.name 을 작성 하면 어떻게 될까요?
답은 "mimi"가 출력 됩니다.
그 이유는 오브젝트에서 자료를 뽑을때 함수안에 없으면 그 부모요소를 보고 그 부모요소가 없으면 부모의 부모요소를 보게 되는 자바스크립트 원리때문입니다. 쉽게 생각하면 프로토타입은을 쓴다고 하면 유전자에 각인된다고 생각하면 됩니다. 유전자에 각인되어서 위에설정해준 prototype.name 때문에 유전자에 .name 이 미미라고 각인되어서 mimi가 출력되는 것입니다.
.proto
function Dog(color, name, age) { // 개에 관한 생성자 함수를 작성함.
this.color = color; // 색에 관한 프로퍼티
this.name = name; // 이름에 관한 프로퍼티
this.age = age; // 나이에 관한 프로퍼티
}
var myDog = new Dog("흰색", "마루", 1); // 이 객체는 Dog라는 프로토타입을 가짐.
document.write("우리 집 강아지는 " + myDog.name + "라는 이름의 " + myDog.color + " 털이 매력적인 강아지입니다.");위에 코드에서 myDog 라는 객체를 생성했을때 객체의 프로퍼티와 함께 _ _proto __ 프로퍼티가 같이 생성되게 됩니다.
방금 생성된 이 proto는 myDog 객체를 생성한 Dog 객체의 프로토 타입 객체를 가르키는데
Dog.prototype 을 통해서 myDog의 prototype 객체에 접근할 수 있고 Dog 객체의 --proto-- 를 통해서도 Dog 의 prototype 객체 에 접근할 수 있습니다.
한마디로 정의하면
proto
- 모든 객체가 가지고 있다.
- 하나의 연결된 링크라고 할 수 있다.
.prototype
- 함수객체만 가지고 있다.
- 생성자를 가지는 원형으로 선언 할 수 있다.
클래스, 인스턴스, 프로토타입의 관계
class Human {
constructor(name, age) {
this.name = name;
this.age = age;
}
sleep() {
console.log(`${this.name}은 잠에 들었습니다`);
}
}
let kimcoding = new Human('김코딩', 30);
프로토 타입 체인
자바스크립트는 특정 객체의 프로퍼티나 메소드에 접근시 객체 자신의 것뿐 아니라 .proto가 가리키는 링크를 따라서 자신의 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 접근할 수 있습니다.
즉, 특정 객체의 프로퍼티나 메소드 접근시 만약 현재 객체의 해당 프로퍼티가 존재하지 않는다면 .proto가 가리키는 링크를 따라 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 차례로 검색하는 것이 바로 프로토타입 체인이 됩니다.
모든 프로토타입 체이닝의 종점은 Object.prototype이고
하위 객체는 상위 객체의 프로퍼티나 메소드를 상속받는 것이 아니라 공유합니다.
해당 객체에 없는 프로퍼티나 메소드를 접근할 때 프로토타입 체이닝이 일어난다고 할 수 있습니다.
Object
object 는 모든 객체 요소의 최상위에 존재하는 클래스입니다.
프로토타입에서 객체를 생성하는 방법이 3가지가 있습니다.
1. 리터널 방식
2. Object 생성자 함수
3. 생성자 함수1) 리터럴 방식으로 생성된 객체의 프로토타입 체인
객체 리터럴 방식으로 생성된 객체는 결국 내장 함수인 Object() 생성자 함수로 생성하는 것을 단순화 한 것이다.
자바스크립트 엔진은 객체 리터럴로 객체를 생성하는 코드를 만나면 내부적으로 Object() 생성자 함수를 사용하여 객체를 생성한다.
즉, Object 생성자 함수로 생성한 것과 같습니다.
2) Object() 생성자 함수로 생성된 객체의 프로토타입 체인
Object() 생성자 함수는 함수이므로,
함수 객체인 Object()는 prototype 프로퍼티가 있다.
prototype 프로퍼티는 함수 개체가 생성자로 사용될 때 이 함수를 통해서 생성될 객체의 부모 역할을 하는 객체이다.
즉 프로토타입 객체를 가리킨다.
생성된 객체의 proto 프로퍼티는 자신의 부모역할을 하는 객체 즉, 프로토타입 객체를 가리킨다.
var Person = {
name: "Song",
age: 30,
};
console.log(Person.__proto__ === Object.prototype); // true
console.log(Object.prototype.constructor === Object); // true
console.log(Object.__proto__ === Function.prototype); // true
console.log(Function.prototype.__proto__ === Object.prototype); // true
