[Javascript] 프로토타입(2) 프로토타입 객체

🎯 __proto__ 접근자 프로퍼티

브라우저 콘솔창에 객체를 생성하고 찍어보면 내가 입력한 프로퍼티 외에도 [[Prototype]]: Object라는 항목이 같이 뜬다.

이때 얘를 펼쳐보면 뭔가 잔뜩 나오는데, 이게 프로토타입이다.

프로토타입 직접 살펴보기

 

 

__proto__는 접근자 프로퍼티

여기서 [[Prototype]]에 있는 프로토타입에 접근하기 위해 사용되는 것이 __proto__ 접근자 프로퍼티이다.

접근자 프로퍼티는 자체적인 값을 가지고 있는게 아니라, get / set와 같은 함수를 호출하여 사용된다.

const obj = {}
const parent = {x: 1}

obj.__proto__   // 여기서는 get __object__를 호출하고
obj.__proto__ = parent   // 여기서는 set __object__를 호출함

console.log(obj.x)  // 1

 

__proto__ 는 상속을 통해 사용됨

__proto__ 는 객체가 직접 소유하는 프로퍼티가 아니라, Object.prototype의 프로퍼티이다.

그렇기때문에 상속을 통해 Object.prototype.__proto__를 사용할 수 있다.

const obj = {};

// obj는 직접 __proto__ 프로퍼티를 가지고 있지 않음
console.log(obj.hasOwnProperty('__proto__')); // false

// 하지만 __proto__를 사용할 수 있음
console.log(obj.__proto__ === Object.prototype); // true

// __proto__는 실제로 Object.prototype의 프로퍼티임
console.log(Object.prototype.hasOwnProperty('__proto__')); // true


// 즉, 이런 형태를 가지는 거임
obj ---> obj.__proto__ ---> Object.prototype
// obj 자체는 비어있음 {}
// obj는 Object.prototype을 상속받음
// Object.prototype에 __proto__ getter/setter가 정의되어 있음

좀 더 정리를 하자면

1. 모든 객체는 Object.prototype을 상속받음
2. __proto__는 Object.prototype에 정의된 특별한 접근자 프로퍼티
3. 모든 객체는 이 __proto__를 상속받아 사용
4. 이런 방식으로 프로토타입 체인 조작이 가능

왜 이렇게 불편하게 쓰는지? = 프로토타입 체인이 생성되는 것을 방지하려구

const parent = {}
const child = {}

child.__proto__ = parent
parent.__proto__ = child  // TypeError: Cyclic __proto__ value

위의 예시처럼 서로의 프로토타입을 설정하면 타입에러가 발생한다.
이런 현상을 방지하기 위해서 프로토타입 체인은 단방향 링크드리스트 형태로 구현이 되어야 한다. 순환 참조를 막기 위해서 __proto__ 접근자 프로퍼티를 통해서 접근하고 교체하도록 구현이 되어있는 것..

 

 

사실은 근데, 권장되지 않음

ES5까지는 __proto__ 접근자는 포함되지 않은 비표준이었다. ES6에 와서야 지원하는 기능이지만, 권장되지는 않는다.

왜냐하면, 모든 객체가 __proto__를 사용할 수 있는게 아니기 때문에...

const obj = Object.create(null)
console.log(obj.__proto__) // undefined

 

그래서 권장되는 방법은

• 참조하고 싶을 때 : Object.getPrototypeOf
• 교체하고 싶을 때: Object.setPrototypeOf

const obj = {}
const parent = {x : 1}

Object.getPrototypeOf(obj)  // obj의 프로토타입을 가져옴
Object.setPrototypeOf(obj, parent)   // obj의 프로토타입을 parent로 교체

console.log(obj.x)  // 1

 

 

---

📌 함수 객체의 prototype 프로퍼티

함수도 객체이므로 prototype 프로퍼티를 가진다.

이때 함수 객체가 소유하는 prototype 프로퍼티는 생성자 함수가 생성할 인스턴스의 프로토타입을 가리킨다.

(function () {}).hasOwnProperty('prototype')

그래서 이런식으로 빈함수도 prototype을 가진다.

왜냐하면 이 함수를 나중에 생성자 함수로 사용할 수 있기 때문에

 

하지만, 일반 객체의 경우에는 prototype 프로퍼티를 가지지 않는다.

(객체의 경우 __proto__ 는 가지지만, prototype 프로퍼티는 가지지 않음)

const obj = {};
console.log(obj.prototype); // undefined

 

 

그리고, 함수는 생성자 함수로 사용할 수 있기 때문에 prototype 프로퍼티를 가지는데,

만약 생성자 함수로 사용할 수 없는 함수(non-constructor)인 화살표 함수와 ES6 메서드 축약 표현으로 정의된 메서드는 prototype 프로퍼티를 가지지 않음

// 화살표 함수
const arrowFunc = () => {};
console.log(arrowFunc.prototype); // undefined

// ES6 축약형
const obj = {
  foo() {}
}
console.log(obj.foo.hasOwnProperty('prototype')  // false

 

하지만... __proto__는 가짐... (= non-constructor 함수는 prototype 프로퍼티는 가지지 않지만 __proto__는 가짐)

__proto__와 prototype 프로퍼티는 서로 동일한 프로토타입을 가리키지만 프로퍼티를 사용하는 주체가 다르다!

// 화살표 함수
const arrowFunc = () => {};
console.log(arrowFunc.prototype); // undefined
console.log(arrowFunc.__proto__ === Function.prototype); // true

// ES6 메서드 축약 표현
const obj = {
    method() {}  // 메서드 축약 표현
};
console.log(obj.method.prototype); // undefined
console.log(obj.method.__proto__ === Function.prototype); // true

// 일반 함수와 비교
function normalFunc() {}
console.log(normalFunc.prototype); // {constructor: ƒ}
console.log(normalFunc.__proto__ === Function.prototype); // true

 

---

🔨 constructor

// 생성자 함수
function Person(name) {
  this.name = name
}

const me = new Person('Meme')

console.log(me.constructor === Person)   // true

모든 프로토타입은 자신을 참조하고 있는 생성자 함수를 가리키는 constructor 프로퍼티를 가진다. 

이 연결은 생성자 함수가 생성될 때(= 함수 객체가 생성될 때) 이뤄진다.

 

---

객체를 생성하는 방법 중, 생성자 함수가 아닌 리터럴 표기법에 의해 생성된 객체는 프로토타입이 존재할까?

// 이런애들
const obj = {}
const add = function(a, b) {return a + b}
const arr = [1, 2, 3]
const regexp = /is/ig

→ ⭕, 하지만 이때 constructor 프로퍼티가 가리키는 생성자 함수가 반드시 객체를 생성한 생성자 함수라고 할 수는 없다.

 

// Object 생성자 함수가 아니라, 객체 리터럴로 만들었지만
const obj = {}
console.log(obj.constructor === Object)   // true, Object함수라고 나옴


// 함수도 Function 생성자 함수가 아니라, 함수 선언문으로 만들었음
const foo() {}
console.log(foo.constructor === Function)  // true

프로토타입은 생성자 함수와 같이 생성되고, prototype, constructor 프로퍼티에 의해 연결되어 있기 때문에

즉, 프로토타입과 생성자 함수는 단독으로 존재할 수 없고 늘 쌍으로 존재한다.

 

function Person(name) {
    this.name = name;
}

const person1 = new Person('Kim');

// 순환 관계 확인
console.log(Person.prototype.constructor === Person); // true
console.log(person1.__proto__ === Person.prototype); // true
console.log(person1.constructor === Person); // true

 

 

• JavaScript 엔진은 함수를 생성할 때 prototype 객체도 같이 생성
• 이 prototype 객체는 자동으로 constructor 프로퍼티를 가짐
• constructor는 다시 원래의 함수를 가리킴
• 객체가 생성될 때 자동으로 prototype을 __proto__로 링크

즉,

• 리터럴로 생성하든, 생성자 함수로 생성하든
• 모든 객체는 반드시 어떤 생성자 함수의 prototype과 연결됨
• 이 연결은 __proto__와 constructor 프로퍼티를 통해 유지됨

 

 

---

그럼 프로토타입은 언제 생성이 되는 걸까?

=> 아까 프로토타입과 생성자 함수는 쌍으로 존재해야 한다 했으므로, 생성자 함수가 생성되는 시점에 프로토타입도 생성된다.

• 사용자 정의 생성자 함수: 생성자 함수로서 호출할 수 있는 함수(constructor) 객체가 생성되는 시점에 프로토타입도 생성됨

// 함수 정의가 평가되어 함수 객체를 생성하는 시점에 프로토타입도 생성
console.log(Person.prototype) // {constructor: f}

// 생성자 함수
function Person(name) {
	this.name = name
}

• 빌트인 생성자 함수(Object, String, Number, Function, Array, RegExp, Date, Promise): 빌트인 생성자 함수가 생성되는 시점에 생성됨 = 전역 객체가 생성되는 시점에 생성

// 전역 객체(Global Object)의 프로퍼티로 존재하는 빌트인 생성자 함수들
console.log(window.Object === Object);  // true (브라우저 환경)
console.log(window.Array === Array);    // true
console.log(window.Function === Function);  // true

const obj = new Object()
console.log(obj.__proto__ === Object.prototype); // true

 

 

추상연산 OrdinaryObjectCreate

=  JavaScript에서 새로운 객체를 만들고 프로토타입을 연결하는 내부 메커니즘

 

• 객체 리터럴로 객체를 생성할 때
• Object 생성자 함수로 객체를 생성할 때
• 생성자 함수로 생성할 때
• Object.create() 메서드를 사용할 때

등등의 상황에서 쓰임