Object Oriented Programming

알고리즘의 모음 스탭 바이 스탭의 프로세스의 모임

 

프로그래밍 언어

3가지 타입

기계어

어셈블리어

고급어(저 어셈블리어에 고에 가까울수록 인간의 언어랑 가깝다)

 

기계어

- 1과 0으로 조합

 

어셈블리어

- 명령어가 10몇개 밖에 없다

 

고급어

- 영어랑 유사하다

- 인터프리터 (설명)

- 절차지향적언어 ( 한 코드에서 순차적으로 진행해서 기능을 가지게) 

- 객체지향적언어 (모든게 객체로 되있다, 물체?, thing? 그것?)

간단한 예) DOM HTML ELEMENT로 이루어졌다.

JAVA, C++ Python, JavaScript

 

 

OOP

- 모든것은 Object로 이루어졌다. 

- 재사용성이 높다.

예) 자동차라는 오브젝트 자동차가 공통적으로 가지고있는 기능, 속성

기능 속도, 주유, 라이트 / 속성 : 몇 인승, 색깔, 마력 등

 

Class 

- 블루프린트(청사진) 

 

class Car (Name of Class)

 

color; price' speed'                                             => 속성 Properties / Attribute

Start(); Backward(); Forward(); Stop();      => 기능 Method / Behaviours

 

 

클래스에서 속성(상태, 상황)은 클래스의 정보를 나타냄 

Ex) 자동차의 정보 => 속도, 색깔, 브랜드, 마력, 몇인승 등...

메소드(행동,동작)는 클래스의 동작이나 기능을 나타냄

Ex) 자동차가 출발, 멈춤, 속도를 올린다. 등...

---

 

OOP 4가지 기본 개념

 

1. Encapsulation (캡슐화)

- 비슷한 역할을 하는 속성과 메소드들을 하나의 클래스로 모아서 캡슐에 담았다.

- 캡슐화는 외부로 부터 내부를 감싸는 은닉화 개념을 가지고 있다.

- 객체를 통해 같은 기능을 수행하는 함수, 변수들을 하나로 묶고, 내부에서 쓰이는 함수, 변수 등을 만들어 사용한다.

 

 

사용자 입장에서는 사진을 찍는 버튼을 눌렀을때 '셔터 닫힘', '메모리 저장' 등의 

카메라안에서 일어나는 내부적인 기능(함수)들을 알 필요가 없다.

그래서 외부 객체 이용자에게 복잡한 함수 즉, 내부에 접근하지 못하게 한다.

오로지, '사진 찍는 버튼' 기능만 공개하는 것이다. 

만약에 외부 객체 이용자가 내부에 접근해서 '셔터 닫힘', '메모리 저장' 등을 건드릴수 있다면

객체에 포함된 데이터의 손상과 오용이 일어날 수 있기때문에 '은닉화'를 한것이라 생각한다.

 

 

 

 

 

2. Inheritance (상속성)

- 상위 개념의 특징을 하위 개념이 물려받는다라는 개념으로, 공통되는 특징을 상속을 통해 쉽게 전달한다.

- 코드를 재사용하거나 기존 코드를 좀 더 확장 시킨다.

 

카메라의 공통적 기능 중 '촬영 버튼' 기능을 매번 다른 카메라 종류들(ip카메라, 핸드폰카메라,cctv)을

만들때, 계속해서 '촬영 버튼' 기능을 개발하지 않고, 객체의 상속을 통해 물려받아(재사용성) 편리하게  구현가능

공통된 속성이 있으면, 또 다른 카메라의 기능이 달린 물품을 만들때 상속(재사용) 하여 만들면 시간, 코드 절감

 

 

 

3. Abstraction (추상화)

- 불필요한 정보는 숨기고, 중요한 정보만을 표현해서 공통의 속성이나 기능을 묶어 이름을 붙임

- 인터페이스가 간단해짐

- 사용자는 중요한 정보와 기능은 알지만, 내부적 원리는 모르기때문에 보안 향상 면에서 있다고 함

 

카메라에는 사진을 찍는 '버튼'이 있다. 전문가가 아닌 이상 버튼을 눌렀을때

어떤 원리로 사진이 찍히고, 그것이 메모리에 어떻게 저장되는지 알지 못한다.

그래도, 셔터를 누르면 사진이 찍힌다는건 누구나 알고있다. 이것이 바로 추상화

즉, 객체를 활용할 때 이용자는 객체의 원리에 대한 코드를 정확히 알 필요 없다. 

사용 설명대로 객체를 가져다 쓰면 된다.

 

자동차로 또 다른 예시) 엔진이 어떻게 돌아가고, 연료가 어떻게 연소되면서 자동차가 굴러가고,

속력은 어떻게 올라가는지 원리는 몰라도, '운전대', '브레이크', '엑셀' 같이 이미 추상화 되어있는

인스턴스(객체)를 사용하기만 하면 되는 것이다. 원리? 몰라도 된다.

 

 

 

4. Polymorphism (다형성) 

- Poly(Many) + morphism(Form), '여러가지 형태를 가질 수 있는 기능'이다.

- 상속에서 자식 클래스는 부모 클래스의 속성과 기능을 물려받고, 자식은 수정이 가능하다고 했다.

  같은 이름을 가진 메소드라도 각 자식의 상황에 맞게 다르게 구현될 수 있게 하는 것이 다형성이다.

 

카메라 라는 부모가 이미 개발한 '촬영 버튼'을 자식(즉석 사진기와 아이폰)에게 상속했다.

자식(즉석 사진기와 아이폰)들은  각자 촬영 버튼을 눌렀을때 동작하는 방식을 다르게 설정할 수 있다.

 

즉석 사진기는 촬영 버튼을 누르면, 바로 '출력' 하는 기능으로 바꿀 수 있고,

아이폰은 촬영 버튼을 누르면, '전송'하는 기능으로 바꿀 수 있다.

 

자식으로써 동일하게 '촬영 버튼'을 상속 받았지만, 동작 방법의 세부 사항은 서로 다르게 한 것이다.

Polymorphism(다형성) 코드에 확장성을 의미한다.

 

 

위의 그림에서  주인이 말하는 방법(speak 라는 메소드)을 동물(자식)들에게 가르쳤다.

동물(자식)들은 말하는 방법을 배웠지만 각자 자신의 속성을 이용해 speak 메소드를 실행한다.

 

 

---

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

instantiation Patterns(인스턴스를 만드는 과정)

4가지 Class 선언 방식

1. Functional

2. Functional Shared

3. Prototypal

4. Pseudoclassical

1. Functional Instantiation 방식 (자동차 공장을 만들어 보자)

(1) 함수 실행했을 때, 찍어내 줄 객체를 선언
(2) someInstace의 position을 0으로 초기화, Car 함수가 실행되어 나온 인스턴스의 postion이 초기값은 항상 0
(3) someInstance에 move라는 메소드를 추가. function 내부에 있는 this는 someInstace를 뜻함
     this.position은 someInstance.position과 같고, 실행시 position 값이 1만큼 증가할 것이다.
(4) return을 해주어야 함수의 결과로 객체가 나옴
(5) car1.move()를 실행한 후 
(6) car1을 console.log로 찍어보면 postion이 1인 것을 확인

var Car = function() {
  var someInstace = {}; // (1)
  someInstace.position = 0; // (2) 
  someInstace.move = function() { // (3)
    this.position += 1;
  }
  return someInstace;  // (4)
};

var car1 = Car();
var car2 = Car();
car1.move(); // (5)

console.log(car1) // (6) {position: 1, move: ƒ}

초기 위치를 지정해 줄 수도 있다.

var Car = function(position) {
  var someInstace = {};
  someInstace.position = position;
  someInstace.move = function() {
    this.position += 1;
  }
  return someInstace;
};

var car1 = Car(5);

---

2. Functional Shared 방식 (자동차 공장을 만들어 보자)

(1) Car 함수를 선언해 준다. someInstance의 property로 position으로 넣어줬다.

var Car = function(position) {
  var someInstace = {
    position: position,
  };
  
  return someInstance;
};

(2) 메소드를 담아줄 객체를 생성한다. 모든 메소드는 someMethods에 담을 것! (이 예제는 move 함수 하나밖에 없지만...)

var someMethods = {}; // (2)
someMethods.move = function() {
  this.position += 1;
};

var Car = function(position) {
  var someInstace = {
    position: position,
  };
  
  return someInstance;
};

(3) someInstace와 someMethods를 합치는 extend함수를 만들어서 Car함수 내부에 합친다.

var extend = function(to, from) { // (3)
  for (var key in from) {
    to[key] = from[key];
  }
};  

var someMethods = {};
someMethods.move = function() {
  this.position += 1;
};

var Car = function(position) {
  var someInstace = {
    position: position,
  };
  extend(someInstance, someMethods); // (3)
  return someInstance;
};

var car1 = Car(5);
var car2 = Car(10);

 

왜 이런 방식을 사용할까? 

=> 이전의 Functional 방식은 instance를 생성할 때마다 모든 메소드를 someInstace에게 할당하므로

각각의 인스턴스들이 메소드의 수 만큼의 메모리를 더 차지하기 때문이다.

반면, Functional Shared 방식은 someMethods라는 객체에 있는 메소드들의 메모리 주소만을 참조하기 때문에 메모리 효율 좋음

 

Functional 방식과 Functional Shared 방식 비교

3개, 4개의 인스턴스라서 메모리 차이는 얼마나지 않아보이지만, 만약 큰 프로젝트라면 차이가 많이 날것같다.

---

3. Prototypal

(1) Functional Shared 방식과 비슷하다. {}만 바꿔보자

var someMethods = {};
someMethods.move = function() {
  this.position += 1;
};

var Car = function(position) {
  var someInstace = {}; // (1) 이 부분 => {} 
  someInstance.position = position;
  return someInstance;
};

(2) Object.create 는 특정 객체를 프로토타입을 하는 객체를 생성해 주는 함수

var someMethods = {};
someMethods.move = function() {
  this.position += 1;
};

var Car = function(position) {
  var someInstace = Object.create(someMethods); // (2)
  someInstance.position = position;
  return someInstance;
};

var car1 = Car(5);
var car2 = Car(10);

 

 

Object.create()

---

4. Pseudoclassical

(1) 메소드 프로토타입으로 만든다.

var Car = function(position) {
  this.position = position;
};

Car.prototype.move = function() { // (1)
  this.position += 1;
};

(2) 찍어낼 때는 new operator를 붙여야 된다. 가장 많이 쓰이는 방식이라 한다.

var Car = function(position) {
  this.position = position;
};

Car.prototype.move = function() { // (1)
  this.position += 1;
};

var car1 = new Car(5);
var car2 = new Car(10);

 

---

 

What is Prototype?

프로토타입은 원래의 형태 또는 전형적인 예, 기초 또는 표준이다.

시제품이 나오기 전에 제품의 원형으로 중요한 기능들이 포함된 시스템의 초기 모델이라고 한다.

프로토타입이라는 단어에서 핵심단어는 [기초, 표준, 제품의 원형, 초기 모델] 이다

자바스크립트는 프로토타입 언어라고 해도 과언이 아니다.

 

프로토타입의 개념은 프로토타입 객체(Prototype Object), 프로토타입 링크(Prototype Link)를 통틀어 말한다.

프로토타입 객체(Prototype Object) : 자바스크립트에서 객체가 생성될때, 생성된 객체의 부모가 되는 객체의 원형
프로토타입 링크(Prototype Link) : 생성된 객체와 부모 객체와의 참조를 이어주는 링크

When use Prototype?

function Person(){
	this.hand = 2;
	this.body = 1;
	this.nose = 1;
}

var kim = new Person();
var lee = new Person();

console.log(kim.hand); // 2
console.log(kim.body); // 1
console.log(kim.nose); // 1

console.log(lee.hand); // 2
console.log(lee.body); // 1
console.log(lee.nose); // 1

 

위의 코드에서 Peson이라는 함수를 통해 kim과 lee 객체를 생성했다.

이들(kim과 lee 객체)은 각자 3개의 속성(hand, body, nose)을 가지고 있고 데이터(2,1,1) 또한 동일하다.

메모리 관점에서 보면 kim과 lee 객체가 생성되면서 메모리에는 6개의 변수가 저장되었다. (중복된 값으로)

밑에 코드는 Prototype을 사용한 객체를 생성하는 코드이다.

function Person(){}

Person.prototype.hand = 2;
Person.prototype.body = 1;
Person.prototype.nose = 1;

let kim = new Person();
let lee = new Person();

console.log(kim.hand) // 2
console.log(lee.hand) // 2

 

출력 값만 따졌을때는 위에 있는 코드와 동일할 것이다. 하지만 메모리 관점에서 살펴보면 다르다.

kim과 lee는 자신이 변수를 가진게 아니라, Person.prototype 이라는 빈 Object가 어딘가에 존재하고,

그 안에 있는 hand라는 속성을 공유하고 있는 것이다.

그 말은 즉슨, 위에 코드 처럼 생성된 객체의 수 만큼 변수를 가진게 아니라,

같은 생성자를 통해서 만들어진 객체들은 하나의 prototype 이라는 Object를 공유해서 사용하는 것이다.

 

Prototype Object

자바스크립트에서 함수를 생성할 때, 기본적으로 Constructor(생성자)가 부여된다.

생성자가 부여된 함수는 new를 통해서 객체를 생성할 수 있다. 

또 Prototype Object가 생성되고 이 Object와 함수가 가지고 있는 prototype 속성과 연결이 된다.

Person.prototype은 어떠한 Prototype Object와 연결 되있다.

위에 코드에서 Person.prototype.hand 가 정의되면, Prototype Object의 하나의 속성으로 추가된다는 뜻이다.

생성된 함수는 prototype이라는 속성을 통해 Prototype Object에 접근 가능

Prototype Object는 일반적인 객체와 같으며, 기본적인 속성으로 constructor와 __proto__를 가진다. 

여기서 constructor는 Prototype Object와 같이 생성되었던 함수(Person())를 가리킨다.

__proto__는 Prototype Link 이다.

kim과 park은 Person 함수를 통해 생성되었으니 Person.prototype을 참조할 수 있게 된다.

 

Prototype Link

kim에는 hand라는 속성이 없는데 kim.hand를 실행하면 2의 값을 참조하는것을 볼 수 있다.

Prototype Object에 존재하는 hand 속성을 참조한 것이다. 이게 가능한 이유는

kim이 가지고 있는 딱 하나의 속성 __proto__ 때문이다.

prototype 속성은 함수만 가지고 있던 것이고,  __proto__ 속성은 모든 객체가 빠짐없이 가지고 있는 속성이다.

__proto__는 객체가 생성될 때 조상이었던 함수의 Prototype Object를 가리킨다.

 

객체, 함수, Prototype Object의 상관관계

kim 객체가 hand를 직접 가지고 있지 않기 때문에 hand 속성을 찾을 때 까지 상위 프로토타입을 탐색한다.

최상위인 Object의 Prototype Object까지 탐색했는데 없을 경우 undefined를 리턴한다.

__proto__속성을 통해 상위 프로토타입과 연결되어있는 형태를 프로토타입 체인(Chain)이라고 한다.

 

프로토타입 체인, Object()가 최상위

 

console.log( (123).toString() ); // "123"

Object.prototype.toTest = function () { return 'test1' }
console.log( (123).toTest() ); // "test1"

function fn () {}
fn.prototype.name = 'test2'
var newFn = new fn();
console.log(newFn.name) // "test2"
console.log(newFn.age) // undefined
console.log(newFn.toTest()); // "test1"

---

 

Object.create 메소드

- 지정된 프로포타입 객체 및 속성을 갖는 새 객체를 만듦

Object.create(proto[, propertiesObject])

proto : 프로토타입객체

propertiesObject : 새로운객체의프로퍼티

 

 

Human 객체가 있고, Human 객체 안에 sleep 기능을 만들었다.  Student 객체에 sleep 기능을 사용하고 싶을때,

Object.create를 사용하여 sleep 기능을 Student에 붙여주기를 한다고 이해하면된다.

 

Student.prototype에 Object.create를 사용해서 Human.prototype를 참조하는 새로운 객체를 만듬

Human의 prototype을 참조하기 때문에 Student.__proto__ 는 Human을 참조한다

Student.prototype에 learn 함수를 추가해도 새로 생성된 객체이기 때문에 메모리 주소가 달라 

Human.prototype에 learn 함수가 추가되지 않는다.

 

 

var Human = function(name) {
  this.name = name;
}

Human.prototype.sleep = function() {
  console.log(this.name + ' is sleeping...');
};

var steve = new Human('steve');

var Student = function(name) {
  Human.call(this, name); // Human.apply(this, arguments);
}

Student.prototype = Object.create(Human.prototype);
Student.prototype.constructor = Student;
Student.prototype.learn = function() {};

var john = new Student('john');
john.learn();
john.sleep(); // john is sleeping...

 

 

ES6 class, super 키워드 

ES6 class 키워드를 사용해서 생성자를 만들 수 있다.

constructor 안에 생성자의 정보를 입력한다.

super 키워드는 extends한 클래스의 함수를 사용할 수 있게 한다.

위에서 call 한 것과 비슷하다

class Human {
  constructor(name) {
    this.name = name;
  }
  sleep() {
  }
}

var steve = new Human('steve');

class Student extends Human {
  constructor(name) {
    super(name); // 위의 this를 super로 대체할 수 있다.
  }
  learn() {
  }
}

var john = new Student('john');
john.learn();
john.sleep(); // john is sleeping...

 

constructor의 모양새가 똑같다. 자식클래스에서 생략이 가능하다

constructor의 argument(name)가 똑같으면 자식의 constructor 생략 가능

class Human {
  constructor(name) {
    this.name = name;
  }
  sleep() {
  }
}

var steve = new Human('steve');

class Student extends Human {
  learn() {
  }
}

var john = new Student('john');
john.learn();
john.sleep(); // john is sleeping...

 

class Pizza {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
  result() {
    console.log(this.name + "입니다.");
  }
}
class Food extends Pizza {

  result() {
    super.result(); // 피자입니다.
    console.log(this.name + "종류는 고구마피자 입니다.");
  }
}

const food = new Food("피자");
food.result(); // 피자종류는 고구마피자 입니다.

 

 

 

javascript 상속 (prototype / class)