- Published On
자바스크립트의 new 연산자 동작 방식
JavaScript에서 new
연산자는 객체 지향 프로그래밍의 핵심적인 요소로, 생성자 함수를 통해 새로운 객체를 생성하는 데 사용됩니다.
new
연산자가 어떻게 동작하는지, 그리고 내부적으로 어떤 과정을 거치는지를 예시와 함께 설명해보겠습니다.
new 연산자의 기본 원리
- 첫째,
new
연산자는 새로운 빈 객체를 만들어냅니다. - 둘째, 이 객체의
[[Prototype]]
(또는__proto__
속성)을 생성자 함수의prototype
속성으로 설정합니다. - 셋째, 생성자 함수의
this
가 새로 생성된 객체를 가리키도록 변경합니다. - 마지막으로, 생성자 함수에서 명시적으로 다른 객체를 반환하지 않는 경우,
this
에 바인딩 된 새로운 객체가 반환됩니다.
아래는 이 과정을 단계별로 설명하는 표입니다.
단계 | 설명 |
---|---|
1 | new 연산자로 새 객체를 생성 |
2 | 생성된 객체의 __proto__ 를 생성자 함수의 prototype 으로 설정 |
3 | 생성자 함수 내의 this 를 새 객체로 바인딩 |
4 | 생성자 함수에서 다른 객체를 반환하지 않으면 this 반환 |
예시를 통한 이해
Person
이라는 생성자 함수를 예로 들어 new
의 내부 동작을 좀 더 자세히 살펴보겠습니다.
Person.jsjavascript
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.introduce = function() {
console.log(`저는 ${this.name}이고, 나이는 ${this.age}살 입니다.`);
};
const person1 = new Person("홍길동", 30);
person1.introduce(); // "저는 홍길동이고, 나이는 30살 입니다."
new Person("홍길동", 30);
는 먼저 빈 객체를 생성하고, 이 객체의 __proto__
를 Person.prototype
으로 설정한 후, Person
생성자 함수의 this
를 새 객체에 바인딩합니다.
Person
생성자 함수에서는 this.name
과 this.age
에 값을 할당하므로, 새 객체에는 name
과 age
속성이 추가됩니다.
이후 new
연산자는 새로 생성된 객체를 반환합니다.
따라서 person1
은 Person
의 인스턴스가 되며, Person.prototype
에 정의된 introduce
메소드에 접근할 수 있게 됩니다.
이와 같이 new
연산자는 생성자 함수를 통해 새로운 객체를 만들어내고, 이 객체에 여러 속성과 메소드를 부여할 수 있게 해줌으로써,
JavaScript에서 객체 지향 프로그래밍을 구현하는 데에 매우 중요한 역할을 합니다.
다음 포스트
JavaScript의 연산자 비교연관된 포스트 구경가기
1. AJAX란 무엇인가?2. 자바스크립트의 ES6 주요 변경 사항3. 이벤트 위임(Event Delegation)4. 실행 컨텍스트(Execution Context)5. 자바스크립트의 new 연산자 동작 방식6. JavaScript의 연산자 비교7. 엄격 모드(Strict Mode)8. JavaScript의 프로토타입 (Prototype) 이해하기9. Javascript에서 URL 및 URLSearchParams 사용10. Fetch web API11. 타입스크립트 주요 타입 정리12. import vs require13. JavaScript의 비동기 처리14. HTML SVG태그 분석15. JavaScript의 this 바인딩 완벽 정리16. JavaScript 배열 메서드: reduce()와 sort() 분석17. JavaScript 배열 메서드와 고차 함수 총정리
간략히