-
13-1. JavaScript 프로토타입(prototype)의 개념JavaScript 2023. 4. 9. 22:04
I. 프로토타입 (prototype) 이란?
- 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍을 지원하는 언어
- 오늘날에는 클래스가 더 널리 사용되지만, 사용하기에 따라 보다 강력하고 효율적
- 다시 함수형 프로그래밍으로 바뀌는 추세기도 하다.
1. 자바스크립트의 모든 객체는 Prototype을 가짐
const obj = {}; console.log(obj);
- [[Prototype]] 펼쳐서 살펴볼 것
console.log( obj.toString() );
- 빈 객체임에도 위의 메서드들이 사용 가능한 것은 프로토타입 때문!!
II. object - 모든것의 조상
- 아래 각 객체의 [[Prototype]] 의 [[Prototype]] 이 Object 임을 확인
- 각 [[Protoype]] 의 메서드들 확인
console.log( new String('') ); // constructor: ƒ String() console.log( [] ); // constructor : ƒ Array() console.log( new Map() ); // constructor : ƒ Map()
- constructor 항목에서 각각의 생성자 확인 가능
- 객체 리터럴( { } 등 )의 생성자는 Object() 임을 알 수 있음
console.log( {} );
✨프로토타입 체인
- 특정 객체에 호출된 프로퍼티가 없다면 프로토타입을 거슬러 올라감
- 예 : Array에는 valueOf 가 없지만 그 프로토타입인 Object 에는 있으므로 호출 가능
III. 코드로 프로토타입에 접근하기
1. __proto__ 접근자 사용 - Object.prototype의 프로퍼티
- Deprecated : 사라질 기능, 사용 권장되지 않음.
console.log( {}.__proto__ ); console.log( new Number(2).__proto__ ); console.log( [1, 2, 3].__proto__ );
✨ 같은 종류는 프로토타입 공유
console.log( {}.__proto__ === { x: 1, y: 2 }.__proto__ // true ); console.log( [1, 2, 3].__proto__ === [4, 5].__proto__ // true ); console.log( new String('가나다').__proto__ === new String('ABC').__proto__ // true );
✨ 최상위, 공통조상은 Object 임!!
2. Object.getPrototypeOf
- 수정할 때는 Object.setPrototypeOf 사용
- __proto__ 대신 이거 사용할 것
console.log( Object.getPrototypeOf({}) );
3. 생성자 함수에서는 prototype으로 프로토타입 접근 가능
function Person (name) { this.name = name; } // 인스턴스들에 공유될 프로토타입에 다음과 같이 접근 console.log(Person.prototype);
IV. 인스턴스 vs 프로토타입 프로퍼티
생성자 함수 정의
function HongChicken (name, no) { this.name = name; this.no = no; this.introduce = function () { return `안녕하세요, ${this.no}호 ${this.name}점입니다!`; } } const chain1 = new HongChicken('판교', 3);
// 본사에서 새 업무를 추가 HongChicken.prototype.introEng = function () { return `Welcome to Hong Chicken at ${this.name}!`; }; console.log(chain1.introEng()); console.log(new HongChicken('강남', 17).introEng());
✨인스턴스의 로그를 펼쳐 각 함수가 속한 레벨 확인
console.log(chain1);
- introduce : 만들어지는 인스턴스마다 각각 있음
- introEng : 프로토타입에만 있음 - 메모리 절약
✨따라서, 메모리 사용을 최소화 하려면 아래와 같이 작성!!
function HongChicken (name, no) { this.name = name; this.no = no; } // 공통된 요소들은 프로토타입 프로퍼티로 HongChicken.prototype.titleEng = 'HongChicken'; HongChicken.prototype.introduce = function () { return `안녕하세요, ${this.no}호 ${this.name}점입니다!`; } HongChicken.prototype.introEng = function () { return `Welcome to ${this.titleEng} at ${this.name}!`; };
const chain1 = new HongChicken('판교', 3); const chain2 = new HongChicken('강남', 17); const chain3 = new HongChicken('제주', 24); console.log(chain1.introduce()); console.log(chain1.introEng());
// 인스턴스 레벨과 프로토타입 프로퍼티들 비교 console.log(chain1, chain2, chain3);
✨프로토타입 레벨의 함수를 인스턴스 레벨에서 덮어쓰기 가능!
'JavaScript' 카테고리의 다른 글
14-1. JavaScript 비동기의 개념과 타임아웃 (0) 2023.04.10 13-2. JavaScript 프로토타입과 상속 (0) 2023.04.10 12-3. JavaScript this의 정적 바인딩 (0) 2023.04.09 12-2. JavaScript this의 동적 바인딩 (0) 2023.04.09 12-1. JavaScript 렉시컬과 클로저 (0) 2023.04.08