본문 바로가기
boostcamp-challenge

[7/22] 자바스크립트에서 OOP란 뭘까...

by blopz 2024. 7. 23.

https://velog.io/@suuhyeony/JS-%EA%B0%9D%EC%B2%B4%EC%A7%80%ED%96%A5-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%83%81%EC%86%8D%EA%B3%BC-%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9E%85

 

[JS] 객체지향 자바스크립트 -상속과 프로토타입

JavaScript은 어떻게 상속을 하는걸까? 프로토타입은 도대체 뭐지?

velog.io

 

ES6 문법을 쓰면 Java에서 쓰던것처럼 extends로 상속하고 super()로 부모 메소드에 접근하기가 가능하다.

 

함수의 다형성도 지원하는것같다.

 

일단 익숙한 방식인 class를 extends 해서 쓰고 export import로 불러와 쓰자!

 

Prototype?

일단 자바스크립트 ES6의 Class 문법은 prototype을 사용한다.

 

prototype을 사용하기 쉽게 만들어놓은게 class라고 이해했다.

 

claude의 답변은 이랬다.

  1. 호이스팅(Hoisting):
    •   클래스: 호이스팅되지 않습니다. 선언 전에 사용하면 오류가 발생합니다.
    •   프로토타입: 함수 선언은 호이스팅됩니다.
  2. strict mode:
    •   클래스: 항상 strict mode에서 실행됩니다.
    •   프로토타입: 명시적으로 설정하지 않으면 strict mode가 아닙니다.
  3. 생성자:
    •   클래스: constructor 메서드를 통해 명시적으로 정의합니다.
    •   프로토타입: 함수 자체가 생성자 역할을 합니다.
  4. 상속:
    •   클래스: extends 키워드를 사용하여 간단히 상속을 구현할 수 있습니다.
    •   프로토타입: Object.create()나 __proto__를 사용하여 수동으로 상속을 구현해야 합니다.
  5. 정적 메서드:
    •   클래스: static 키워드를 사용하여 쉽게 정적 메서드를 정의할 수 있습니다.
    •  프로토타입: 함수 객체에 직접 메서드를 추가하여 구현합니다.
  6. 성능:
    •   일반적으로 큰 차이는 없지만, 매우 작은 규모에서는 프로토타입 방식이 약간 더 빠를 수 있습니다.

결론적으로, 클래스 문법은 더 깔끔하고 직관적이며, 현대적인 JavaScript 개발에 더 적합합니다. 그러나 프로토타입에 대한 이해는 JavaScript의 동작 원리를 깊이 이해하는 데 중요합니다. 대부분의 경우 클래스 문법을 사용하는 것이 권장되지만, 레거시 코드를 다룰 때나 JavaScript의 프로토타입 체인을 깊이 이해하고 조작해야 할 때는 프로토타입 방식에 대한 지식이 필요할 수 있습니다.

 

결론적으로 class 써도 무방하지만 prototype이 어떻게 작동하는지 알아는 두랜다.

 

더 학습할 내용

  • SOLID 원칙에서 SRP 단일책임원칙이란
  • SOLID 원칙에서 LSP 리스코프교환원칙이란
  • prototype 더 자세히 학습하기

 

https://poiemaweb.com/js-prototype

 

Prototype | PoiemaWeb

자바스크립트의 모든 객체는 자신의 부모 역할을 하는 객체와 연결되어 있다. 그리고 이것은 마치 객체 지향의 상속 개념과 같이 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있게

poiemaweb.com

 

 

https://yceffort.kr/2020/08/commonjs-esmodules

 

CommonJS와 ES Modules은 왜 함께 할 수 없는가?

노드14 에서는 옛날 스타일의 CommonJS와 (이하 CJS) 새로운 스타일의 ESM Scripts (이하 MJS) 두개가 공존하고 있다. CJS의 경우 require()와 module.exports를 사용하며, ESM은 import와 export를 사용한다. ESM과 CJS는

yceffort.kr