OOP :: (객체 지향 프로그래밍) TIL

Sehyeon Park·2021년 4월 8일

Today I Learned OOP

초기 프로그래밍
절차적 언어 :: ( C 언어, 포트란등.. ) 순차적 명령의 조합

데이터와 기능이 한번에 묶어서 처리 및 'Class' 데이터 모델을 통한 코드 작성

Javascript 또한 객체지향언어로 작성이 가능.
객체 지향 프로그래밍은 '객체'로 그룹화
객체는 한번 만들게 되면 반환되기 전까지 유지.

class : original form (원형) , blueprint(청사진)
objects : class 내에 세부사항(속성)을 넣은 형태

틀 : 자동차 (class)
속성 : 속력,색깔,탑승인원 등... (objects)

클래스는 생성자 함수(객체를 만들기 위한 함수)를 포함한다

자바스크립트에서 클래스를 통해 만들어진 객체를 인스턴스라고 부른다
class Car // Name of class
color; brand; speed; price; // Properties, Attribute
//Methods
start();
Backward();
Forward();
Stop();

Basic Concepts

Encapsulation (캡슐화)
Inheritance (상속)
Abstraction (추상화)
Polymorphism (다형성)

Encapsulation (캡슐화)

데이터와 기능을 하나의 단위로 묶는 것
은닉(hiding)화 : 디테일한 구현이나 데이터는 숨기고, 동작만 노출시킨다.
장점 : 느슨한 결합(Loose Coupling) 언제든 구현을 수정가능하다.
재사용성을 높인다.

속성과 기능(메소드)을 따로 정의하는 것이 아닌, 하나의 객체 안에 넣어서 묶는다.

Inheritance (상속)

부모 클래스의 특징을 자식 클래스가 물려받는 것
"기본 클래스(base class)의 특징을 파생 클래스(derive class)가 상속받는다"

Human (기본 클래스 : base class)

properties : age, name, sex ...

method : eat, sleep, walk ...

Student (파생 클래스 :derive class)

properties : age, name, sex, learning subject(추가)...

method : eat, sleep, walk, study(추가)...

Abstraction (추상화)

인터페이스(메소드와 속성만 정의한 것)가 단순해진다. (simple interface)
포커싱 : 필요하지 않은 메소드 노출시키지 않기, 단순한 이름으로 정의하기
변화에 대한 영향을 최소화한다.

많은 기능들이 보여지지 않게 되므로 사용상의 변화가 일어나지 않게 된다.
캡슐화와 헷갈릴수 있다 ( 캡슐화는 은닉에 포커스함을 잊지말자! )

Polymorphism (다형성)

poly : "많은", morph : "형태"
같은 메소드도 다양한 방법으로 다른 구현을 할 수 있다.

Textarea(TextBox), Select, 그리고 Checkbox
공통부모인 HTML Element(클래스)에 render(메소드)를 만들고 상속을 받는다.
이때, render라는 메소드가 다른 방법으로 작동을 한다.

TextBox : 글을 작성할수 있도록 가로 상자 밑 커서필요.

Select : 박스를 누르면 선택지가 보인다.

Checkbox : 박스를 누르면 체크가 된다.

prototype

JavaScript는 흔히 프로토타입 기반 언어(prototype-based language)라 불린다.
모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다.
MDN

자바스크립트에는 Prototype Link 와 Prototype Object라는 것이 존재합니다. 그리고 이 둘을 통틀어 Prototype이라고 부릅니다.

모든 Function 에는 Prototype이 존재한다.

Prototype Object

function Car() {} // => 함수
var CarObject = new Car(); // => 함수로 객체를 생성

var obj = new Object();

위 코드에서 Object는 자바스크립트에서 기본적으로 제공하는 함수
Function, Array도 모두 함수로 정의되어 있다.

함수가 정의될 때는 2가지 일이 동시에 이루어진다.

해당 함수에 Constructor(생성자) 자격 부여

해당 함수의 Prototype Object 생성 및 연결

Constructor 자격이 부여되면 new를 통해 객체를 만들수있다.
(constructor가 아니면 new를 사용할 수 없다.)
함수를 정의하면 함수만 생성되는 것이 아니라 Prototype Object도 같이 생성이 된다.

생성된 함수는 prototype이라는 속성을 통해 Prototype Object에 접근할 수 있습니다. Prototype Object는 일반적인 객체와 같으며 기본적인 속성으로 constructor와 proto를 가지고 있습니다.

car.prototype에 brand 를 추가했을때, mini가 추가된것을 확인 할 수 있었다.

Prototype Object는 일반적인 객체이므로 속성을 마음대로 추가/삭제 할 수 있다.

MDN 예제

생성자 함수

function Person(first, last, age, gender, interests) {

  // 속성과 메소드 정의
  this.first = first;
  this.last = last;
//...
}

인스턴스

var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);

Quiz
person1.valueOf() 를 호출하게 된다면?
A )

1) 브라우저는 우선 person1 객체가 valueOf() 메소드를 가지고 있는지 체크합니다.
2) 없으므로 person1의 프로토타입 객체(Person() 생성자의 프로토타입)에 valueOf() 메소드가 있는지 체크합니다.
3)여전히 없으므로 Person() 생성자의 프로토타입 객체의 프로토타입 객체(Object() 생성자의 프로토타입)가 valueOf() 메소드를 가지고 있는지 체크합니다.
Person() 의 생성자 proto가 Object 임을 확인할수 있다.
여기서 Object.prototype.valueOf()의 valueOf() 메서드는 특정 객체의 원시 값을 반환하는 것이므로
 {first: "Bob", last: "Smith"} 가 나오게된다.

Quiz
var person2 = Object.create(person1);
이 코드를 실행 한 후
person1.constructor
person2.constructor
를 실행하게 된다면...?

A)

모든 생성자 함수는 constructor 속성을 지닌 객체를 프로토타입 객체로 가지고 있다.

위에 Car.prototype 예제를 보면 알 수 있듯이 두 구문 모두 Person() 생성자 함수를 반환한다.

일반적인 메소드 정의 (Reference : MDN)

function Test(a, b, c, d) {
  // 속성 정의
}
// 첫 메소드 정의
Test.prototype.x = function() { ... };
// 두번째 메소드 정의
Test.prototype.y = function() { ... };
// 그 외.

prototype chain

Quiz )Teacher()가 메소드도 상속 받으려면 어떻게 해야 할까요?
Teacher.__proto__ = Person.prototype ; // X
Teacher.prototype = Person.prototype ; // X
Teacher.prototype = Object.create(Person.prototype); // 0
이후 Teacher.proto 는 person의 constructor을 따라가게 되므로 이를 바꿔줘야한다.
Teacher.prototype.constructor = Teacher;
를 추가함으로서 Teacher의 생성자또한 정의 하게되면,
결과적으로 Teacher의 메소드는 person(Prototype of Person.prototype)을 상속받고 또한 Teacher의 생성자또한 Teacher()를 반환하게 된다.

또한 Person의 this와 연결해주기 위해선 아래의 작업도 필요하다.
var Teacher = function (first , last, age, gender , interests){
	Person.call(this, name);  		// person.apply(this, arguments);
 	Person.call(this, last);
    .
    .
    .
  }

이처럼 프로토타입 객체도 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수도 있고 그 상위 프로토타입 객체 또한 동일한 방법으로 가능하다 . 이를 프로토타입 체인(prototype chain)이라 부른다.

상속되는 속성과 메소드들은 각 객체의 생성자의 prototype이라는 속성에 정의되어 있다.

prototype 속성도 하나의 객체이며 프로토타입 체인을 통해 상속하고자 하는 속성과 메소드를 담아두는 버킷으로 주로 사용되는 객체이다.

프로토타입 객체는 "proto" 속성으로 접근 가능한 내장 객체이다.

Using class keyword

윗 글을 다음과 같이 바꿔 쓸 수 있다

class Person{
	constructor (first , last, age, gender , interests){
  	  this.first = first;
	  this.last = last;
    ...
   }
   teach(){
   console.log('국어를 배우자!')
   }
   }
   
var tim = new Person ('Tim' , ...);

class Teacher extends Person {
	constructor (first , last, age, gender , interests){ 
   	   super(first , last, age, gender , interests);
          }
          study(){
          }
          }
          
var John = new Teacher ('John' ,  ...);


John.teach();
John.study();

prototype 연결부분을 extends , constructor 구문으로
this 연결을 super 로 연결함으로서 좀더 쉽게 사용할 수 있다.

자식 argument가 같은경우 자식의 constructor을 생략 가능하다.
class Teacher extends Person {
           teach(){
           }
           }

Plus
자식 메소드에서 부모 메소드를 확장시켜 적고 싶을 경우 = .apply(this);를 추가
Ex)
Teacher.prototype.teach = function() {
      person.prototype.teach.apply(this);
  	  console.log('수학을 배우자!');
}
//'국어를 배우자!'
//'수학을 배우자!'

person.prototype.teach.apply(this);를 추가함으로서
기존 부모 메소드에서 추가된 '수학을 배우자!'라는 log가 추가되어 나온다.

Sehyeon Park

후회하지 않는 개발자가 되자!

이전 포스트

조건문

다음 포스트

OOP :: (객체 지향 프로그래밍) TIL

Today I Learned OOP

Basic Concepts

Encapsulation (캡슐화)

Inheritance (상속)

Abstraction (추상화)

Polymorphism (다형성)

prototype

Prototype Object

MDN 예제

생성자 함수

인스턴스

prototype chain

Using class keyword

조건문

Data Structure :: TIL

0개의 댓글

﻿OOP :: (객체 지향 프로그래밍) TIL

Today I Learned OOP

Basic Concepts

Encapsulation (캡슐화)

Inheritance (상속)

Abstraction (추상화)

Polymorphism (다형성)

prototype

Prototype Object

MDN 예제

생성자 함수

인스턴스

prototype chain

Using class keyword

조건문

Data Structure :: TIL

0개의 댓글

OOP :: (객체 지향 프로그래밍) TIL