본문 바로가기
programming language/Javascript

prototype

by cariño 2022. 12. 8.
728x90
반응형

프로토타입은 자바스크립트의 핵심이다. 

프로토타입 기반의 언어가 자바스크립트라는 개념을 인식해야한다. 

클래스를 사용할 때도 프로토타입과 연관되어 있다. 

 

 

const user = {
    name: 'cap',
    age: 100
}
const admin = user = {
    name: 'cap',
    age: 100,
    role: 'admin'
}

user과 admin 객체를 만들었다.  코드에서 보면 중복되는 name, age 속성들이 있다. 

중복되는 코드를 줄일 수 있는 방법이 javascript에서 지향하는 prototype상속의 개념이다. 

 

user의 정보를 admin도 사용할 수 있도록 __proto__를 사용해서 prototype을 상속시켜줬다. 

admin을 조회해보니 [[prototype]] 안에는 age와 name이 있는 Object가 상속이 되었다. 

 

admin.role 속성을 추가하고 admin을 조회했다. 

{role: 'admin'}을 가진 객체가 만들어졌고 해당 객체 안에는 상속받은 age, name이 나타난다. 

 

이와 마찬가지로 상위 object의 속성을 쓰는것, array, object, string, number등 prototype으로 상속받아서 사용할 수 있게 된다.

 

 

[bulit-in javascript API 또는 Javascript Native API]

실제로 코딩할 때 prototype이 주는 혜택은 어떤 것인건가.

obj 객체를 생성하고 나서 펼쳐보면 제일 최 상위 객체에는 prototype인  Object가 위치한다. 

객체 정보를 재활용 할 때 Object에서 내장된 메서드나 속성을 이용해서 쓸 수 있게 된다. 

 

단순히 객체의 정보만 확장하는 것이 배열, 숫자, 문자 등이상위 prototype의 정의된 기능, 메서드를 사용할 수 있게 된다. 

 

 

아래 Object MDN문서를 참고해서 Methods들을 참고해가며 쓰도록하자. 

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

 

Object.assign() - JavaScript | MDN

Object.assign() 메서드는 출처 객체들의 모든 열거 가능한 자체 속성을 복사해 대상 객체에 붙여넣습니다. 그 후 대상 객체를 반환합니다.

developer.mozilla.org

 

728x90

'programming language > Javascript' 카테고리의 다른 글

string 데이터 배열로 만들기  (0) 2023.12.17
vanillaJS 페이지네이션 구현  (1) 2023.12.17
call, apply, bind  (0) 2022.12.06
callback, promise, async/await  (0) 2022.11.03
변수에 대하여  (0) 2022.10.13

댓글