[JS] new 연산자, 프로토타입 객체

 

 

( new 연산자 객체 생성 )

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

// 객체 생성
const person1 = new Person('Alice', 25);
const person2 = new Person('Bob', 30);

person1.sayHello(); // "Hello, my name is Alice."
person2.sayHello(); // "Hello, my name is Bob."

JS에서 new 연산자는 생성자 함수를 통해 객체를 생성할 때 사용.

=> 이렇게 생성된 객체는 해당 생성자 함수의 프로토타입을 상속.

 

---

 

[ 객체 생성 과정 ]

 

(생성자함수)

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

 

1. new 연산자를 사용해 빈 객체 생성.

const person1 = new Person('Alice');

// 인스턴스 속성 초기화
console.log(person1.name); // Alice

=> 생성자 함수 Person이 호출되며, this는 새로 생성된 객체를 참조.

=> Person 함수가 명시적으로 다른 객체를 반환하지 않으면 new 연산자는 자동으로 새로 생성된 객체를 반환.

 

---

 

2. 새로 생성된 객체는 생성자 함수의 프로토타입 객체인 Person.prototype과 연결.

console.log(person1.__proto__ === Person.prototype); // true

=> Person.prototype에 정의된 모든 메서드와 속성을 상속받는다.

 

( Person의 프로토타입 객체에 'sayHello' 메서드 정의. )

Person.prototype.sayHello = function() {
    console.log(`Hello, my name is ${this.name}.`);
};

person1.sayHello(); // "Hello, my name is Alice."

=> Person에는 sayHello 메서드가 없지만, 프로토타입 체인을 따라  Person.prototype의 sayHello 메서드를 찾아 실행.

       'sayHello ' 메서드는 모든 Person의 인스턴스에서 사용 가능.

 

( 프로토타입 메서드 사용 )

const person1 = new Person('Alice');
const person2 = new Person('Bob');

person1.sayHello(); // "Hello, my name is Alice."
person2.sayHello(); // "Hello, my name is Bob."

console.log(person1.__proto__ === Person.prototype); // true
console.log(person2.__proto__ === Person.prototype); // true

=> person1 과 person2 는 다른 객체지만,

공통 프로토타입 객체인  Person.prototype을 공유하여, 둘다 Person.prototype에 정의된 sayHello 메서드를 사용 가능.

 

 

** new 연산자는 생성자 함수의 프로토타입 객체와 연결된 새로운 객체를 생성.

** 프로토타입 객체는 상속을 통해 공유 메서드를 제공하여 JS에서 객체간 상속과 재사용이 가능.