프로토타입 19
자바스크립트는 프로토타입을 이용해서 상속을 구현할 수 있다.
객체지향 프로그래밍
속성을 통해 여러 개의 값을 하나의 단위로 구성한 복합적인 자료구조를 객체라하며,
객체지향 프로그래밍은 독립적인 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임이다.
객체는 상태 데이터와 동작을 하나의 논리적인 단위로 묶은 복합적인 자료구조라고 할 수 있다.
이때 객체의 상태 데이터를 프로퍼티property, 동작을 메서드method라 부른다.
상속과 프로토타입
function Circle(radius){
this.radius = radius;
this.getArea = function(){
return Math.PI * this.radius ** 2;
};
}
const circle1 = new Circle(1);
const circle2 = new Circle(2);
console.log(circle1.getArea === circle2.getArea); // false
console.log(circle1.getArea());
console.log(circle1.getArea());
Circle 생성자 함수의 getArea 메서드는 인스턴스를 생성할 때마다 중복 생성된다.
상속을 통해 불필요한 중복을 제거해보자.
자바스크립트는 프로토타입prototype을 기반으로 상속을 구현한다.
function Circle(radius){
this.radius = radius;
}
Circle.prototype.getArea = function(){
return Math.PI * this.radius ** 2;
};
const circle1 = new Circle(1);
const circle2 = new Circle(2);
console.log(circle1.getArea === circle2.getArea); // true
console.log(circle1.getArea());
console.log(circle1.getArea());
function CoffeeMachine(beans){
this.beans = beans;
// Instance member level
/*
this.makeCoffee = shots => {
console.log('making coffee');
}
*/
}
// Prototype member level
// __proto__ 안에 정의되어 있다. 고로 상속 가능하다.
CoffeeMachine.prototype.makeCoffee = shots => {
console.log('making coffee');
}
function LatteMachine(milk){
this.milk = milk;
}
LatteMachine.prototype = Object.create(CoffeeMachine.prototype); // LatteMachine이 CoffeeMacine을 상속받음
const latteMachine = new LatteMachine(12);
latteMachine.makeCoffee();
프로토타입 객체
__ proto __ 접근자 프로퍼티
모든 객체는 proto 접근자 프로퍼티를 통해 자신의 프로토타입, 즉 [[Prototype]] 내부 슬롯에 간접적으로 접근할 수 있다.
__proto__는 접근자 프로퍼티다.
proto 접근자 프로퍼티는 상속을 통해 사용된다.
const person = {name:'Lee'};
// person 객체는 __proto__ 프로퍼티를 소유하지 않는다.
console.log(person.hasOwnProperty('__proto__')); // false
// __proto__ 프로퍼티는 모든 객체의 프로토타입 객체인 Object.prototype 의 접근자 프로퍼티다.
console.log(Object.getOwnPropertyDescriptor(Object.prototype, '__proto__'));
// 모든 객체는 Object.prototype의 접근자 프로퍼티 __proto__를 상속받아 사용할 수 있다.
console.log({}.__proto__ === Object.prototype); // true
함수 객체의 prototype 프로퍼티
함수 객체만이 소유하는 prototype 프로퍼티는 생성자 함수가 생성할 인스턴스의 프로토타입을 가리킨다.
| 구분 | 소유 | 값 | 사용 주체 | 사용 목적 |
|---|---|---|---|---|
| __ proto __ 접근자 프로퍼티 | 모든 객체 | 프로토타입의 참조 | 모든 객체 | 객체가 프로토타입에 접근 또는 교체하기 위해 사용 |
| prototype 프로퍼티 | constructor | 프로토타입의 참조 | 생성자 함수 | 생성자 함수가 자신이 생성할 객체(인스턴스)의 프로토타입을 할당하기 위해 사용 |
function Person(name){
this.name = name;
}
const me = new Person('Lee');
console.log(Person.prototype === me.__proto__); // true
프로토타입의 constructor 프로퍼티와 생성자 함수
function Person(name){
this.name = name;
}
const me = new Person('Lee');
// me 객체에는 constructor 프로퍼티가 없지만 me 객체의 프로토타입인 Person.prototype에는
// constructor 프로퍼티가 있으므로, me 객체는 프로토타입인 Person.prototype의 constructor 프로퍼티를 상속받아 사용할 수 있다.
console.log(me.constructor === Person); // true
리터럴 표기법에 의해 생성된 객체의 생성자 함수와 프로토타입
프로토타입과 생성자 함수는 단독으로 존재할 수 없고 언제나 쌍으로 존재한다.
| 리터럴 표기법 | 생성자 함수 | 프로토타입 |
|---|---|---|
| 객체 리터럴 | Object | Object.prototype |
| 함수 리터럴 | Function | Function.prototype |
| 배열 리터럴 | Array | Array.prototype |
| 정규 표현식 리터럴 | RegExp | RegExp.prototype |
프로토타입의 생성 시점
프로토타입은 생성자 함수가 생성되는 시점에 더불어 생성된다.
오버라이딩과 프로퍼티 섀도잉
- 오버라이딩 overriding : 상위 클래스가 가지고 있는 메서드를 하위 클래스가 재정의하여 사용하는 방식이다.
- 오버로딩 overloading : 함수의 이름은 동일하지만 매개변수의 타입 또는 개수가 다른 메서드를 구현하고 매개변수에 의해 메서드를 구별하여 호출하는 방식이다. 자바스크립트는 오버로딩을 지원하지 않지만 arguments 객체를 사용하여 구현할 수는 있다.
instanceof 연산자
function Person(name){
this.name = name;
}
const me = new Person('lee');
console.log(me instanceof Person); // true
console.log(me instanceof Object); // true
직접 상속
Object.create에 의한 직접 상속
- new 연산자가 없어도 객체를 생성할 수 있다.
- 프로토타입을 지정하면서 객체를 생성할 수 있다.
- 객체 리터럴에 의해 생성된 객체도 상속받을 수 있다.
객체 리터럴 내부에서 __proto__에 의한 직접 상속
const myProto = {x:10};
const obj = {
y:20,
__proto__:myProto
};
/* 위 코드는 아래와 동일하다
const obj = Object.create(myProto,{
y:{value:20, writable:true, enumerable:true,configurable:true}
});
*/
정적 프로퍼티/메서드
정적 프로퍼티/메서드는 생성자 함수로 인스턴스를 생성하지 않아도 참조/호출할 수 있는 프로퍼티/메서드를 말한다.
정적 프로퍼티/메서드는 생성자 함수가 생성한 인스턴스로 참조/호출할 수 없다.
프로퍼티 존재 확인
in 연산자
in 연산자는 객체 내에 특정 프로퍼티가 존재하는지 여부를 확인한다.
key in object
const person = {name:'lee', age:20};
console.log('name' in person); // true
console.log('address' in person); // false
console.log('toString' in person); //true
//ES6 Reflect.has
const person = {name:'lee', age:20};
console.log(Reflect.has(person, 'name')); // true
console.log(Reflect.has(person,'toString')); //true
Object.prototype.hasOwnProperty 메서드
인수로 전달받은 프로퍼티 키가 객체 고유의 프로퍼티 키인 경우에만 true를 반환하고 상속받은 프로토타입의 프로퍼티 키인 경우 false를 반환한다.
const person = {name:'lee', age:20};
console.log(person.prototype.hasOwnProperty('name')); // true
console.log(person.prototype.hasOwnPropery('toString')); //false
프로퍼티 열거
for...in 문
객체의 모든 프로퍼티를 순회하며 열거한다.
for(변수선언문 in 객체)
const person = {name:'lee',address:'seoul'};
for(const key in person){
console.log(key + " : "+ person[key]);
}
// name : lee
// address : seoul
[[Enumerable]]의 값이 false이면 열거되지 않는다.
for...in 문은 객체의 프로토타입 체인 상에 존재하는 모든 프로토타입의 프로퍼티 중에서 프로퍼티 어트리뷰트 [[Enumerable]]의 값이 true인 프로퍼티를 순회하며 열거한다.
for...in 문은 프로퍼티 키가 심벌인 프로퍼티는 열거하지 않는다.
//객체 자신의 프로퍼티만 나열하기
const person = {
name:'lee',
__proto__:{age:20}
};
for(const key in person){
if(!person.hasOwnProperty(key)) continue;
console.log(key+":"+person[key]);
}
배열에는 for...in 문을 사용하지 말고
일반적인 for문이나 for...of문 또는 Array.prototype.forEach 메서드를 사용하기를 권장한다.
const arr = [1,2,3];
for(const i in arr){
console.log(arr[i]);
}
for(let i = 0; i<arr.length; i++){
console.log(arr[i];)
}
arr.forEach(v => console.log(v));
for(const value of arr){
console.log(value);
}
Object.keys/values/entries 메서드
객체 자신의 고유 프로퍼티만 열거하기 위해서는 for...in문을 사용하는 것보다 Object.keys/values/entries 메서드를 사용하는 것을 권장한다.
Object.keys 메서드는 객체 자신의 열거 가능한 프로퍼티 키를 배열로 반환한다.
const person = {
name:'lee',
address:'seoul',
__proto__:{age:20}
};
console.log(Object.keys(person)); // ["name", "address"]
console.log(Object.values(person)); // ["lee", "seoul"]
console.log(Object.entries(person)) ; // [["name","lee"], ["address","seoul"]]
Object.entries(person).forEach(([key, value]) => console.log(key, value));
/*
name lee
address seoul
*/