[Javascript] 프로토타입과 프로토타입 상속

📌 출처 : https://ko.javascript.info/

프로토타입 상속

[[Prototype]]

정의

자바스크립트의 객체는 [[Prototype]]이라는 숨김 프로퍼티를 갖는다. 이 값은 null이거나 다른 객체에 대한 참조가 되는데, 다른 객채를 참조하는 경우 그 참조 대상을 프로토타입이라 부른다.

동작방식

const animal = {
	eats: true
}
const rabbit = {
	jumps:true
}

console.log(rabbit.eats) // undefined

Object.setPrototypeOf(rabbit, animal) //rabbit.__proto__ = animal;

console.log(rabbit.eats) // true

프로퍼티가 정의된 객체 두 개의 예시를 보자.

객체 rabbit가 갖는 프로퍼티에 접근할 때, 해당 프로퍼티가 없으면 자바스크립트는 자동으로 프로토타입에서 프로퍼티를 찾는다. 객체 rabbit은 jumps라는 프로퍼티만을 갖고 있다. 그런데 rabbit은 동시에 animal이기 때문에 eats라는 프로퍼티에도 접근이 가능하게 하고싶다면, 어떻게 할까? 이 때, 프로토타입 상속이라는 동작 방식을 사용할 수 있다.

 

[[Prototype]] 프로퍼티는 내부 프로퍼티이면서 숨김 프로퍼티이지만 다양한 방법을 사용해 개발자가 값을 설정할 수 있다. 위 예시처럼 __proto__을 사용하면 값을 설정할 수 있다. 이에 따라 rabbit에 animal이라는 프로토타입을 지정해주면, 여전히 rabbit에는 eats라는 프로퍼티가 존재하지 않지만, 해당 프로퍼티가 없으면 자동으로 프로토타입에서 프로퍼티를 찾아 접근이 가능해진다.

 

즉 객체 rabbit에서 프로퍼티에 접근하고 싶지만 해당 프로퍼티가 없다면 자동으로 animal이라는 프로토타입 객체에서 프로퍼티에 접근하게 된다. 이러한 관계를 “rabbit의 프로토타입은 animal이다” 혹은 “rabbit은 animal을 상속받는다”고 말할 수 있다. 그리고 이렇게 상속받은 프로퍼티를 ‘상속 프로퍼티’라고 한다.

 

📌 __proto__는 [[Prototype]] 용 getter, setter이다. 하위 호환성 때문에 여전히 __proto__를 사용할 수 있지만 근래에는 Object.getPrototypeOf나 Object.setPrototypeOf을 써서 프로토타입을 get하거나 set 한다고 한다.

 

프로토타입 상속은 프로퍼티 뿐만아니라 메소드도 가능하다.

const animal = {
	eats: true,
	walk() {
		console.log("동물은 걸을 수 있습니다.")
	}
}
const rabbit = {
	jumps:true,
	__proto__: animal
}

rabbit.walk() // 동물은 걸을 수 있습니다.

프로토타입 체인은 더욱 길어질 수 있다.

const animal = {
	eats: true,
	walk() {
		console.log("동물은 걸을 수 있습니다.")
	}
}

const rabbit = {
	jumps:true,
	__proto__: animal
}

const longEar = {
	earLength: 10,
	__proto__: rabbit
}

longEar.walk() // 동물은 걸을 수 있습니다.
console.log(longEar.jumps) // true

단, 프로토타입 체이닝엔 두 가지 제약사항이 있다.

1. 순환 참조는 허용되지 않는다. __proto__를 이용해 닫힌 형태로 다른 객체를 참조하면 에러가 발생한다.
2. __proto__의 값은 객체나 null만 가능하다. 다른 자료형은 무시된다.
3. 객체는 두 개의 객체를 상속받지 못한다.

프로토타입은 읽기 전용이다

프로토타입은 프로퍼티를 읽을 때만 사용합니다.

프로퍼티를 추가, 수정하거나 지우는 연산은 객체에 직접 해야 합니다.

객체 rabbit에 매서드 walk를 직접 할당해 보겠습니다.

const animal = {
	eats:true,
	walk() {
		console.log("동물은 걸을 수 있습니다.")
	}
}

const rabbit = {
	__proto__: animal
}

rabbit.walk = () => {console.log("토끼가 깡충깡충 뒵니다.")}

rabbit.walk() // 토끼가 깡충깡충 뜁니다.

rabbit.walk()를 호출하면 프로토타입에있는 메서드가 실행되지 않고, 객체 rabbit에 직접 추가한 메서드가 실행된다. 그런데 접근자 프로퍼티는 setter 함수를 사용해 프로퍼티에 값을 할당하므로 접근자 프로퍼티에 값을 할당 (**)하면 객체(admin)에 프로퍼티(fullName)가 추가되는게 아니라 setter 함수가 호출되면서 위 예시와는 조금 다르게 동작한다.

아래 예시에서 admin.fullName이 의도한 대로 잘 작동하는지 확인해보자

const user = {
	name: "John",
	surname:"Smith",

	set fullName(value) {
		[this.name, this.surname] = value.split(" ")
	},

	get fullName() {
		return `${this.name} ${this.surname}`
	}
}

const admin = {
	__proto__: user,
	isAdmin: true
}

console.log(admin.fullName) // "John Smith" (*)

admin.fullName = "Alice Cooper" // setter 함수 실행
console.log(admin.fullName) // "Alice Cooper" (**)
console.log(user.fullName) // "John Smith"

this가 나타내는 것

this는 프로토타입에 영향을 받지 않는다. 메서드를 객체에서 호출했든 프로토타입에서 호출했든 상관없이 this는 언제나 . 앞에 있는 객체이다.

this는 객체 자신의 프로퍼티나 메소드를 참조하기 위한 자기참조 변수다.
this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 따라 동적으로 결정된다.

[this가 가리키는 값]
- 일반 함수로서 호출 할 때 : 전역 객체(브라우저 - window, Node.js - global)
- 메서드로 호출 : 메서드를 호출한 객체(dot notation 앞의 객체)
- 생성자 함수로서 호출 : 생성자 함수가 생성할 인스턴스

const animal = {
	walk() {
		if(!this.isSleeping) {
          console.log("동물이 걸어간다.")
		} else {
          console.log("자는 동물은 걸을 수 없다.")
        }
	},
	sleep() {
		this.isSleeping = true
	},
    awake() {
        this.isSleeping = false
    }
}

const rabbit = {
	name :"하양토끼",
	__proto__: animal
}

// rabbit에 새로운 프로퍼티 isSleeping을 추가하고 그 값을 true로 변경합니다.
rabbit.sleep();
console.log(rabbit.isSleeping) // true
rabbit.walk() // "자는 동물은 걸을 수 없다."

rabbit.awake();
console.log(rabbit.isSleeping) // false
rabbit.walk() // "동물이 걸어간다."
console.log(animal.isSleeping)// undefined (프로토타입에는 isSleeping이라는 프로퍼티가 없습니다.)

for..in 반복문

for in 반복문은 상속 프로퍼티도 순회 대상에 포함시킨다.

const animal = {
	eats: true
}

const rabbit = {
	jumps: true,
	__proto__: animal
}

console.log(Object.keys(rabbits)) // [jumps]

for(let prop in rabbit) console.log(prop) // jumps, eats

그래서 상속 프로퍼티를 순회에서 제외하려면 obj.hasOwnProperty(key)를 이용하면 된다.

const animal = {
	eats: true
}

const rabbit = {
  jumps: true,
  __proto__: animal
};

for (let prop in rabbit) {
	const isOwn = rabbit.hasOwnProperty(prop)
	if(isOwn) {
		console.log(`객체 자신의 프로퍼티 : ${prop}`)
	} else {
		console.log(`상속 프로퍼티 : ${prop}`)
	}
}
// "객체 자신의 프로퍼티: jumps"
// "상속 프로퍼티 : eats"

그런데, hasOwnProperty()는 rabbit에 없는 메소드이다. 이건 어떻게 쓸 수 있었나?

바로, rabbit의 프로토타입 animal의 프로토타입이 Object이기 때문이다. (참고로 Object의 prototype은 null이다!) animal의 프로토타입이 Object인 것은 animal을 객체리터럴 방식으로 선언했기 때문이다.

이게 무슨말이냐 ?

그리고 콘솔에 hasOwnProperty 메소드가 찍히지 않았다. 그 이유는 hasOwnProperty는 열거 가능한(enumerable) 프로퍼티가 아니기 때문이다. Object.prototype에 있는 모든 메서드의 enumerable 플래그는 false인데 for..in은 오직 열거 가능한 프로퍼티만 순회 대상에 포함하기 때문에 hasOwnProperty는 콘솔에 출력되지 않은 것이다.

 

📌 키-값을 순회하는 메서드 대부분은 상속 프로퍼티를 제외하고 동작한다. Object.keys, Object.values 같이 객체의 키-값을 대상으로 순회하는 메서드 대부분은 상속 프로퍼티를 제외하고 동작한다.