본문 바로가기

Front-End: Web/JavaScript

객체지향 자바스크립트

반응형

자바스크립트는 객체지향(OOP: Object Oriented Programming) 언어이다. (코틀린도 이에 해당)

 

객체지향이란?

  • 클래스(Class)와 객체(Object/Instance) = 메서드(Method) + 속성(Property)
  • 캡슐화, 집합, 재사용, 상속, 변형

 


 

객체(Object/Instance)

어떤 것. 예를 들어 축구선수를 하나의 존재를 객체로 생각해보자.

- 속성(Property): 객체의 특성. (ex)이름, 나이, 키, 몸무게, ...

- 메서드(Method): 대상의 동작. (ex)드리블, 슛, 패스, 태클, ...

<축구 선수 객체>

var park_ji_sung = {
    name: "Park Ji Sung",	//method: properties
    age: 31,
    height: 178,
    weight: 70,
    position: "RW",
    team: "Queen's Park Rangers"
};
park_ji_sung.weight;	//70	method 호출

 

클래스(Class)

특정한 기준으로 나눈 비슷한 속성을 가지는 그룹들. 위의 예시의 경우 운동선수가 된다.

객체지향에서 클래스는 '틀', 객체는 '틀에서 찍어낸 것'이다.

<새로운 객체 생성>

var SoccerPlayer = function () {
};
SoccerPlayer.prototype = {
    name: String,
    age: Number,
    height: Number,
    weight: Number,
    position: String,
    team: String
};	//Class

var park_ji_sung = new SoccerPlayer();	//Instance
park_ji_sung.name = "Park Ji Sung";
park_ji_sung.age = 31;
park_ji_sung.height = 178;
park_ji_sung;	//SoccerPlayer

 

캡슐화

객체가 데이터를 속성에 저장하거나, 저장한 데이터를 이용하여 무엇인가를 수행하는 메서드를 포함하는 것.

예로 들어서 라이브러리를 이용해 객체를 생성하고 그 객체의 메서드를 호출한다면 그 메서드가 어떤 코드를 가지며 어떻게 동작하는지 신경 쓸 필요가 없다. 즉, 정보 은닉이라 생각하면 된다.

 

집합/구성

여러 객체를 하나의 새로운 것으로 구성하는 것. 개발할 내용을 쪼개어 몇 가지 계층으로 추상화시킬 수 있도록 해준다.

 

상속

이미 작성된 코드를 재사용하는 방법. 공통된 속성과 메서드를 가지고 있는 경우(A⊃B) B를 별도로 작성한다면 복잡하고 관리하기 어렵다. 따라서 이런 경우 상속을 사용하여 B를 클래스 A에 상속받아 생성한다.

*오버라이딩(overriding): 부모 클래스의 메서드 중 하나를 새로이 정의하는 것

 

 

반응형

'Front-End: Web > JavaScript' 카테고리의 다른 글

클로져(Closure)  (0) 2020.08.31
내장형 객체  (0) 2020.08.31
자바스크립트에서의 객체: Constructor  (0) 2020.08.31
자바스크립트의 기초  (0) 2020.08.31
JavaScript의 특징  (0) 2020.08.31