19장 프로토타입
추상화 : 다양한 속성 중에서 프로그램에 필요한 속성만 간추려 내어 표현한 것.
객체 : 속성을 통해 여러 개의 값을 하나의 단위로 구성한 복합적인 자료구조
프로퍼티 : 객체의 상태 데이터
메서드 : 객체의 동작
상속과 프로토타입
상속 : 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아서 사용하는 것.
// 생성자 함수
function Circle(radius) {
this.radius = radius;
this.getArea = function () {
// Math.PI는 원주율을 나타내는 상수다.
return Math.PI * this.radius ** 2;
};
}
// 반지름이 1인 인스턴스 생성
const circle1 = new Circle(1);
// 반지름이 2인 인스턴스 생성
const circle2 = new Circle(2);
// Circle 생성자 함수는 인스턴스를 생성할 때마다 동일한 동작을 하는
// getArea 메서드를 중복 생성하고 모든 인스턴스가 중복 소유한다.
// getArea 메서드는 하나만 생성하여 모든 인스턴스가 공유해서 사용하는 것이 바람직하다.
console.log(circle1.getArea === circle2.getArea); // false
console.log(circle1.getArea()); // 3.141592653589793
console.log(circle2.getArea()); // 12.566370614359172
같은 일을 하는 getArea를 인스턴스마다 갖는다. 동일한 내용인데 하나만 생성해서 모든 인스턴스가 공유하면 안되나?
이런 불필요한 중복을 상속을 통해서 제거할 수있음
// 생성자 함수
function Circle(radius) {
this.radius = radius;
}
// Circle 생성자 함수가 생성한 모든 인스턴스가 getArea 메서드를
// 공유해서 사용할 수 있도록 프로토타입에 추가한다.
// 프로토타입은 Circle 생성자 함수의 prototype 프로퍼티에 바인딩되어 있다.
Circle.prototype.getArea = function () {
return Math.PI * this.radius ** 2;
};
// 인스턴스 생성
const circle1 = new Circle(1);
const circle2 = new Circle(2);
// Circle 생성자 함수가 생성한 모든 인스턴스는 부모 객체의 역할을 하는
// 프로토타입 Circle.prototype으로부터 getArea 메서드를 상속받는다.
// 즉, Circle 생성자 함수가 생성하는 모든 인스턴스는 하나의 getArea 메서드를 공유한다.
console.log(circle1.getArea === circle2.getArea); // true
console.log(circle1.getArea()); // 3.141592653589793
console.log(circle2.getArea()); // 12.566370614359172
프로토타입 객체
프로토타입 객체(이하 프로토타입) 는 객체 간 상속을 구현하기 위해 사용된다. 프로토타입은 부모객체로 다른 객체에게 공유 프로퍼티(메서드) 를 제공한다. 공유받은 자식은 부모의 프로퍼티를 마음대로 사용가능하다. 부모는 자식꺼 사용 안됨.
모든 객체는 [[Prototype]] 내부 슬롯이 있고, 프로토타입의 참조가 저장되어 있다. 객체 생성 방식에 따라서 프로토타입이 결정됨.
객체가 생성될 때, 객체 생성 방식에 따라 프로토타입이 결정되고 Prototype에 참조가 저장됨.
모든 객체는 하나의 프로토타입을 가짐. 모든 프로토 타입은 생성자 함수와 연결됨.
__proto__이용해서 [[Prototype]] 내부슬롯에 간접적으로 접근 가능- 프로토타입의 constructor 프로퍼티는 생성자 함수 가르킴
- 생성자 함수의 prototype 프로퍼티는 프로포타입 객체 가리킴
__proto__ 접근자 프로퍼티
__proto__는 Object.prototype 의 접근자 프로퍼티로, 접근자 함수를 통해서 [[Prototype]] 값에 접근함.
모든 객체는 최초의 조상이 Object.prototype 이므로 Object.prototype 의 프로퍼티와 객체를 상속받고, 그래서 __proto__ 사용할 수 있는 거.
상호 참조에 의해 프로토타입 체인이 생성되는 것을 방지.
프로토타입 체인은 단방향 링크드 리스트로 구현되어야 함.
const parent = {};
const child = {};
// child의 프로토타입을 parent로 설정
child.__proto__ = parent;
// parent의 프로토타입을 child로 설정
parent.__proto__ = child; // TypeError: Cyclic __proto__ value
만약 상속받지않는 객체 생성하면 __proto__ 를 사용할 수 없음. 그런게 있음(Object.prototype를 상속받지 않는 객체
그리고 겸사겸사해서 Object.getPrototpeOf와 Object.setPrototypeOf 사용하라고 함.
const obj = {};
const parent = { x: 1 };
// obj 객체의 프로토타입을 취득
Object.getPrototypeOf(obj); // obj.__proto__;
// obj 객체의 프로토타입을 교체
Object.setPrototypeOf(obj, parent); // obj.__proto__ = parent;
console.log(obj.x); // 1
함수 객체의 prototype 프로퍼티
프로토타입하고 prototype 프로퍼티하고 다른 거임.
prototype 프로퍼티는 함수 객체 고유의 프로퍼티 (일반 객체는 없음)이고, 생성자 함수가 생성할 인스턴스의 프로토타입을 가리킨다.
생성자 함수로서 호출할 수 없는 함수 non-constructor 는 prototype 프로퍼티 소유하지 않고, 프로토타입 생성하지도 않음
⇒ 애초에 객체를 생성할 수 없으니까, 상속이 필요하지도 않으니까
// 화살표 함수는 non-constructor다.
const Person = name => {
this.name = name;
};
// non-constructor는 prototype 프로퍼티를 소유하지 않는다.
console.log(Person.hasOwnProperty('prototype')); // false
// non-constructor는 프로토타입을 생성하지 않는다.
console.log(Person.prototype); // undefined
// ES6의 메서드 축약 표현으로 정의한 메서드는 non-constructor다.
const obj = {
foo() {}
};
// non-constructor는 prototype 프로퍼티를 소유하지 않는다.
console.log(obj.foo.hasOwnProperty('prototype')); // false
// non-constructor는 프로토타입을 생성하지 않는다.
console.log(obj.foo.prototype); // undefined
인스턴스의 __proto__ 와 함수 객체의 prototype 프로퍼티는 동일한 프로토 타입을 가르킴.
// 생성자 함수
function Person(name) {
this.name = name;
}
const me = new Person('Lee');
// 결국 Person.prototype과 me.__proto__는 결국 동일한 프로토타입을 가리킨다.
console.log(Person.prototype === me.__proto__); // true
constructior 프로퍼티와 생성자 함수
모든 프로토 타입은 constructor 프로퍼티를 갖는다. constructor 는 생성자 함수를 가르킨다. 이 연결은 생성자 함수의 함수 객체가 생성될 때 이뤄진다.
// 생성자 함수
function Person(name) {
this.name = name;
}
const me = new Person('Lee');
// me 객체의 생성자 함수는 Person이다.
console.log(me.constructor === Person); // true
리터럴 표기법으로 생성된 객체의 생성자 함수와 프로토타입
// 객체 리터럴
const obj = {};
// 함수 리터럴
const add = function (a, b) { return a + b; };
// 배열 리터럴
const arr = [1, 2, 3];
// 정규표현식 리터럴
const regexp = /is/ig;
리터럴 표기법으로 생성한 객체도 프로토타입이 존재.
❓ 이 객체들의 생성자 함수는 누구일까?
💡이 객체들의 프로토타입의 constructor가 가르키는 객체겠구나
// obj 객체는 Object 생성자 함수로 생성한 객체가 아니라 객체 리터럴로 생성했다.
const obj = {};
// 하지만 obj 객체의 생성자 함수는 Object 생성자 함수다.
console.log(obj.constructor === Object); // true
ㄴ옷ㄱ(대충 상상도 못한 정체 짤) Object가 리터럴 객체의 생성자 였다.
➕ obj.constructor 을 보고 obj 는 프로토타입 객체도 아닌데 어떻게 constructor 프로퍼티를 갖지? 라는 의문이 들었는데, obj.__proto__.constructor 을 뜻하는 듯.
Object 생성자 함수의 경우
2번을 보면, Object 생성자 함수에 인수 전달하지 않거나 undefined, null을 인수로 호출하면 추상연산 OrdinaryObjectCreate 호출해서 Object.prototype을 프르토타입으로 갖는 빈 객체 생성.
추상연산 : ECMAScript 사양에서 내부 동작의 구현 알고리즘을 표현한 것이라는데 잘 모르겠음.
// 2. Object 생성자 함수에 의한 객체 생성
// 인수가 전달되지 않았을 때 추상 연산 OrdinaryObjectCreate를 호출하여 빈 객체를 생성한다.
let obj = new Object();
console.log(obj); // {}
// 1. new.target이 undefined나 Object가 아닌 경우
// 인스턴스 -> Foo.prototype -> Object.prototype 순으로 프로토타입 체인이 생성된다.
class Foo extends Object {}
new Foo(); // Foo {}
// 3. 인수가 전달된 경우에는 인수를 객체로 변환한다.
// Number 객체 생성
obj = new Object(123);
console.log(obj); // Number {123}
// String 객체 생성
obj = new Object('123');
console.log(obj); // String {"123"}
객체 리터럴의 경우
객체 리터럴의 경우 추상연산 OrdinaryObjectCreate를 호출하여 빈 객체 생성하고 프로퍼티를 추가.
OrdinaryObjectCreate 호출해서 빈 객체 생성한는 것 똑같으나, new.target 확인하는 과정이나 프로퍼티 추가하는 등의 약간 차이 있다함.
➕ 함수객체와 Function 객체도 비슷함.
프로토타입은 생성자 함수와 같이 생성되고 서로 prototype, constructor 로 연결되어있음. 즉, 프로토타입과 생성자 함수는 단독으로 존재할 수 없고 쌍으로 존재
⇒ 리터럴 객체도 상속을 위해서 프로토타입이 필요함. 그래서 가상적인 생성자 함수를 갖는거임
프로토타입의 생성 시점
사용자 정의 생성자 함수와 프로토타입 생성 시점
constructor 는 함수 정의가 평가되어 함수 객체를 생성하는 시점에 프로토타입도 같이 생성
non-constructor 는 프로토타입 생성하지 않음.
// 함수 정의(constructor)가 평가되어 함수 객체를 생성하는 시점에 프로토타입도 더불어 생성된다.
console.log(Person.prototype); // {constructor: ƒ}
// 생성자 함수
function Person(name) {
this.name = name;
}
함수 호이스팅에 의해서 함수 선언문은 어떤 코드보다 먼저 평가되어 함수 객체를 만듬
Person.prototype 도 객체이므로 프로토타입객체를 가짐.
생성된 프로토타입의 프로토타입은 언제나 Object.prototype 이다.
빌트인 생성자 함수와 프로토타입 생성 시점
빌트인 생성자 함수는 전역 객체가 생성되는 시점에 생성
이때 프로토타입도 같이 생성돼서 생성자 함수의 prototype 프로퍼티에 바인딩
전역객체 : 코드 시행되기 이전 단계에 JS 엔진에 의해서 생성되는 특수한 객체.
객체가 생성되기 이전에 생성자 함수와 프로토타입은 이미 객체화되어서 존재함. 객체생성되면 [[Prototype]] 내부 슬롯에 할당됨.
객체 생성 방식과 프로토타입의 결정
OrdinaryObjectCreate 은 빈 객체 생성한 후, 객체에 추가할 프로퍼티 목록이 인수로 전달 될경우 프로퍼티를 객체에 추가함.
즉, 프로토타입은 OrdinaryObjectCreate 에 전달되는 인수에 의해 결정됨.
생성자 함수의 프로토타입 객체가 전달됨
객체 리터럴 방식이나 Object 생성자 함수의 경우 Object.prototype 객체
사용자 정의 생성자 함수의 경우 해당 함수의 프로토타입 객체
프로토타입 체인
생성자 함수의 프로토타입 객체의 프로토타입은 Object.prototype 이다.
객체의 프로퍼티에 접근하기 위해 프로퍼티를 검색할 때, [[Prototype]] 내부슬롯 참조 따라서 부모를 따라올라가면서 검색을 한다. 이렇게 부모와 자식간의 연결되어 있는 체인을 프로토타입 체인 이라고 한다. 이게 바로 JS 의 상속 메커니즘
// hasOwnProperty는 Object.prototype의 메서드다.
// me 객체는 프로토타입 체인을 따라 hasOwnProperty 메서드를 검색하여 사용한다.
me.hasOwnProperty('name'); // -> true
===
Object.prototype.hasOwnProperty.call(me, 'name');
위 코드에서 hasOwnProperty 메서드를 처리하기 위해 Object.prototype 에서 해당 메서드를 찾고 call 메서드를 이용해서 this 값에 me 객체를 바인딩해서 호출해준다.
이처럼 대부분의 객체들의 최상위에는 Object.prototype 이 존재한다. 이 Object.prototype 을 프로토타입 체인의 종점이라고 한다.
프로토타입 체인은 상속과 프로퍼티 검색을 위한 메커니즘이다.
이에 반해 식별자는 스코프 체인에서 검색한다. 상위 스코프로 식별자를 검색해나간다. 스코프 체인은 식별자 검색을 위한 메커니즘 이다.
오버라이딩과 프로퍼티 섀도잉
오버라이딩 : 상위 클래스가 가지고 있는 메서드를 하위 클래스가 재정의하여 사용하는 방식
오버로딩 : 함수의 이름은 동일하지만 매개변수의 타입 또는 개수가 다른 메서드 구현하여 구별하는 방식. JS 에서는 직접적인 지원은 안하지만, arguments 객체를 이용해서 구현할 수 있다고 한다.
const Person = (function () {
// 생성자 함수
function Person(name) {
this.name = name;
}
// 프로토타입 메서드
Person.prototype.sayHello = function () {
console.log(`Hi! My name is ${this.name}`);
};
// 생성자 함수를 반환
return Person;
}());
const me = new Person('Lee');
// 인스턴스 메서드
me.sayHello = function () {
console.log(`Hey! My name is ${this.name}`);
};
// 인스턴스 메서드가 호출된다. 프로토타입 메서드는 인스턴스 메서드에 의해 가려진다.
me.sayHello(); // Hey! My name is Lee
위 코드를 실행하면 그림과 같은 프로토타입 체인이 만들어짐.
인스턴스 메서드 sayhello는 프로토타입 메서드 sayhello를 오버라이딩 했다한다.
프로토타입 메서드 sayhello는 가려지게 된다. 이를 프로퍼티 섀도잉 이라고 한다.
프로토타입의 교체
생성자 함수의 의한 프로토타입의 교체
프로토타입을 교체하면 constructor 프로퍼티와 생성자 함수 간의 연결이 파괴됨.
프로토타입 교체해줄 때, construcotr 연결추가해줌.
const Person = (function () {
function Person(name) {
this.name = name;
}
// 생성자 함수의 prototype 프로퍼티를 통해 프로토타입을 교체
Person.prototype = {
// constructor 프로퍼티와 생성자 함수 간의 연결을 설정
constructor: Person,
sayHello() {
console.log(`Hi! My name is ${this.name}`);
}
};
return Person;
}());
const me = new Person('Lee');
// constructor 프로퍼티가 생성자 함수를 가리킨다.
console.log(me.constructor === Person); // true
console.log(me.constructor === Object); // false
인스턴스에 의한 프로토타입의 교체
인스턴스의 __proto__ 접근자 프로퍼티를 통해서 프로토타입에 접근하여 교체할 수 있다.
이렇게 되면 생성자 함수의 prototype 프로퍼티와 프로토타입간의 관계도 끊어진다.
상속관계를 동적으로 변경하는건 번거로우니까 직접 교체하지 말고 직접상속으로 해라.
instanceof 연산자
객체 instanceof 생성자 함수
생성자 함수의 프로토타입이 객체의 프로토타입 체인 상에 존재하면 true 아니면 false 반환
즉, 같은 혈통인지 알 수 있다.
실제 생성자 함수가 누구인지보다(부모가 누구인지), 프로토타입 체인 상에 존재해야(서류상의 가족이여야) true를 반환한다.
const Person = (function () {
function Person(name) {
this.name = name;
}
// 생성자 함수의 prototype 프로퍼티를 통해 프로토타입을 교체
Person.prototype = {
sayHello() {
console.log(`Hi! My name is ${this.name}`);
}
};
return Person;
}());
const me = new Person('Lee');
// constructor 프로퍼티와 생성자 함수 간의 연결은 파괴되어도 instanceof는 아무런 영향을 받지 않는다.
console.log(me.constructor === Person); // false
// Person.prototype이 me 객체의 프로토타입 체인 상에 존재하므로 true로 평가된다.
console.log(me instanceof Person); // true
// Object.prototype이 me 객체의 프로토타입 체인 상에 존재하므로 true로 평가된다.
console.log(me instanceof Object); // true
직접 상속
Object.create
Object.create( {프로토타입}, [{프로퍼티와, 디스크립터}] )
Object.create 의 장점
- new 연산자가 없이도 객체 생성
- 프로토타입 지정할 수 있음
- 객체 리터럴에 의해 생성된 객체도 상속받을 수 있음
Object.create(null) 로 생성한 객체는 Object.prototype 메서드를 호출할 수 없어서 간접적으로 호출한다.
// 프로토타입이 null인 객체를 생성한다.
const obj = Object.create(null);
obj.a = 1;
// console.log(obj.hasOwnProperty('a')); // TypeError: obj.hasOwnProperty is not a function
// Object.prototype의 빌트인 메서드는 객체로 직접 호출하지 않는다.
console.log(Object.prototype.hasOwnProperty.call(obj, 'a')); // true
객체 리터럴 내부에서 __proto__ 에 의한 직접 상속
객체 내부에서 __proto__ 접근자 프로퍼티 이용해서 직접 상속 구현 가능
const myProto = { x: 10 };
// 객체 리터럴에 의해 객체를 생성하면서 프로토타입을 지정하여 직접 상속받을 수 있다.
const obj = {
y: 20,
// 객체를 직접 상속받는다.
// obj → myProto → Object.prototype → null
__proto__: myProto
};
/* 위 코드는 아래와 동일하다.
const obj = Object.create(myProto, {
y: { value: 20, writable: true, enumerable: true, configurable: true }
});
*/
console.log(obj.x, obj.y); // 10 20
console.log(Object.getPrototypeOf(obj) === myProto); // true
정적 프로퍼티/메서드
인스턴스를 생성하지 않아도 참조/호출할 수 있는 프로퍼티/메서드를 말함
인스턴스는 프로포타입 체인 내의 프로퍼티/메서드에만 접근할 수 있고, 생성자 함수의 프로퍼티/메서드에는 인스턴스로 접근할 수 없다.
// 생성자 함수에 추가한 정적 프로퍼티/메서드는 생성자 함수로 참조/호출한다.
Person.staticMethod(); // staticMethod
// 정적 프로퍼티/메서드는 생성자 함수가 생성한 인스턴스로 참조/호출할 수 없다.
// 인스턴스로 참조/호출할 수 있는 프로퍼티/메서드는 프로토타입 체인 상에 존재해야 한다.
me.staticMethod(); // TypeError: me.staticMethod is not a function
➕ prototype 을 # 으로 표기하기도한다고 한다. Object.prototype.isPrototypeOf = Obejct#isPrototypeOf
프로퍼티 존재 확인
in 연산자
key in object
객체 내에 특정 프로퍼티가 존재하는지 여부를 확인한다.
객체의 소유 프로퍼티뿐만 아니라 상속받는 모든 프로토타입의 프로퍼티를 확인함.
in 연산자 대신에 Refelect.has 메서드 사용가능
const person = { name: 'Lee' };
console.log('name' in person); // true
console.log('toString' in person); // true
console.log(Reflect.has(person, 'name')); // true
console.log(Reflect.has(person, 'toString')); // true
Object#hasOwnProperty
객체가 특정 프로퍼티를 소유하는지 확인 (상속은 x)
프로퍼티 열거
for (변수선언문 in 객체)
객체의 모든 프로퍼티를 순회하며 열거함.
상속받은 모든 프로토타입의 프로퍼티 열거
어트리뷰트 [[Enumerable]] 이 false인 값은 열거 안함.
프로퍼티 키가 심벌인 프로퍼티는 열거하지 않는다.
const person = {
name: 'Lee',
address: 'Seoul'
};
// in 연산자는 객체가 상속받은 모든 프로토타입의 프로퍼티를 확인한다.
console.log('toString' in person); // true
// for...in 문도 객체가 상속받은 모든 프로토타입의 프로퍼티를 열거한다.
// 하지만 toString과 같은 Object.prototype의 프로퍼티가 열거되지 않는다.
for (const key in person) {
console.log(key + ': ' + person[key]);
}
// name: Lee
// address: Seoul
➕ 열거할 때 순서를 보장하지는 않지만, 대부분 브라우저에서 순서를 보장하고 정렬실시함.
배열도 객체라서 상속받은 프로퍼티가 포함될 수 있어서 for ... in 대신에 일반적인 for문, for .. of 문, Array#forEach 를 권장
const arr = [1, 2, 3];
arr.x = 10; // 배열도 객체이므로 프로퍼티를 가질 수 있다.
for (const i in arr) {
// 프로퍼티 x도 출력된다.
console.log(arr[i]); // 1 2 3 10
};
// arr.length는 3이다.
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]); // 1 2 3
}
// forEach 메서드는 요소가 아닌 프로퍼티는 제외한다.
arr.forEach(v => console.log(v)); // 1 2 3
// for...of는 변수 선언문에서 선언한 변수에 키가 아닌 값을 할당한다.
for (const value of arr) {
console.log(value); // 1 2 3
};
Object.keys/values/entries
객체 자신의 고유 프로퍼티만 열거할 수 있는 메서드들
- keys : 프로퍼티 키를 배열로 반환
- values : 키와 값으 쌍을 배열로 반환
- entires : 키와 값의 쌍의 배열을 배열에 담아 반환
console.log(Object.keys(person)); // ["name", "address"]
console.log(Object.values(person)); // ["Lee", "Seoul"]
console.log(Object.entries(person)); // [["name", "Lee"], ["address", "Seoul"]]