생성자 함수 (상속)
자바스크립트에서 생성자 함수와프로토타입을 사용하여 상속을 구현하는 것은 객체 지향 프로그래밍의 기본적인 방식 중 하나 이다. 이를 통해 코드를 재사용하고 객체 간의 관계를 명확히 할 수 있습니다.
1. 생성자 함수 정의 및 상속의 개념
- 생성자 함수 정의 : 생성자 함수는 객체를 생성하고 초기화하는 역활을 합니다.
- 상속 : 자식 생성자 함수가 부모 생성자 함수의 프로퍼티와 메소드를 상속받아 재사용하는 것을 의미합니다.
2. 생성자 함수 상속의 이점
- 재사용성 : 부모 생성자 함수의 코드를 재사용하여 중복을 줄입니다.
- 확장성 : 부모 생성자에 없는 새로운 프로퍼티나 메소드를 자식 생성자에서 추가할 수 있습니다.
- 유지보수성 : 필요에 따라 부모 생성자의 프로퍼티나 메소드를 재정의할 수 있습니다.
3. 생성자 함수 상속 구현 예제
부모 생성자 함수 정의
부모 생성자 함수를 정의합니다. 이 함수는 기본적인 프로퍼티와 메소드를 갖습니다.
Employee 생성자 함수는 name 과 age 라는 두 개의 프로퍼티를 초기화하고 getDetails 라는 메소드를 정의합니다.
자식 생성자 함수 정의 및 상속
자식 생성자 함수는 부모 생성자 함수를 호출하여 부모의 프로퍼티를 상속받고 추가적인 프로퍼티나 메소드를 정의합니다.
Manager 생성자 함수는 Employee 생성자 함수를 호출하여 name 과 age 를 초기화하고 추가로 department 프로퍼티를 설정합니다. 또한 Object.setPrototypeOf 를 사용하여 Manager의 프로토타입을 Employee의 프로토타입으로 설정합니다.
이를 통해 Manger 객체는 Employee 객체의 메소드를 상속받을 수 있습니다.
객체 생성 및 사용 예시
Manager 객체를 생성하고 getDetails 메소드를 호출하여 상속받은 메소드와 새로 정의된 메소드를 함께 사용할 수 있습니다.
4. Function.prototype.call() 메소드
call 메소드는 부모 생성자 함수를 간접 호출하여 자식 생성자 함수에서 부모의 초기화 코드를 재사용할 수 있게 합니다.
5. Object.setPrototypeOf() 메소드
Object.setPrototypeOf 메소드는 생성자 함수의 프로토타입 객체를 변경할 때 사용됩니다.
클래스 (상속)
ES6에서 도입된 클래스는 생성자 함수보다 더 직관적이고 간편하게 상속을 구현할 수 있게 해줍니다. 클래스는 캡슐화 , 상속 , 다형성을 보다 쉽게 구현할 수 있게 해줍니다.
1. 클래스의 기본 개념
- 캡슐화 : 클래스 내의 프로퍼티와 메소드를 외부에서 접근하지 못하게 하여 객체의 상태를 보호합니다.
- 상속 : extends 키워드를 사용하여 클래스 간의 상속을 구현할 수 있습니다.
- 정적 메소드 : static 키워드를 사용하여 클래스의 인스턴스 없이 호출 가능한 메소드를 정의합니다.
2. 클래스 상속 예제
부모 클래스 정의
Employee 클래스는 name 과 age 를 초기화하는 생성자와 getDetails 메소드를 정의합니다.
자식 클래스 정의 및 상속
Manager 클래스는 Employee 클래스를 상속받아 department 프로퍼티를 추가하고 getDetails 메소드를 재정의합니다.
super 키워드를 사용하여 부모 클래스의 생성자를 호출합니다.
객체 생성 및 사용 예시
Manager 객체를 생성하고 getDetails 메소드를 호출하여 상속받은 메소드와 새로 정의된 메소드를 함께 사용할 수 있습니다.
3. static 키워드
개념
- static 키워드는 정적 프로퍼티와 정적 메서드를 정의하는 데 사용됩니다.
- 정적 메서드는 클래스의 인스턴스를 생성하지 않고도 호출할 수 있습니다.
- 정적 메서드는 애플리케이션의 공통 기능을 정의하는 데 주로 사용됩니다.
4. 다형성과 메소드 재정의(Overriding)
개념
- 다형성은 다양한 클래스들이 동일한 메서드나 프로퍼티를 사용할 수 있게 하는 객체 지향 프로그래밍의 특성입니다.
- 메서드 재정의(Overriding)는 자식 클래스가 부모 클래스의 메서드를 재정의(수정)하여 사용하는 것입니다.
5. instanceof 연산자
개념
- instanceof 연산자는 객체가 특정 클래스의 인스턴스인지 확인하는 데 사용됩니다.
- 이를 통해 객체의 상속 관계를 확인할 수 있습니다.
'Front-end > JavaScript' 카테고리의 다른 글
자바스크립트의 실행 컨텍스트 / 스코프 / 클로저 (2) | 2024.07.24 |
---|---|
자바스크립트 변수의 종류와 범위 (지역 변수 등) (0) | 2024.07.24 |
JavaScript 프로토타입(prototype) (2) | 2024.07.23 |
JavaScript 모듈(Module) (0) | 2024.07.22 |
자바스크립트 객체 (2) | 2024.07.19 |