프로토타입 4편

1. 직접 상속

Object.create에 의한 직접 상속이 가능하다. Object.create 메서드는 명시적으로 프로토타입을 지정하여 새로운 객체를 생성한다. Object.create메서드도 다른 객체 생성 방식과 마찬가지로 추상 연산 OrdinaryObjectCreate를 호출한다.

Object.create메서드의 첫 번째 매개변수에는 생성할 객체의 프로토타입으로 지정할 객체를 전달한다. 두 번째 매개변수에는 생성할 객체의 프로퍼티 키와 프로퍼티 디스크립터 객체로 이루어진 객체르 전달한다. 이 객체 형식은 Object.defineProperties 메서드의 두번째 인수와 동일하다. 두번째 인수는 옵션이므로 생략이 가능하다.

//프로토타입이 null인 객체를 생성, 즉, 생성된 객체는 프로토타입 체인의 종점에 위치한다.
let obj = Object.create(null)
console.log(Object.getPrototypeOf(obj) === null) // true
console.log(obj.toString()) // 불가, 프로토타입 체인에서 없다.
// obj -> obj.prototype -> null
// obj = {} 와 동일
obj = Object.create(Object.prototype)
console.log(Object.getPrototypeOf(obj) === Object.prototype) // true
//  obj = {x : 1}과 동일하다.
obj = Object.create(Object.prototype, {
    x : {value : 1, writable : true, enumerable: true, configurable: true}
})

console.log(obj.x) // 1
console.log(Object.getPrototypeOf(obj) === Object.prototype) // true

const myProto = { x : 10 }
// 임의의 객체를 직접 상속받는다.
// obj -> myProto -> Object.prototype -> null
obj = Object.create(myProto)
console.log(obj.x) // 10
console.log(Object.getPrototypeOf(obj) === myProto) // true

function Person(name){
    this.name = name
}
// obj - > Person.prototype -> Object.prototype -> null
obj = Object.create(Person.prototype)
obj.name = 'lee'
console.log(obj.name) // lee
console.log(Object.getPrototypeOf(obj) === Person.prototype) // true

이 처럼 Object.create 메서드는 첫 번째 매개변수에 전달한 객체의 프로토타입 체인에 속하는 객체를 생성한다. 즉, 객체를 생성하면서 직접적으로 상속을 구현하는 것이다. 이 메서드의 장점은 다음과 같다.

• new연산자 없이도 객체를 생성할 수 있다.
• 프로토타입을 지정하면서 객체를 생성할 수 있다.
• 객체 리터럴에 의해 생성된 객체도 상속받을 수 있다.

2. 객체 리터럴 내부에서 proto에 의 한 직접 상속

Object.create 메서드에 의한 직접 상속은 두 번째 인자로 프로퍼티를 정의하는 것은 번거롭다. 일단 객체를 생성한 이후 프로퍼티를 추가하는 방법도 있으나, 이 또한 깔끔한 방법은 아니다.

ES6에서는 객체 리터럴 내부에서 __proto접근자 프로퍼티를 사용하여 직접 상속을 구현할 수 있다.

const myProto = {x : 10}
const obj = {
    y : 20,
    __proto__ : myProto
}

console.log(obj.x, obj.y) // 10 20
console.log(Object.getPrototypeOf(obj) === myProto) // true

이 방법이 더 쉽고 간단하긴 하다.

3. 정적 프로퍼티/메서드

정적 프로퍼티/메서드는 생성자 함수로 인스턴스를 생성하지 않아도 참조/호출할 수 있는 프로퍼티/메서드를 말한다.

function Person(name){
    this.name = name
}
//프로토타입 메서드
Person.prototype.hello = function(){
    console.log(`my name is ${this.name}`)
}
// 정적 프로퍼티
Person.staticProp = 'static prop'
// 정적 메서드
Person.staticMethod = function(){
    console.log("static metthod")
}

const me = new Person('lee')
Person.staticMethod() // static metthod
me.hello() // my name is lee
me.staticMethod(; // error

me.staticMethod()는 error가 생긴다. 이는 정적 프로퍼티/메서드는 생성자 함수가 생성한 인스턴스로 참조/호출할 수 없기 때문이다.

인스턴스로 참조/호출할 수 있는 프로퍼티/메서드는 프로토타입 체인 상에 존재해야 한다.

Person 생성자 함수는 개체이므로 자신의 프로퍼티, 메서드를 소유할 수 있다. Person 생성자 함수 객체가 소유한 프로퍼티/메서드를 정적 프로퍼티/메서드라고 한다. 정적 프로퍼티/메서드는 생서자 함수가 생성한 인스턴스로 참조/호출할 수 없다.

참고로, prototype 프로퍼티와 정적 프로퍼티의 차이는 prototype 프로퍼티는 객체에 상속되지만, 정적 프로퍼티는 상속되지 않는다. 이는 Object.create()는 일반적인 객체들이 호출이 불가능하지만, Object.prototype.hasOwnProperty()는 상속받기 때문에 호출이 가능하다.

4. 프로퍼티 존재 확인

• in 연산자
  in 연산자는 객체 내에 특정 프로퍼티가 존재하는지 여부를 확인한다.

key in obj

const person ={
    name : 'lee',
    address: 'Seoul'
}

console.log('name' in person) // true
console.log('address' in person) // true
console.log('age' in person) // fasle
console.log('toString' in person) // true

in 연산자는 확인 대상 객체의 프로퍼티 뿐만 아니라, 확인 대상 객체가 상속받은 모든 프로토타입의 프로퍼티를 확인하므로 주의가 필요하다. person 객체에는 toString이라는 프로퍼티가 없지만, 다음의 코드 실행은 true이다.

toString은 Object.prototype의 메서드이지, person의 메서드가 아니다.

es6에서는 in과 동일한 기능을 하는 Reflect.has 메서드를 샤용할 수 있다.

const person ={
    name : 'lee',
    address: 'Seoul'
}

console.log(Reflect.has(person,'name')) // true
console.log(Reflect.has(person,'age')) // false

• Object.prototype.hasOwnProperty 메서드
  Object.prototype.hasOwnProperty() 메서드를 사용해도 객체에 특정 프로퍼티가 존재하는지 확인할 수 있다.

const person ={
    name : 'lee',
    address: 'Seoul'
}

console.log(person.hasOwnProperty('name')) // true
console.log(person.hasOwnProperty('age')) // false
console.log(person.hasOwnProperty('toString')) // false

Object.prototype.hasOwnProperty 메서드는 이름에서도 알 수 있듯이 인수로 전달받은 프로퍼티 키가 객체 고유의 프로퍼티 키인 경우에만 true를 반환하고, 상속받은 프로토타입의 프로퍼티 키인 경우, false를 반환한다.

따라서 toString 에서 false가 나오는 것이다.

5. 프로퍼티 열거

객체의 모든 프로퍼티를 순회하며 열거하고 싶다면 for...in문을 사용하는 것이 좋다.

const person = {
    name : 'lee',
    address : 'Seoul'
}

for(const key in person){
    console.log(key + ':' + person[key])
}
/**
 name:lee
address:Seoul
 */

for ... in 문은 in 연산자처럼 순회 대상 객체의 프로퍼티 뿐만아니라 상속받은 프로토타입의 프로퍼티까지 열거한다.

하지만 우리가 알고있는 Object.prototype의 프로퍼티들이 열거되지 않았을 것이다. 이는 해당 프로퍼티의 프로퍼티 어트리뷰트 [[Enumerable]]이 false이기 때문이다.

다만 for...in문은 프로퍼티를 열거할 때 순서를 보장하지 않으므로 주의하길 바란다.

배열도 결국은 객체이므로 이를 이용하여 순회할 수 있지만, 배열에는 forEach나, for ... of문을 사용하는 것이 좋다.

6. 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' ]

age는 prototype의 프로퍼티이기 때문에 나오지 않는다. Object.keys() 뿐만 아니라, values를 이용하면 값을 배열로 반환한다.

const person = {
    name : 'lee',
    address : 'Seoul',
    __proto__ : {age: 20}
}

console.log(Object.values(person)) // [ 'lee', 'Seoul' ]

뿐만 아니라, entries 를 사용하면 키와 값을 쌍으로 배열로 받을 수 있다.

const person = {
    name : 'lee',
    address : 'Seoul',
    __proto__ : {age: 20}
}

console.log(Object.entries(person)) //[ [ 'name', 'lee' ], [ 'address', 'Seoul' ] ]

길고 길었던 prototype의 길이 끝났다... 만세!