[발표4회차] 프로토타입

객체와 생성자 함수

자바스크립트에서 객체를 많이 쓰이는데 객체는 이름과 값을 가지는 속성들의 모음이다. 

let person = {
    name: 'John',
    age: 30,
    greet: function() {
        console.log('Hello, my name is ' + this.name);
    }
};

 

여기서 person 객체는 name, agem, greet을 가지고 있다. 이러한 형태로 여러 개를 만들고 싶다면 아래처럼 생성자 함수를 사용할 수 있다. 

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.greet = function() {
        console.log('Hello, my name is ' + this.name);
    }
}

let person1 = new Person('John', 30);
let person2 = new Person('Jane', 25);

 

이렇게 하면 person1과 person2라는 두 개의 객체가 각각 만들어진다. 

 

프로토타입

하지만 위에 방식에는 문제가 있다. 바로 모든 객체가 greet 함수를 따로 따로 가지고 있어서 메모리를 낭비한다는 점이다. 이 문제를 해결하기 위해 자바스크립트는 프로토타입이라는 개념을 사용한다. 

 

프로토타입은 객체들이 공유할 수 있는 속성과 메서드를 정의할 수 있는 곳이다. 생성자 함수인 prototype 속성을 이용해서 프로토타입에서 메서드를 추가할 수 있다. 

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

Person.prototype.greet = function() {
    console.log('Hello, my name is ' + this.name);
};

let person1 = new Person('John', 30);
let person2 = new Person('Jane', 25);

person1.greet(); // Hello, my name is John
person2.greet(); // Hello, my name is Jane

 

이렇게 하면 greet 메서드는 모든 Person 객체들이 공유하게 되어서 메모리를 절약할 수 있다. 

정리하면, 프로토타입을 사용하면 메모리를 효율적으로 사용하면서 객체지향 프로그래밍의 장점을 살릴 수 있다. 자바스크립트의 모든 객체는 프로토타입을 가지고 있으며, 이를 통해 객체들이 서로 상호작용하고 기능을 공유할 수 있다.

 

 

 

1. Constructor (생성자)

생성자는 객체를 만드는 데 사용되는  함수이다. 마치 공장에서 제품을 찍어내는 틀처럼 생성자는 여러 개의 비슷한 객체를 만들 수 있게 해준다.

function Car(brand, model) {
  this.brand = brand;
  this.model = model;
}

 

Car 함수가 생성자 함수이고 brand와 model이라는 두 가지 속성을 가진 자동차 객체를 만든다.

 

2. Prototype (프로토타입)

프로토타입은 모든 자바스크립트 객체가 가지는 숨겨진 속성이다. 이 속성에는 함수나 변수를 추가할 수 있다. 모든 인스턴스는 생성자의 프로토타입에 접근할 수 있어서 프로토타입에 추가된 속성이나 메서드는 모든 인스턴스에서 사용할 수 있다. 

Car.prototype.start = function() {
  console.log(this.brand + " " + this.model + " is starting.");
}

Car 생성자의 프로토타입에 start라는 메서드를 추가했다. 이제 모든 Car 객체는 start 메서드를 사용할 수 있게 된다.

 

3. Instance (인스턴스)

인스턴스는 생성자를 사용하여 만든 실제 객체이다. Car 생성자로 만든 실제 자동차 하나하나가 인스턴스이다.

let myCar = new Car("Toyota", "Corolla");
myCar.start();  // 출력: "Toyota Corolla is starting."

myCar는 Car 생성자로 만든 인스턴스이다. myCar는 brand와 model 속성을 가지며, start 메서드를 사용할 수 있다.

 

4. constructor 프로퍼티

자바스크립트 객체의 프로토타입에 있는 속성으로, 그 객체를 생성한 생성자 함수를 가리킨다. 이를 통해 객체가 어떤 생성자 함수를 통해 만들어졌는지 알 수 있다.

다시 정리하면 생성자 함수를 사용하여 객체를 만들면, 그 객체는 자동으로 constructor 프로퍼티를 가지게 된다. 이 프로퍼티는 객체를 만든 생성자 함수를 가리킨다. 프로토타입에 있는 constructor 프로퍼티는 모든 인스턴스 객체에서 접근 할 수 있다.

// 생성자 함수
function Car(brand, model) {
  this.brand = brand;
  this.model = model;
}

// Car 생성자의 인스턴스 만들기
let myCar = new Car("Toyota", "Corolla");

// 인스턴스의 constructor 프로퍼티 확인
console.log(myCar.constructor);  // 출력: function Car(brand, model) { ... }

myCar는 Car 생성자로 만든 인스턴스이다. .myCar의 constructor 프로퍼티는 Car 생성자 함수를 가리킨다. 이를 통해 myCar가 어떤 생성자 함수로 만들어졌는지 알 수 있다.

5. 메서드 오버라이드

 

• 메서드 오버라이드: 자식 객체가 부모 객체로부터 상속받은 메서드를 재정의하는 것.
• 상속: 자식 객체가 부모 객체의 프로퍼티와 메서드를 사용할 수 있게 함.
• 재정의된 메서드: 자식 객체에서 부모의 메서드를 덮어쓰고, 자식 객체의 특성에 맞게 새로운 동작을 정의함.

 

 

1. 기본 클래스(생성자 함수)와 메서드 정의 : 먼저 부모 역할을 할 생성자 함수와 메서드를 정의한다.

2. 상속받는 클래스(생성자 함수)와 메서드 오버라이드 : 자식 역할을 할 생성자 함수에서 부모의 메서드를 자신만의 방식으로 재정의한다.

// 기본 클래스와 메서드 정의
// 부모 생성자 함수
function Animal(name) {
  this.name = name;
}

// 부모의 메서드 정의
Animal.prototype.speak = function() {
  console.log(this.name + " makes a noise.");
};

// 부모 클래스의 인스턴스 생성
let genericAnimal = new Animal("Generic Animal");
genericAnimal.speak();  // 출력: Generic Animal makes a noise.


//자식 클래스에서 메서드 오버라이드
// 자식 생성자 함수
function Dog(name, breed) {
  Animal.call(this, name);  // 부모 생성자 호출
  this.breed = breed;
}

// 상속 설정
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

// 부모의 speak 메서드를 오버라이드
Dog.prototype.speak = function() {
  console.log(this.name + " barks.");
};

// 자식 클래스의 인스턴스 생성
let myDog = new Dog("Rex", "German Shepherd");
myDog.speak();  // 출력: Rex barks.

 

• Animal이라는 부모 생성자 함수가 있고, speak라는 메서드를 정의했다.
• Dog이라는 자식 생성자 함수가 있고,  Animal을 상속받아 Dog 객체를 만든다. 추가적으로 breed라는 속성을 가지게 했다.
• Dog.prototype = Object.create(Animal.prototype)를 통해 Dog가 Animal의 프로토타입을 상속받도록 설정했다.
• Dog.prototype.speak에서 Animal.prototype.speak 메서드를 오버라이드했다. 이제 Dog의 인스턴스는 speak 메서드를 호출하면 Animal의 speak 메서드가 아닌 Dog에서 정의한 speak 메서드를 사용한다.

6.프로토타입 체인

 

• 프로토타입 체인: 객체들이 연결된 구조로, 객체의 프로퍼티나 메서드를 찾기 위해 자바스크립트가 따라가는 경로.
• 객체 → 객체의 프로토타입 → 프로토타입의 프로토타입 → ... → Object.prototype → null.
• 객체에 프로퍼티가 없으면, 자바스크립트는 프로토타입 체인을 따라 프로퍼티를 찾는다.

1.객체와 프로토타입 연결:

• 객체가 만들어지면 그 객체는 자신의 프로토타입 객체를 가리키는 숨겨진 링크를 가진다. 이를 [[Prototype]]이라고 한다.
• 이 프로토타입 객체도 또 다른 객체를 프로토타입으로 가질 수 있다.

 

2. 프로퍼티 검색 과정:

• 객체의 프로퍼티를 찾을 때 자바스크립트는 먼저 그 객체 자체에서 찾는다.
• 만약 그 객체에 해당 프로퍼티가 없다면, 자바스크립트는 객체의 [[Prototype]]을 따라가며 프로퍼티를 찾는다.
• 이 과정을 프로토타입 체인을 따라 프로퍼티를 찾는다고 한다.

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

Person.prototype.greet = function() {
  console.log("Hello, my name is " + this.name);
};

// 인스턴스 생성
let alice = new Person("Alice");

// alice 객체의 프로퍼티 확인
console.log(alice.name);  // 출력: Alice

// alice 객체의 greet 메서드 호출
alice.greet();  // 출력: Hello, my name is Alice

 

 

 

 

• alice 객체가 생성된다.
• alice 객체에는 name 프로퍼티가 직접 정의된다.
• greet 메서드는 alice 객체에 직접 정의되어 있지 않지만, Person.prototype에 정의된다.
• alice.greet()를 호출하면, 자바스크립트는 먼저 alice 객체에서 greet 메서드를 찾고, 찾을 수 없으니 프로토타입 체인을 따라 Person.prototype에서 greet 메서드를 찾아 호출한다.