MDN -자바스크립트와 객체 지향 프로그래밍를 공부하며
Object-oriented programming - Learn web development | MDN
This article has described the basic features of class-based object oriented programming, and briefly looked at how JavaScript constructors and prototypes compare with these concepts.
developer.mozilla.org
1. 객체지향 프로그래밍(OOP)이란
객체 지향 프로그래밍(OOP)은 Java 및 C++를 비롯한 많은 프로그래밍 언어의 기본 프로그래밍 패러다임이다.
객체지향 프로그래밍에는 클래스와 인스턴스, 상속, 캡슐화라는 세가지 주요 개념이 있다.
자바스크립트의 생성자와 프로토타입 체인이 OOP 개념과 관련된 부분을 정리해보았다.
참고: https://poiemaweb.com/js-object-oriented-programming
Object-Oriented Programming | PoiemaWeb
오늘날 많은 유명한 프로그래밍 언어(Java, C++, C#, Python, PHP, Ruby, Object-C)는 객체지향 프로그래밍을 지원한다.
poiemaweb.com
1) 클래스 및 인스턴스
클래스와 객체는 별개의 두 구조이며 객체는 항상 클래스의 인스턴스화로 생성됩니다.
또한 클래스를 정의하는 데 사용되는 기능(Class 구문 자체)과 개체를 인스턴스화하는 데 사용되는 기능(new를 통해 생성자 호출) 간에도 차이가 있습니다.
인스턴스를 만드는 프로세스는 생성자라는 특수 함수에 의해 수행된다.생성자 함수와 new 연산자를 통해 인스턴스 생성
2) 상속
모든 공통 속성을 정의하는 새 클래스를 정의하여 이것을 모델링 할 수 있다.
부모클래스 <- 하위클래스
3) 캡슐화
객체의 내부 상태를 비공개로 유지하고(*정보은닉) 일반적으로 공개 인터페이스와 비공개 내부 상태를 명확하게 구분하는 것을 캡슐화라고 한다.
개체의 내부 상태는 private 로 유지 되며, 다른 개체가 아닌 개체 자체의 메소드로만 엑세스 할 수 있음을 의미한다.
*정보은닉 =>캡슐화는 관련있는 멤버 변수와 메소드를 클래스와 같은 하나의 틀 안에 담고 외부에 공개될 필요가 없는 정보는 숨기는 것
2.OOP와 자바스크립트
자바스크립트 기능인 생성자와 프로토타입과 OOP 개념 중 일부와 관련이 있다.
- 자바스크립트의 생성자
클래스 정의와 같은 기능을 제공하여 객체에 포함된 모든 매서드를 포함하여 객체의 '모양'을 한 곳에 정의할 수 있다.
prototype속성에 정의되어 있으면 해당 생성자를 사용하여 생성된 모든 개체는 prototype을 통해 해당 메소드를 가져오고 생성자에서 정의할 필요가 없다.
- 프로토타입 체인
상속을 구현하는 방법으로 부모 프로토타입을 자식 프로토타입이 재정의할 수 있다.
- OOP와 구별되는 자바스크립트 특징
1. 자바스크립트에서 우리는 함수나 객체 리터럴을 사용하여 별도의 클래스 정의 없이 객체를 생성할 수 있다.
2. OOP는 하위 클래스가 인스턴스화되면 하위 클래스에 정의된 속성과 계층 구조와 상위에 정의된 속성을 결합하는 단일 개체가 생성되지만, 프로토타입 체인은 상속 계층 구조처럼 보이지만, 프로토타입을 사용하면 계층 구조의 각 수준이 별도의 개체로 표시되고 속성을 통해 서로 연결된다.
■자바스크립트의 클래스
생성자는 constructor 키워드를 사용하여 정의한다.
- 새로운 객체를 생성
- 생성자 코드에서 this참조할 수 있도록 새 객체에 바인딩this
- 생성자에서 코드 실행
- 새 객체를 반환
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>OOJS: Task 1</title>
</body>
<script>
//1.새로운 객체를 생성
class Shape{
name;
sides;
sideLength;
//2.생성자 코드에서 this참조할 수 있도록 새 객체에 바인딩
constructor(name,sides,sideLength){ //생성자
this.name = name ;
this.sides = sides;
this.sideLength = sideLength;
}
////3.생성자에서 코드 실행
calcPerimeter(name,sides,sideLength){ //메소드
alert(`The ${ this.name }'s perimeter length is ${ this.sides * this.sideLength }.`);
}
}
//4.새 객체 반환
const square = new Shape('square',4,5);
square.calcPerimeter();
</script>
</html>
■자바스크립트의 상속
extends 키워드를 사용하여 상속됨을 나타낸다.
super()로 상위 클래스 생성자가 예상하는 매개변수를 전달하여 먼저 상위 클래스 생성자를 호출 해야 한다 .
class Square extends Shape{
// 부모 클래스를 상속 받아 자식 클래스에서 재정의
constructor(sideLength){
super('square',4,sideLength);
}
calcArea(){ // 면적 구하기 메소드
alert(`The ${ this.name }'s area is ${ this.sideLength * this.sideLength } squared.`);
}
}
const square2 = new Square(4);
square2.calcArea();
■자바스크립트의 캡슐화
class 의 속성(property) 들은 기본적으로 public 하며 class 외부에서 읽히고 수정될 수 있다.
하지만 # 을 추가해 private data property를 선언할 수 있다.
private data property는 class 선언문 내부의 class 생성자(class constructor)에서 접근이 가능하다.
참고: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes/Private_class_fields
Private class fields - JavaScript | MDN
class 의 속성(property)들은 기본적으로 public 하며 class 외부에서 읽히고 수정될 수 있다. 하지만, ES2019 에서는 해쉬 # prefix 를 추가해 private class 필드를 선언할 수 있게 되었다.
developer.mozilla.org
class Circle extends Shape{
#color;
constructor(color){
super('circle',color);
this.#color = color;
}
getInfo(){
alert(`The ${ this.name }'s color is ${ this.#color } .`);
}
}
const circle = new Circle('purple');
circle.getInfo();
//circle.#color; SyntaxError
위의 클래스에서 #color 내부적으로 사용할 수 있지만 객체 외부의 코드가 브라우저에 #color 액세스하려고 하면 오류가 발생
circle.#color; //오류
프로토타입에 대한 내용은 아래 링크로!!
JavaScript_프로토타입1
자바스크립트 프로토타입를 이해하기 위해 작성한 게시물 1. 프로토타입 자바스크립트는 프로토타입 기반의 객체 지향 언어이다. 자바스크립트의 모든 객체는 프로토타입(prototype)이라는 객체
jjin-todo.tistory.com
요즘 IT라는 뉴스레터를 구독 중인데 참고하면 좋을 거 같습니다!!
자바스크립트에서 객체지향을 하는 게 맞나요? | 요즘IT
이번 글에서는 객체지향 프로그래밍에 대해 이야기를 해보려고 합니다. 그리고 자바스크립트의 객체지향은 일반적인 객체지향 프로그래밍과는 어떻게 다른지 그리고 Javascript에서는 객체지향
yozm.wishket.com
'Java script' 카테고리의 다른 글
| JavaScript_자바스크립트 클로저 (0) | 2022.09.21 |
|---|---|
| JavaScript_자바스크립트 Math.random() 활용-랜덤 뽑기 (0) | 2022.09.08 |
| JavaScript_자바스크립트 Math.random() 외 난수 생성하는 방법 (0) | 2022.08.16 |
| JavaScript_프로토타입1 (0) | 2022.08.16 |
| Javascript_이메일 형식 확인 정규식, 핸드폰 번호 형식 자동 적용 정규식 (0) | 2022.08.09 |
