프로토타입

1. 프로토타입

자바스크립트에서 프로토타입(Prototype)은 객체가 다른 객체로부터 속성과 메서드를 상속받을 수 있게 해주는 메커니즘입니다. 모든 객체는 숨겨진 링크인 [[Prototype]](또는 __proto__)을 통해 자신의 부모 역할을 하는 객체를 참조하며, 이를 통해 객체 간에 속성과 메서드를 공유할 수 있습니다. 이 연결 구조를 프로토타입 체인(prototype chain)이라고 하며, 객체는 필요한 속성을 자신의 내부에서 찾지 못하면, 프로토타입을 따라 위로 올라가며 검색합니다. 이를 통해 자바스크립트는 클래스 없이도 재사용과 상속이 가능한 객체지향 구조를 구현할 수 있습니다.

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

Person.prototype.sayHello = function () {
  console.log(`안녕하세요, 저는 ${this.name}입니다.`);
};

const p1 = new Person("김사과");
const p2 = new Person("반하나");

p1.sayHello();
p2.sayHello();

 

• Person 생성자로 만든 객체 p1, p2는 sayHello()라는 메서드를 직접 가지고 있지 않습니다.
• Person.prototype이라는 공용 객체에 저장된 메서드를 참조해서 사용합니다.

p1 → Person.prototype → Object.prototype → null

 

p1은 sayHello를 찾을 수 없으면 → Person.prototype으로 올라가서 찾고, → 없으면 또 Object.prototype으로 올라갑니다. → 이 연결 고리를 "프로토타입 체인(Prototype Chain)"이라고 합니다.

 

function Dog(color, name, age){
            this.color = color
            this.name = name
            this.age = age
}

const Rucy = new Dog('흰색', '루시', 15)
console.log(Rucy)
console.log(`이름: ${Rucy.name}`)
console.log(`색상: ${Rucy.color}`)
console.log(`나이: ${Rucy.age}`)
Rucy.family = '포메'
Rucy.getFamily = function(){
    return this.family
}
console.log(`종: ${Rucy.family}`)
console.log(`getFamily: ${Rucy.getFamily()}`)

const PPomi = new Dog('흰색', '뽀미', 6)
console.log(`이름: ${PPomi.name}`)
console.log(`색상: ${PPomi.color}`)
console.log(`나이: ${PPomi.age}`)
console.log(`종: ${PPomi.family}`)
// console.log(`getFamily: ${PPomi.getFamily()}`)
console.log('------------')

Dog.prototype.owner = '김사과'
Dog.prototype.run = function(){
    return this.name + ' 달립니다'
}

console.log(`Rucy 소유자: ${Rucy.owner}`)
console.log(`PPomi 소유자: ${PPomi.owner}`)

console.log(`Rucy run: ${Rucy.run()}`)
console.log(`PPomi run: ${PPomi.run()}`)

 

 

2. Object 객체

자바스크립트의 내장 객체인 Object는 모든 객체의 최상위 부모(프로토타입의 기반)이자, 객체를 생성하고 조작하기 위한 기본 도구입니다. Object는 객체를 만들 수 있는 생성자이면서, 객체의 속성(프로퍼티)을 다루기 위한 다양한 메서드들을 제공합니다. 따라서 모든 객체는 Object에서 출발하며, 공통 기능은 Object.prototype에 정의되어 있습니다.

 

자주 사용하는 Object의 주요 메서드

1. Object.keys(obj)

• 객체의 모든 키(속성 이름)를 배열로 반환합니다.

const user = { name: "김사과", age: 20 };
console.log(Object.keys(user)); // ["name", "age"]

 

2. Object.values(obj)

• 객체의 모든 값(속성 값)을 배열로 반환합니다.

console.log(Object.values(user)); // ["김사과", 20]

 

3. Object.entries(obj)

• 객체의 키와 값 쌍을 [key, value] 형태의 배열로 반환합니다.

console.log(Object.entries(user)); 
// [["name", "김사과"], ["age", 20]]

 

4. Object.assign(target, ...sources)

• 객체를 복사하거나 병합할 때 사용합니다.
• target 객체에 source 객체의 속성을 덮어씁니다.

const a = { x: 1 };
const b = { y: 2 };
const result = Object.assign({}, a, b);
console.log(result); // { x: 1, y: 2 }

 

5. Object.hasOwn(obj, key) (ES2022 이후)

• 객체가 특정 속성을 직접 가지고 있는지 확인합니다.

console.log(Object.hasOwn(user, "name")); // true
console.log(Object.hasOwn(user, "job"));  // false

 

6. Object.freeze(obj)

• 객체를 동결시켜 속성을 변경/추가/삭제할 수 없게 만듭니다.

const config = { debug: true };
Object.freeze(config);

config.debug = false;
console.log(config.debug); // true (변경 안됨)