__proto__ 접근자 프로퍼티와 함수 객체만이 가지는 prototype 프로퍼티는 결국 동일한 프로토타입을 가리킴
구분
소유
값
사용 주체
사용 목적
__proto__
모든 객체
프로토타입의 참조
모든 객체
객체가 자신의 프로토타입에 접근 또는 교체하기 위해 사용
prototype 프로퍼티
constructor
프로포타입의 참조
생성자 함수
생성자 함수가 자신이 생성할 객체의 프로토타입을 할당하기 위해 사용
프로토타입의 constructor 프로퍼티와 생성자 함수
모든 프로토타입은 constructor 프로퍼티를 갖음
자신을 참조하고 있는 생성자 함수를 가리킴
생성자 함수가 생성될 때 연결이 이뤄짐
리터럴 표기법에 의해 생성된 객체의 생성자 함수와 프로토타입
리터럴 표기법에 의해 생성된 객체의 경우 프로토타입의 constructor 프로퍼티가 가리키는 생성자 함수가 반드시 객체를 생성한 생성자 함수는 아님
객체 리터럴이 평가될 때는 추상연산 OrdinaryObjectCreate를 호출해 빈 객체를 생성하고 프로퍼티를 추가하도록 정의되어 있음
리터럴 표기법에 의해 생성된 객체도 상속을 위해 프로토타입이 필요하므로 가상적인 생성자 함수를 갖음
프로토타입과 생성자 함수는 단독으로 존재할 수 없고 언제나 쌍으로 존재함
프로토타입의 생성 시점
프로토타입은 생성자 함수가 생성되는 시점에 더불어 생성됨
생성자 함수는 사용자 정의 생성자 함수와 자바스크립트가 기본 제공하는 빌트인 생성자 함수로 구분됨
객체가 생성되기 이전에 생성자 함수와 프로토타입은 이미 객체화되어 존재함!
사용자 정의 생성자 함수와 프로토타입 생성 시점
생성자 함수로서 호출할 수 있는 함수는 함수 정의가 평가되어 함수 객체를 생성하는 시점에 프로토타입도 더불어 생성됨
함수 선언문이 런타임 이전에 실행되므로 이 때, 함수 객체가 생성되면서 프로토타입도 더불어 생성됨
빌트인 생성자 함수와 프로토타입 생성 시점
일반 함수와 마찬가지로 빌트인 생성자 함수가 생성되는 시점에 프로토타입이 생성됨
모든 빌트인 생성자 함수는 전역 객체가 생성되는 시점에 생성됨
객체 생성 방식과 프로토타입의 결정
추상 연산 OrdinaryObjectCreate는 필수적으로 자신이 생성할 객체의 프로토타입을 인수로 전달 받음
자신이 생성할 객체에 추가할 프로퍼티 목록을 옵션으로 전달할 수 있음
빈 객체를 생성한 후, 객체에 추가할 프로퍼티 목록이 인수로 전달된 경우 프로퍼티를 객체에 추가함
프로토타입은 추상 연산에 전달되는 인수에 의해 결정됨
객체 리터럴에 의해 생성되는 객체의 프로토타입은 Object.prototype임 (리터럴 내부에 프로퍼티 추가)
Object 생성자 함수에 의해 생성되는 객체의 프로토타입은 Object.prototype임 (빈 객체에 프로퍼티 추가)
new 연산자와 함께 생성자 함수에 의해 생성되는 객체의 프로토타입은 생성자 함수의 prototype 프로퍼티에 바인딩되어 있는 개체임
프로토타입 체인
자바스크립트는 객체의 프로퍼티에 접근하려고 할 때 해당 객체에 접근하려는 프로퍼티가 없다면 [[Prototype]] 내부 슬롯의 참조를 따라 자신의 부모 역할을 하는 프로토타입의 프로퍼티를 순차적으로 검색함
이를 프로토타입 체인이라 함
프로토타입 체인은 자바스크립트가 객체지향 프로그래밍의 상속을 구현하는 매커니즘
프로토타입 체인의 최상위(종점)는 언제나 Object.prototype
프로토타입 체인의 종점에서도 프로퍼티를 검색할 수 없는 경우 null이 아닌 undefined 반환함
프로토타입 체인은 상속과 프로퍼티 검색을 위한 매커니즘
스코프 체인과 프로토타입 체인은 서로 연관없이 별도로 동작하는 것이 아니라 서로 협력하여 식별자와 프로퍼티를 검색하는 데 사용함
call 메서드
this로 사용할 객체를 전달하면서 함수를 호출함
오버라이딩과 프로퍼티 섀도잉
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();
프로토타입이 소유한 프로퍼티를 프로토타입 프로퍼티라고 함
인스턴스가 소유한 프로퍼티를 인스턴스 프로퍼티라고 함
프로토타입 프로퍼티와 같은 이름의 프로퍼티를 인스턴스에 추가하면 프로토타입 프로퍼티를 덮어쓰는 것이 아니라 인스턴스 프로퍼티로 추가됨
프로퍼티 섀도잉 : 상속 관계에 의해 프로퍼티가 가려지는 현상
오버라이딩 : 상위 클래스가 가지고 있는 메서드를 하위 클래스가 재정의하여 사용하는 방식
오버로딩 : 함수의 이름은 동일하지만 매개변수의 타입 또는 개수가 다른 메서드를 구현하고 매개변수에 의해 메서드를 구별하여 호출하는 방식 자바스크립트는 오버로딩을 지원하지 않지만 구현할 수는 있음
프로토타입 프로퍼티를 변경 또는 삭제하려면 하위 객체를 통해 프로토타입 체인으로 접근하는 것이 아닌 프로토타입에 직접 접근해야함!
프로토타입 교체
프로토타입은 임의의 다른 객체로 변경가능함
생성자 함수 또는 인스턴스에 의해 교체됨
생성자 함수에 의한 프로토타입의 교체
const Person = (function() {
function Person(name) {
this.name = name;
}
// 생성자 함수의 prototype 프로퍼티를 통해 프로토타입 교체
Person.prototype = {
constructor : Person, // constructor 프로퍼티와 생성자 함수 간의 연결 설정 추가!
sayHello() {
console.log(`Hi! My name is ${this.name}`);
}
}
return Person;
}());
생성자 함수의 prototype 프로퍼티를 사용해 프로토타입 교체 => 미래에 생성할 인스턴스의 프로토타입 교체
Person 생성자 함수가 생성할 객체의 프로토타입을 객체 리터럴로 교체
이때, 프로토타입으로 교체한 객체 리터럴에는 constructor 프로퍼티가 없음 => 자바스크립트 엔진이 프로토타입을 생성할 때 암묵적으로 추가하는 프로퍼티이므로
인스턴스에 의한 프로토타입의 교체
인스턴스의 __proto__ 접근자 프로퍼티를 통해 프로토타입 교체 => 이미 생성된 객체의 프로토타입 교체
역시 constructor 프로퍼티 연결이 파괴됨
function Person(name) {
this.name = name;
}
const me = new Person('Lee');
const parent = {
sayHello() {
console.log(`Hi! My name is ${this.name}`);
}
};
// me 객체의 프로토타입을 parent 객체로 교체
Object.setPrototypeOf(me, person);
instanceof 연산자
이항 연산자
좌변의 객체를 가리키는 식별자, 우변에 생성자 함수를 가리키는 식별자를 피연산자로 받음
만약 우변의 피연산자가 함수가 아닌 경우 TypeError를 반환
우변의 생성자 함수의 prototype에 바인딩된 객체가 좌변의 객체의 프로토타입 체인 상에 존재하면 true, 아니면 false
생성자 함수의 prototype에 바인딩된 객체가 프로토타입 체인 상에 존재하는지 확인함
객체 instaneof 생성자 함수
function Person(name) {
return this.name;
}
const me = new Person('d');
console.log(me instaneof Person); // true, Person.prototype이 me 객체의 프로토타입 체인 상에 존재하므로
console.log(me instaneof Object); // true, Object.prototype이 me 객체의 프로토타입 체인 상에 존재하므로
직접 상속
Object.create에 의한 직접 상속
Object.create 메서드는 명시적으로 프로토타입을 지정해 새로운 객체를 생성함
첫 번째 매개변수에 전달한 객체의 프로토타입 체인에 속하는 개체를 생성함
즉, 객체를 생성하면서 직접적으로 상속을 구현하는 것
new 연산자 없이도 객체를 생성할 수 있음
프로토타입을 지정하면서 객체 생성 가능
객체 리터럴에 의해 생성된 객체 상속 가능
객체 리터럴 내부에서 __proto__에 의한 직접 상속
객체 리터럴에 의해 객체를 생성하면서 프로토타입을 지정하여 직접 상속받기 가능
정적 프로퍼티/메서드
생성자 함수로 인스턴스를 생성하지 않아도 참조/호출할 수 있는 프로퍼티/메서드
생성자 함수가 생성한 인스턴스로 참조/호출 불가
정적 프로퍼티/메서드는 인스턴스의 프로토타입 체인에 속한 객체의 프로퍼티/메서드가 아님!
Object.create는 정적 메서드임
인스턴스/프로토타입 메서드 내에서 this를 사용하지 않으면 정적 메서드로 변경 가능
정적 메서드는 인스턴스 생성하지 않아도 호출 가능
function Person(name) {
this.name = name;
}
Person.staticProp = 'static';
Person.staticMethod = function () {
console.log('static method');
}
Person.staticMethod(); // static method
me.staticMethod(); // TypeError : me.staticMethod is not a function
프로퍼티 존재 확인
in 연산자
객체 내에 특정 프로퍼티가 존재하는지 여부 확인
확인 대상 객체의 프로퍼티뿐만 아니라 확인 대상 객체가 상속받는 모든 프로토타입의 프로퍼티를 확인함
ES6에 도입한 Reflect.has 대신 사용 가능
key in object
Object.prototype.hasOwnProperty 메서드
객체에 특정 프로퍼티가 존재하는지 확인 가능
인수로 전달받은 프로퍼티 키가 객체 고유의 프로퍼티 키일 경우에만 true 반환, 상속받은 프로퍼티 키인 경우 false 반환
프로퍼티 열거
for ... in 문
객체의 모든 프로퍼티를 순회하며 열거하기 위해 사용
객체의 프로퍼티 개수만큼 순회함
in 연산자 처럼 상속받은 프로퍼타입의 프로퍼티까지 열거함
이때 Object.prototype의 프로퍼티 키가 열거되지 않는 이유는 해당 프로퍼티의 프로퍼티 어트리뷰트 [[Enumerable]] 값이 false이기 때문
객체의 프로토타입 체인 상에 존재하는 모든 프로토타입의 프로퍼티 중에서 프로퍼티 어트리뷰트 [[Enumerable]]의 값이 true인 프로퍼티를 순회하며 열거함
키가 심벌인 프로퍼티는 열거하지 않음
키의 순서가 보장되지 않음
for (변수 선언문 in 객체) {...}
Object.keys / values / entries 메서드
Object.keys : 객체 자신의 열거 가능한 프로퍼티 키를 배열로 반환
Object.values : 객체 자신의 열거 가능한 프로퍼티 값을 배열로 반환
Object.entries : 객체 자신의 열거 가능한 프로퍼티 키와 값의 쌍의 배열을 배열에 담아 반환
