Beat&Bite
PostLogWorks

Javascript 프로토타입

2024년 01월 23일

프로토타입__proto__

자바스크립트 프로토타입은 ‘다른 object한테 물어보는 것’이다.

내 object에 답(프로퍼티, 메소드)가 있으면 그 답을 고르지만 모르면 ‘상위 object’한테 물어본다.

그럼 코드로 살펴보자.

let vehicle = {
	wheels: 4
}

let sedan = {
	__proto__: vehicle,
	maxSpeed: 200
}

console.log(sedan.wheels); //4

sedan 객체에는 wheels가 없다. 하지만 prototype으로 vehicle과 연결되어있기 때문에 wheels 프로퍼티를 사용할 수 있게 된다.

프로토타입으로 연결된 관계를 그려보면 이렇다.

프로토타입 체인

프로토타입은 여러개를 연결지어서 쓸 수 있다.

let transportaion = {
	canMove: true
};

let vehicle = {
	__proto__: transportaion,
	wheels: 4
}

let sedan = {
	__proto__: vehicle,
	maxSpeed: 200
}

console.log(sedan.canMove); //true

나한테 답(프로퍼티, 메소드)가 있으면 ‘물어보러’가지 않는다.

let vehicle = {
	__proto__: transportaion,
	wheels: 4
}

let bus = {
	__proto__: vehicle,
	maxSpeed: 100
	wheels: 6
}

console.log(bus.wheels); //6

위 코드를 풀어서 설명하자면

  • bus.wheels 코드가 사용되면 bus 객체가 wheels 프로퍼티를 가지고 있는지 확인한다.
  • 프로퍼티가 있다면 반환하고,
  • 없다면 proto 체인 위로 올라가서 프로퍼티가 있는지 확인한다. 없으면 다시 체인 위로 올라간다.

사실 프로토타입을 잘 알아야두면 좋은 이유는 여기에 있다.

Object Prototype

비어있는 object를 만들면 아무것도 없는 object같지만, __proto__ 로 Object Prototype에 연결되어 있다.

let obj = {}
console.log(obj.__proto__); 
console.dir(obj);

그리고 Obejct Prototype은 javascript객체의 최상위 프로토타입으로. 모든 객체는 Object의 메서드와 프로퍼티를 상속한다. 그래서 공통적으로 toString() hasOwnproperty()같은 메서드를 쓸 수 있다.

array의 프로토타입

javascript에서 array는 사실 자료구조상 진짜 배열이 아니고 객체다. array 형태는 Array.prototype에 정의된 메서드와 프로퍼티를 상속한다. 그래서 생성한 array에 map, sort 같은 메서드를 쓸 수 있다.

const arr = [1, 2, 3];
console.log(arr.__proto__);

number, string의 프로토타입

javascript에서 원시 타입인 string, number, boolean 타입은 좀 신기하게 작동한다. 프로퍼티나 메소드를 호출할 때 해당 타입과 연관된 객체로 일시적으로 변환되어 프로토타입을 사용할 수 있게 된다. string이라면 String객체, number라면 Number객체로.

const str = "dugi";
console.log(str.__proto__);

const num = 12;
console.log(num.__proto__);

const bool = true;
console.log(bool.__proto__);
TAGS
JAVASCRIPT