객체 및 프로토타입

이 글은 아래 링크의 영상들의 내용을 기반으로 작성되었습니다.

https://opentutorials.org/module/4047

 

 

New 연산자의 이해

자바스크립트에서 'new' 연산자의 구체적인 역할은 잘 모르는 사람이 많습니다. 저 또한 그러한 사람 중 한명이구요. 이번엔 그 구체적인 역할에 대해 알아봅시다.

 

 

우리는 함수를 실행했을 때, 해당 함수에서 return 하는 무엇인가가 출력됨을 알고 있을 것입니다. 하지만 위와 같은 Person 함수의 경우, return 하는게 아무 것도 없기 때문에 콘솔에는 undefined 가 찍힙니다.

 

그러나 똑같은 함수에 new 연산자를 쓰면, 신기하게도 객체가 하나 리턴된 것을 볼 수 있을 것입니다. new 연산자는 옆의 함수를 '생성자(constructor)'로써 활용하여 이를 바탕으로 객체를 생성한다고 간단하게 이해할 수 있습니다. new 가 사용되면 new 연산자가 사용하는 함수의 this 는 new 로 인해 생성되는 객체를 의미하게 되며 함수에 매개변수를 넘기고 해당 매개변수를 바탕으로 this.prop = param 형식으로 실제 constructor 와 유사한 작업 또한 수행할 수 있는 것입니다.

 

 

 

Prototype 의 이해

위의 예시에서 Person 함수는 new 연산자와 함께 쓰이면 sum 이라는 메서드 또한 포함하고 있는 객체를 생성한다는 것을 알 수 있었습니다. 하지만 이런 식으로 객체들을 생성하다 보면 다음의 두가지 문제가 발생합니다.

 

• 똑같은 함수가 여러개 만들어지는 시점에서 어떤 객체에서는 해당 함수가 잘 사용되지 않는다면 메모리 낭비가 발생하는 것이라고도 볼 수 있습니다.
• 만일 해당 메서드를 수정하고 싶으면, 해당 함수를 바탕으로 생성한 모든 객체들의 메서드를 다 변경해야 합니다.

 

이를 해결하기 위해 'Prototype' 이라는 개념이 대두되었습니다. 이는 일반 클래스 개념에서 '상속'과 상당히 유사합니다. Prototype 을 사용하면 모든 객체가 하나의 메서드를 공유하도록 만들 수 있습니다. 프로토타입 속성은 다음과 같이 Person 함수 내에서가 아닌 외부에서 정의할 수 있습니다.

 

Person.prototype.sum = function(...) {...}

 

메서드 뿐만 아니라 그냥 속성도 프로토타입으로 지정하는 것이 가능합니다. 저 메서드 안에 this 가 쓰이더라도, 해당 this 는 각 객체마다 다르게 할당되어서 동작합니다. 이제 이 함수를 통해 만들어지는 모든 객체들은 저 속성을 공유하게 됩니다.

 

 

특정 객체만 해당 프로토타입을 쓰지 않고, 다른 메서드나 속성을 쓰도록 하고 싶으면 다음과 같은 덮어씌우기를 수행하면 됩니다. 객체는 특정 메서드를 수행하거나 속성에 접근하도록 명령 받으면 객체 자신이 그 메서드를 지니고 있는지를 검사한 다음 없다면, prototype으로 연결된 메서드를 사용하거나 속성을 가져오기 때문입니다.

 

let kim = new Person();
kim.sum = function (...) {...}