javascript_OOP(Object Oriented Programming)

장봄·2020년 6월 17일
1

code-states_IM_2주차

목록 보기
1/4

🧐 OOP란?

javascript는 웹개발에서 많이 사용되는 언어 중 하나이다. javascript에서의 OOP는 여러 메커니즘 중 객체 지향 메커니즘을 의미한다. JavaScript는 클래스 기반 객체 지향 언어는 아니지만 객체 지향 프로그래밍(OOP)을 사용하는 방법이 있다. 바로 프로토 타입 기반의 언어이다.(ECMAScript 6에서 새롭게 클래스가 도입되었다.)

쉽게 말하면 공통의 기본 속성을 포함하고 있는 큰 틀을 만들고 이것을 기반으로 instance를 찍어내는 것이다. 음... 더 쉽게 예시를 들어보자. 붕어빵기계를 생각하면 좋겠다. 붕어빵기계를 큰 틀로 생각하고 여기서 만들어지는 붕어빵이 instance이다. 붕어빵의 속성은 붕어빵에 들어가는 팥이나 슈크림을 생각하면 쉽지 않을까 생각한다. 큰틀은 같지만 속성에 다른 값을 할당해서 다양한 instance를 쉽게 만들어 내는 프로그래밍이다.

기본 컨셉

1) Encapsulation(캡슐화) : 외부에서 사용될 여러가지 속성들을 내부에 만드는 것을 의미한다.

2) Inheritance(상속) : instance가 부모의 속성은 물론 prototype을 물려받는 것을 의미한다.

3) Abstraction(추상화) : 내부는 복잡하고 어려운 알고리즘이 사용되어있더라도 사용자입장에서는 사용이 용이한 것을 의미한다.

4) Polymorphism(다형성) : 속성, 함수 또는 하나 이상의 실현 된 객체를 생성하는 기능을 의미한다. 다시 말해, 여러 가지 객체 유형이 다른 방식으로 작동하지만 공통 인터페이스를 지원하는 동일한 기능을 구현할 수 있는 능력이다.

javascript다형성참고

Object를 생성하는 여러가지 방법들

javascript는 클래스의 개념이 없고 별도의 객체 생성 방법이 존재한다.

1. 객체 리터럴

변수에 직접 객체를 작성해서 할당하는 것을 의미한다. 객체를 정의할 때 가장 많이 사용되는 방법이며 사용도 쉽다.

let Object = {
  name: "Spring",
  age: "125",
  studyTime: function(){
  	console.log("5");
  }
  subject: {
  	"javascript";
  }

2. Object() 생성자 함수

자바스크립트에서 기본적으로 지원하는 객체 생성자 Object를 이용하는 방법이다. 생성자 함수를 만들고 그 함수를 이용해서 객체를 생성하는 방법이다.

let developer = new Object();

developer.name = "spring";
developer.age = 50;

console.log(developer); // developer {name:"spring", age:"50"}

3. 생성자 함수

생성자 함수를 선언하고 new연산자를 이용해서 instance를 생성한다.

function Developer(name, age) {
    this.name = name;
    this.age = age;
}

let spring = new Developer("spring", 50);

object생성방법과 장단점 참조

Prototype과 _ _ Proto _ _

시작하기 앞서 이와 관련해서 코드로 예시를 들어 간단하게 블로깅한 적이 있다. 이 링크를 클릭하면 간단한 예시로 이해를 도울 수 있다.

1) Prototype : prototype은 객체이다. 원형객체의 메소드와 속성을 가지고 있다. constructor는 생성자함수이다. 생성자와 프로토타입 객체는 별도의 객체로서 서로의 참조값을 prototype, constructor에 가지고 있다.

javascritp의 모든 객체는 자신의 prototype으로 부터 constructor프로퍼티를 상속한다. 객체 인스턴스가 생성되는 순간 prototype의 constructor생성자 메서드를 호출한다.

출처: https://webclub.tistory.com/392 [Web Club]

("정재남"님의 강의를 듣고 이미지와 함께 prototype의 정리를 블로깅한 Prototype링크입니다.😉)

2) _ _ Proto _ _ : _ _ _ Proto _ _속성은 모든 객체가 빠짐없이 가지고 있는 속성이다. 객체가 생성될 때 조상이었던 함수의 Prototype Object를 가리키며 생략이 가능하다.

javascript에서 prototype을 사용하는 이유

javascript는 다른 클래스기반언어에서 상속을 사용하는 것과는 다르게 prototype기반 프로그래밍이라서 이러한 상속을 받기 위해 객체를 원형으로해서 이 원형을 활용해 복제를 해서 자식을 만들고 상속을 사용하는 과정을 사용할 수 있다.

물론 이 과정에서 class없이 상속을 받기위한 과정을 만들어가다보니 constructor의 연결이 끊어지거나 this을 바인딩해야하는 과정이 생겼다. 이 부분을 보안하고자 class라는 키워드를 이용해서 상속을 용이하게 했지만 이것 역시 prototype의 일부분이고 단점을 보안해서 사용하는데 용이한 장점을 가진 것이지 다른 언어에서 사용하는 class와는 다르다고 봐야 한다.

profile
즐겁게 배우고 꾸준히 블로깅하는 개발자입니다 ;>

0개의 댓글