9. 프로토타입

with 크리스 (소요시간: 1시간)

 

워밍업 - 변수 네이밍

kettanaito/naming-cheatsheet

내 질문

Q1.

화살표 함수는 왜 프로토타입 객체를 가지지 않을까요?

 

A. 화살표 함수는 contstructor를 가지지 않기 때문에 생성자 함수가 아니다. 프로토타입은 생성자 함수가 생성되는 시점에 더불어 생성된다. 따라서 화살표 함수는 프로토타입 객체를 가지지 않는다.

 

Q2.

왜 객체 전용 메서드들은 Object.someMethod(instance) 이런 식으로 써야할까요? instance.someMethod() 이런 식으로 사용할 수 있으면 편할텐데 말이죠 🤔 (ex. Array.forEach([1, 2]) (x) / [1, 2].forEach (o))

 

A. 어떤 생성자 함수이든 prototype은 반드시 객체이기 때문에 Object.prototype이 언제나 프로토타입 체인의 최상단에 존재하기 된다. 따라서 객체에서만 사용할 메서드는 다른 여느 데이터 타입처럼 프로토타입 객체 안에 정의할 수가 없다. 객체에서만 사용할 메서드를 Object.prototype 내부에 정의한다면 다른 데이터 타입도 해당 메서드를 사용할 수 있기 때문이다.

 

Q3.

클래스 내에서 메서드를 생성할 때, 일반적인 메서드 생성과 화살표 함수로 메서드를 생성하는 경우에는 프로토타입 체인이 위와 같은 차이를 보입니다. 그 이유에 대해서 같이 이야기해봐요.

 

A. 화살표 함수는 동적 바인딩이 아닌 렉시컬 바인딩을 한다. 때문에 클래스로 생성된 인스턴스에서 'proto'로 프로토타입 체인에 접근할 때 this가 인스턴스를 가리키지 않는 문제가 발생한다. 따라서 클래스 내에서 화살표 함수로 메서드를 선언하게 되면 프로토타입에 메서드가 생성되지 않고 인스턴스 내에서 생성된다.

 

Q4.

프로토타입에 메서드나 프로퍼티를 추가한 경험이 있다면 공유해봐요 👍

A. 레벨 1때 카일과 미션을 진행하며 Custom DOM Library를 만든 경험.

Custom DOM Library 만들기

 

크리스 질문

Q1.

자바와 같은 일반적인 언어에서는 기본으로 적용하고 있지 않은 Prototype 패턴을 왜 자바스크립트에서는 기본으로 도입하고 있는 것일까요? 웹 환경에서 Prototype 패턴이 필요한 이유로 무엇이 있는 것인지 논의해봅시다.

 

A. 자바스크립트는 프로토타입을 기반으로 객체의 상속을 구현하여 불필요한 중복을 제거한다. 프로토타입은 어떤 객체의 상위 객체의 역할을 하는 다른 객체로서 다른 객체에 공유 프로퍼티를 제공한다. 프로토타입을 상속받은 하위 객체는 상위 객체의 프로퍼티를 자신의 프로퍼티처럼 자유롭게 사용할 수 있다. 하지만 기존 클래스 문법으로도 충분했을텐데 Brendan Eich는 왜그랬을까..? 👀

크리스 답변)

자바스크립트가 웹 환경에서 돌아가기 때문에 프로토타입 패턴을 도입한 것 같다. 브라우저가 제공하는 환경은 네이티브 보다 제한적이기 때문에 제한된 리소스를 충분히 활용하기 위해 프로토타입 패턴을 적용했다.

그럼 다른 언어에서는 상속을 구현할 때 인스턴스에서 상속받은 메서드들을 매번 새로 만들어서 가지고 있는지..? (백엔드 크루들에게 물어보자)

 

Q2.

ES6 의 class가 프로토타입을 이용해서 클래스 개념을 '흉내내는' 방법이 무엇인지 서로 설명해보고 피드백 해봅시다.

 

A. 흉내낸다의 의미가 무엇인지 잘 모르겠따... 클래스는 기존 프로토타입 기반 패턴의 문법적 설탕이라고도 볼 수 있다. 하지만 클래스와 생성자 함수 모두 프로토타입 기반의 인스턴스를 생성하지만 정확히 동일하게 동작하지는 않는다. 예를 들어 클래스는 new 연산자 없이 호출하면 에러가 발생한다. 또한 클래스는 상속을 지원하는 extends와 super 키워드를 제공한다. 따라서 클래스를 객체를 생성하는 새로운 메커니즘으로 볼 수도 있다고 생각한다.

 

크리스 답변)

 

• ES6 에서 채택한 방법
• 핵심은 서브클래스 prototype 객체가 별도의 객체이되, proto 속성이 슈퍼클래스의 prototype 객체를 가리키게 만들고 서브클래스의 프로토타입에는 불필요한 프로퍼티가 남아있지 않게 만드는 것이다.
• 클래스의 super 또한 이를 바탕으로 흉내낼 수 있다. super 로 접근하려는 것이 일반 프로퍼티라면 바로 접근하면 되고, 메서드라면 슈퍼클래스의 prototype 상의 메서드가 실행될 때 this 를 서브클래스의 this 로 바인딩해서 수행하면 된다.

 

Q3.

프로토타입은 강력한 기능이지만 실제 코드에는 사용하지 않는 경우가 많습니다. 저희가 작성한 코드 중 프로토타입을 적용할 수 있는 부분이 있다면 한번 가져와서 어떻게 적용할 수 있는지, 적용했을 경우 어떤 이점을 얻을 수 있는지 이야기해봅시다.

 

A. 내 질문 4번과 동일