Javascript_proto type

YOOJIN PARK·2021년 12월 13일
0

js공부하기

목록 보기
12/12

1. 프로토 타입

1-1) 프로토 타입 문법

  • 문법: __proto__, prototype

  • 프로토 타입 역사를 살펴보면, 처음에 자바스크립트가 프로토 타입을 만들었다. 그런데 벤더사에서 맘대로 __ 붙여서 여러가지 명칭을 만들어서 가지고 만들었다. 그래서 대혼란의 시대가 왔다. 그래서 프로토타입을 정립하게 되었다.

  • __proto__ 는 오래된것

  • 모던한 걸 쓰자

  • __proto__는 프로토 타입에 접근하기 위한 방법

  • 뒤에 getter, setter를 이용할 때 __proto__ 쓴다.

rabbit.__proto__ = animal;
  
rabbit.prototype = animal;  

(표준의 부록으로 기록되어 있음..이게 표준인지 아닌지는 아직 논란중!!)


1-2) 프로토 타입이란?

  • 자바스크립트는 클래스라는 개념이 없는 객체지향 언어
  • 프로토 타입을 이용해서 기존의 객체를 복사하고 상속하여 새로운 객체를 생성하는 언어
  • 이렇게 프로토 타입은 객체를 확장하고 이를 통해 객체 지향적인 프로그래밍 되도록 함
  • 프로퍼티는 유전자다 계속따라올라 타고 올라간다.
  • 부모님이 가지고 있는 것은 곧 내꺼다 (이걸로..)
let animal = {
  eats: true
};
let rabbit = {
  jumps: true
};

rabbit.__proto__ = animal;
  
rabbit.prototype = animal;  

// 출력 //
{jumps: true, prototype: {…}}
jumps: true
prototype: {eats: true}
[[Prototype]]: Object
   
  • 위의 내용 결론:
    레빗은 먹을 수 있다.근데 래빗을 출력하면 없다 왜냐면 부모인 animal이 가지고 있는것이 상속됐기 때 문이다.

1-3) 대체 메소드

  • Object.create(proto, [descriptors]) –proto를 참조하는 빈 객체를만든다.
    설명자를 이용해서 새객체에 프로퍼티를 추가하는 것도 가능
  • Object.getPrototypeOf(obj) – 오브젝트의 프로토 타입을 반환합니다.
  • Object.setPrototypeOf(obj, proto) – 오브젝트의 프로포타입이 proto가 되도록 설정합니다.
  • 아래 예시처럼 __proto__ 대신 이 메서드들을 사용하도록 합시다.
  let animal = {
  	eats: true
};
let rabbit = Object.create(animal);
alert(rabbit.eats); // true
alert(Object.getPrototypeOf(rabbit) === animal); // true
Object.setPrototypeOf(rabbit, {}); // rabbit의 프로토타입을 {}으로 바꿉니다.
  

📍 proto 를 쓰지말라는 이유!

  • 브라우저마다 안되는 경우가 있다.
  • 객체의 키로 proto가 오면 얘는 키로 문자열로 쓸 수 없다.
    정 써야 되는경우에는 create를 통해 상속된것이 없는 객체를 만들어서 넣으면 되는데 굳이?

1-4) 프로토 타입를 둘러싼 몇가지 특징

  • 메서드를 객체에서 호출했든 프로토 타입에서 호출했든 상관없이 this는 언제나 .앞의 객체가 된다.
  let animal = {
  eats: true
};

function Rabbit(name) {
  this.name = name;
}

Rabbit.prototype = animal;

let rabbit = new Rabbit("White Rabbit");
  • 위의 내용 결론:rabbit을 출력하면 그 이름은 'White Rabbit'이 뜬다.
  • Object.keys는 객체 자신의 키만 반환합니다.
  • for..in은 객체 자신의 키와 상속 프로퍼티의 키 모두를 순회합니다.
alert(Object.keys(rabbit)); // jumps
for(let prop in rabbit) alert(prop); // jumps, eats

그래서 이후 클래스까지 이어지고 클래스란 객체 생성자와 프로토타입을 좀 더 쉽게 사용하기 위해서 만들어진 문법이다.라고 하는 이야기 까지 나오는데, 그건 다음 글에 써본다...

profile
개발자를 꿈꾸는 개린이입니다.

0개의 댓글