OOP

태초에 절차적 언어가 있었다.

다만 절차적 언어는 번역상의 오류가 굳어진 표현법이라고 한다.
Procedural Programming이라는 단어에서 prcedural의 `procedure를 절차로 번역했기 때문인데, prcedure는 c에서 함수를 의미하며, 함수 호출을 통한 추상화와 재사용성을 얻기 때문에 procedural programming이 된 것이라고 한다. 결론적으로 말하자면 모든 언어는 절차적이기 때문에 '절차적 프로그래밍'이라는 말은 좋지 않은 구분법으로 보인다.
<참고: https://namu.wiki/w/절차적%20프로그래밍>

절차적 언어와 객체 지향언어를 나누시었다.

정의:
객체 지향 프로그래밍(영어: Object-Oriented Programming, OOP)은 컴퓨터 프로그래밍의 패러다임 중 하나이다. 객체 지향 프로그래밍은 컴퓨터 프로그램을 명령어의 목록으로 보는 시각에서 벗어나 여러 개의 독립된 단위, 즉 "객체"들의 모임으로 파악하고자 하는 것이다. 각각의 객체는 메시지를 주고받고, 데이터를 처리할 수 있다.
<출처 - https://ko.wikipedia.org/wiki/객체_지향_프로그래밍>

https://jeong-pro.tistory.com/95 여기도 참고할만 하다

---

클래스

어떤 문제를 해결하기 위한 데이터를 만들기 위해 추상화를 거쳐 집단에 속하는 속성/property과 행위를 변수와 메서드로 정의한 것

참고 :
객체 내에는 데이터와 기능에 대응하는 속성과 메소드가 존재한다.
예를 들어, 모든 자동차는 공통적인 기능과 고유의 속성이 있다. 가속, 감속, 주유 딍이 기능과 색상, 최고 속력, 탑승인원과 같은 고유의 데이터가 존재한다.

• 클래스는, 세부 사항이(속성/property)이 들어가지 않은 청사진으로 볼 수 있다. 세부 사항(속성/property)만 정해준다면 객체가 될 수 있다. 클래스를 통해 만들어진 객체를 특별히 인스턴스라고 부른다.

• 생성자는 클래스에 세부 사항(속성/property)을 넣어주는 역할을 한다. (함수에 인자를 넣듯, 생성자는 속성을 클래스에 넣는다.)

인스턴스

클래스에서 정의한 것을 토대로 실제 메모리상에 할당된 것으로 실제 프로그램에서 사용되는 데이터

---

객체 지향 프로그래밍의 4가지 기본 컨셉

• 캡슐화

비슷한 역할을 하는 속성과 메소드들을 하나의 클래스로 모은 것을 캡슐화라고 한다. 이 캡슐화의 목적은 코드를 재수정 없이 재활용하는 것이다.

또한 캡슐화의 측면 중 은닉화도 있다.
은닉화는 내부 데이터나 동작이 외부로 노출되지 않도록 만드는 것이다.
아래는 은닉화의 예시다.
각각 클로저와 객체를 이용해서 구현한 것이다.

< 클로저 >

// 클로저를 통해 구현한 은닉화의 예시
function makeCounter() {
  let value = 0
  return {
    increase: function() {
      value++ // 메소드 호출을 할 경우, this는 makeCounter 함수가 리턴하는 익명의 객체입니다
    },
    decrease: function() {
      value--
    },
    getValue: function() {
      return value;
    }
  }
}

let counter1 = makeCounter()
counter1.increase()
counter1.getValue() // 1

let counter2 = makeCounter()
counter2.decrease()
counter2.decrease()
counter2.getValue() // -2

< 클래스 >

class Counter {
  constructor() {
    this.value = 0;
  }

  increase() {
    this.value++;
  }

  decrease() {
    this.value--;
  }

  getValue() {
    return this.value;
  }
}

let counter1 = new Counter()
counter1.increase()
counter1.getValue() // 1
counter1.value // 1: 접근가능

let counter2 = new Counter()
counter2.decrease()
counter2.decrease()
counter2.getValue() // -2
counter2.value // 2: 접근가능

• 상속

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

• 추상화

  내부 구현은 복잡한데, 실제로 노출되는 부분은 단순하게 만든다는 개념이다.
  즉 클래스를 사용하는 사람이 필요하지 않은 메소드 등을 노출시키지 않고, 단순한 이름으로 정의하는 것을 의미한다.

• 다형성

  같은 base class에서 상속 받은 메소드가 서로 다른 객체 안에서 다른 방식으로 작동하는 것

---

참고 할 만한 자료

• introduction to object oriented programming, Moutaz Haddara
  링크👇
  https://www.slideshare.net/haddara1/introduction-to-object-oriented-programming-42639494

---

🤬 Prototype

• 프로토타입 MDN문서
  https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes
  
  

• 프로토타입 관련하여 설명되어 있는 사이트
  (이 글은 이 사이트를 참고하여 작성 되었습니다.)
  https://poiemaweb.com/js-prototype
  
  

• Javascript에서의 상속 MDN 문서
  https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Inheritance

---

Prototype이란

JavaScript는 Java, C++ 같은 클래스 기반 객체지향 프로그래밍 언어와는 다르게, 프로토타입 기반 객체지향 프로그래밍 언어다.

자바스크립트의 모든 객체는 부모 역할을 담당하는 객체와 연결 되어있다. 이로 인해 부모 객체의 property나 method를 상속받아 사용할 수 있게 된다. 이러한 부모 객체를 'Prototye 객체' 또는 'Prototype'이라고 한다.

위 사진을 보면 instance인 me의 __proto__ 안에 prototype 객체가 들어가 있는 것을 볼 수 있다.(정확하게 이야기 하면 자신의 부모 객체(prototype 객체)인 CallName.prototype을 가리키고 있다.)

__proto__vs .prototype

이 둘이 조금 헷갈려서 정리하고 넘어가야겠다.
전자는 모든 객체는 [[Prototype]]이라는 internal slot을 갖게 되며, 이는 상속을 위해 사용된다. 또한 이는 __proto__ 프로퍼티로 접근할 수 있다.


허나 함수는 [[Prototype]] 외에 후자인 .prototype 즉, prototype 프로퍼티도 갖고 있다.

즉 다음과 같이 정의할 수 있다.

• [[Prototype]]

  1) __proto___를 통해 조회할 수 있다.
  2) 모든 객체가 가지고 있는 internal slot이다.
  3) 객체의 입장에서 부모 역할을 하는 프로토 타입 객체를 가리킨다.

• prototype 프로퍼티

  1) 함수 객체만 갖고 있는 프로퍼티
  2) 함수 객체가 생성자로 사용될 때, 이 함수에 의해 만들어진 객체의 prototype 객체다.

Constructor 프로퍼티

me라는 객체의 constructor는 자신의 생성자 함수다.

따라서, me라는 객체의 프로토타입 객체는 CallName.prototype이며,
CallName.prototype에 있는 constructor 프로퍼티는 CallName() 생성자 함수를 가리킨다.

old fashioned - pseudoclassical subclasses

이 부분은 ES6 문법 이전에 객체 지향 프로그래밍을 염두하고 만들어지지 않은 JS에서 OOP를 구현하는 방식이었다고 한다.
또한 ES6 이후로는 매우 간단한 방식으로 OOP의 구현이 가능해졌지만 작동원리는 같다고 한다. 따라서 그 작동원리에 대한 이해를 하기 위해 작성하였다.

let Human = function(name) { this.name = name }

Human.prototype.sleep = function() {};

let Student = function(name){};

Student.prototype.learn = function(){console.log('JS')};

let Me = new Student('KIM');
Me.learn(); // JS
Me.sleep(); // err: Me.sleep is not a function

위 코드에서 Me.sleep()은 작동하지 않는다. 그 이유는 Human 클래스의 method를 전달 받지 않았기 때문이다.

---

Student Class로 instance가 Human().prototype을 상속 받게 만들어보자

• #1 Me.__proto__ = Human.prototype

Me의 prototype 객체가 Human.prototype이 되어버려서 Me.learn()이 작동하지 않는다.
즉 Student.prototype과의 연결이 끊겨버렸다.

이런 행위는 공식 문서에서 하지 말라고 지정했다고 한다!


Warning
Stuudent.prototype.__proto__ = Human.prototype를 하면, 원하는 데로 작동하게 된다. 즉 Student를 이용해 생성된 instance가 Human의 method를 갖게 된다.
🤯하지만 선술하엿듯이 __proto__에 직접 할당하는 행위는 공식 문서에서 금지하였다.

• #2 Student.prototype = Human.prototype

let Human = function(name) { this.name = name }

Human.prototype.sleep = function() {};

let Student = function(name){};
Student.prototype = Human.prototype // <-- chnaged
Student.prototype.learn = function(){console.log('JS')}; // <-- changed
//윗 줄은 Human.prototype.learn을 추가하는 것과 같은 행위가 된다.

let Me = new Student('KIM');
Me.learn(); // JS
Me.sleep(); 

• Student.prototype = Human.prototype 이 부분만 삽입하면 learn이 작동하지 않는다.
• Student.prototype.learn = function(){console.log('JS')}; 이 부분까지 삽입하면 learn도 작동하게 되지만, Student.prototype이 Human.prototype 객체를 참조하고 있기 때문에, Student...의 값을 바꾸면 Human...의 값도 바뀐다.
  따라서 Human이 learn() method를 갖게 된다.😅
  

• #3 Human.prototype을 복사! 😇

1)

let Human = function(name) { this.name = name }

Human.prototype.sleep = function() {};

let Student = function(name){};
Student.prototype = Object.create(Human.prototype) // <-- chnaged
// Object.create(<prototype>)은 인자로 들어온 prototype을 기반으로 새로운 prototype을 만든다.
Student.prototype.learn = function(){console.log('JS')}; // <-- changed

let Me = new Student('KIM');
Me.learn(); // JS
Me.sleep(); 

하지만 여기서 모두 끝난 것이 아니다.

2)

현재 Me의 [[Prototype]] 안에 Constructor가 없는 것을 볼 수 있다. 즉 Student() 생성자 함수와의 연결고리가 사라졌다.

심지어 constructor를 찍어보면 Human() 생성자 함수를 가리키고 있다.

따라서, Me와 Student() 생성자 함수를 이어주어야 한다.

//...생략

Student.prototype = Object.create(Human.prototype) // <-- chnaged
// Object.create(<prototype>)은 인자로 들어온 prototype을 기반으로 새로운 prototype을 만든다.
Student.prototype.learn = function(){console.log('JS')}; // <-- changed
Student.prototype.constructor = Student;
//생성자 함수를 Student.prototype.constructor로 직접 지정한다. 

//생략...

3)

아직도 문제가 있다.

Me를 생성할 때, Student() 생성자 함수에 'KIM'이라는 인자를 전달했음에도 불구하고 Human() 생성자 함수에 의해 name property가 생성 되지 않고 있다.

//...생략
let Student = function(name){
	Human.call(this,name) // Human.apply(this, arguments)// <<-- changed
};
Student.prototype = Object.create(Human.prototype) 
Student.prototype.learn = function(){console.log('JS')}; 
Student.prototype.constructor = Student;

//...생략

아직 이 부분이 확연히 와닿지는 않는다.

다만, Student() 생성자 함수 안에 Human.call(this,name) 코드로 this와 name arg를 바인딩하여 강제로 실행시키는 것처럼 보인다.

this는 instance를 가리키기 때문에, 아무것도 하지 않으면, Human() 생성자 함수 안에 있는 this는 가리키는 대상이 없다.

여기까지 했다면 드디어 완성이다......🤬🤯🤬🤯🤬🤯

다형성을 만족시키기 위해... 하나를 ...더...

만약 위의 예시에서 Student.prototype 안에 sleep이라는 method를 하나 추가한다고 생각해보자.

단, 기존의

Human.prototype.sleep = function(){
	console.log('zzz')
})

이라고 가정한다.

이때, Student.prototype.sleep을 실행시켰을 때,
'zzz'도 콘솔에 찍힐 수 있게 만들어주고 싶다면?

Student.prototype.sleep = function(){
  Human.prototype.sleep.apply(this)
  console.log('do not sleep!')
}

이렇게 되면,
Student 생성자 함수로 만든 Instance들에서 sleep method를 동작시켰을 때,

'zzz'
'do not sleep!'

이 동시에 찍혀나온다.

---

ES6에서 생긴 Class😇

class BlinkyDancerClass extends DancerClass {
  // your code here
  constructor(top, left, timeBetweenSteps){
    super(top, left, timeBetweenSteps)
    //superclass의 method와 property를 이어받는 부분.
  }
  
  step(){
    super.step() //superclass의 step method의 특성을 이어받는 부분.
    let style = this.$node.style;
    style.display = style.display === 'none' ? 'inline-block' : 'none';
  }
}