# Intro
오늘은 전반적으로 자바스크립트의 객체지향에 대해서 살펴보자!
시간을 거슬로 올라가...바야흐로....0과 1로 이루어진 컴퓨터가 인간과 소통하기 위해 만들어진 기계어가 등장한 시대...부터 이야기 하면 난 오늘 내일하다가 조상님 뵐지도 모른다ㅎ
몇일째 쪽잠을 자서 그런가 몰골도 오늘내일하고있는데....역사까지 살펴볼 시간이 없다ㅎㅎ
일단 컴퓨터 언어의 패러다임은 크게 절차지향과 객체지향이 있다고 한다. 절차지향은 말 그대로 상단부터 순서대로 명령어가 실행되는 것이다!
오늘 공부할 객체 지향은 컴퓨터 프로그램을 명령어의 목록으로 보는 시각에서 벗어나 여러 개의 독립된 단위, 즉 "객체"들의 모임으로 파악하고자 하는 것이다.
근데...객체라는 말을 평소에 잘 안쓰지 않나? 사실 처음부터 객체객체 거리면 무슨말인지 모른다..ㅎㅎ 그냥 마음을 비우고 코드로, 그림으로 공부하자ㅎㅎ
참고로 자바스크립트는 es6부터 class가 생겼다. 그 전에는 객체지향을 따라하는 방법으로 class를 구현했다. 두 가지 방법 모두 살펴보고, 이 전에는 어떻게 객체지향을 따라했는지 proto chain을 통해 살펴보자!
귀릿🔥
1. OOP(Object Oriented Programming)
1. OOP가 무엇?
- 객체지향 프로그래밍.
- 프로그램을 "객체" 단위로 구성하는 프로그래밍 기법.
2. OOP의 4가지 특징
-
Encapsulation(캡슐화) : 외부에서 객체의 Data에 접근하는 것을 막음으로써, 정보은닉을 하고 외부요인으로 인한 오률를 줄인다.
-
Inheritance(상속) : 부모의 특징을 물려 받는 기능으로 코드의 생산성을 올려준다.
-
Abstraction(추상화) : 코드를 까보지 않는 이상, 안을 들여다 볼 수 없는 특징. 사용자는 그저 input과 output만 확인하여 코드의 복잡성을 고려하지 않아도 된다.
-
Polymorphism(다형성) : 여러 개의 객체가 같은 class로 상속을 받아도, 각각의 객체의 property와 method는 각기 다른 모양새로 변할 수 있다.
3. 인스턴스를 생성하는 방법(ES6 나오기 전)
1) functional
const Car = function() { const someInstance = {}; someInstance.position = 0; someInstance.move = function() { this.position += 1; } return someInstance; } let car1= Car(); // 객체 생성
2) function shared
let extend = function(to, from){ for(let key in from){ to[key] = from[key]; } } const someMethods = {}; someMethods.move = function() { this.position += 1; } const Car = function(position) { let someInstance = { position: position; } extend(someInstance, someMethods) return someInstance; } let car1 = Car(5); // 객체 생성
3) prototypal
const someMethods = {}; someMethods.move = function() { this.position += 1; } const Car = function(position){ const someInstance = Object.create(someMethods); someInstance.position = position; return someInstance; } let car1 = Car(5); // 객체 생성
- Object.create(Instance) : 인자를 바탕으로 한 객체를 생성한다.(생성한 객체는 기존의 객체와 주소값이 다르다. 이는 reference 현상을 피할 수 있다.)
4) pseudoclassical
const Car = function(position) { this.position = position; } Car.prototype.move = function() { this.position += 1; } let car1 = new Car(5); // 객체 생성
4. 인스턴스를 생성하는 방법(ES6 나온 후)
1) class
class Car { constructor(position) { this.position = position; } move() { this.position += 1; } } let car1 = new Car(5); // 객체 생성
- 이제 그냥 class를 쓰면 된다.
- 하지만 class가 어떻게 상속을 받고, 어떻게 객체가 만들어지는지 알아보기 위해서 이전의 방법들을 공부하면 된다.
2. Proto Chain
1. 용어 정리
prototype
- prototype은 Class의 메소드(move), Constructor(=this, 생성자함수), _ _ proto _ _ 의 property를 가진다.
- prototype의 프로퍼티 중, constructor가 가르키는 것은 class 자체다.
- _ _ proto _ _는 Object의 prototype을 가르킨다.
_ _ proto _ _
- ???클래스로 생성한 car1이라는 인스턴스가 Car.prototype이랑 똑같이 생겼네??!?!?
- 인.스.턴.스의 _ _ proto _ _은 Car.prototype을 가르키기 때문임.ㅋ.
- 잠깐. Car.prototype안에도 _ _ proto _ _가 있는디요????!!
- Car.prototype의 _ _ proto _ _는 Object.prototype을 가르킨다고 위에서 말함.ㅋ.
- es6가 나오기 전에 이런 방법으로 class와 instance를 구현했던거임!!(진작에 class좀 만들어 놓지..ㅎ)
- 뿐만아니라 이러한 특징은 상속과 다형성을 구현할 수 있게 만들었음.
- 그림으로 관계도를 보여줄테니 걱정 ㄴㄴ
2. Prototype과, _ _ proto _ _의 관계도
3. PseudoClassical한 방법으로 상속과 다형성을 구현한 코드
// Grub.js
// Grub Constructor 정의
var Grub = function (age=0,color='pink',food='jelly') {
this.age = age;
this.color = color;
this.food = food;
};
// Grub Method 정의
Grub.prototype.eat = function() {
return 'Mmmmmmmmm jelly';
}
module.exports = Grub;// Bee.js
var Grub = require('./Grub');
var Bee = function (age=5, job='keep on growing') {
// 부모의 constructor를 이용해서 Bee의 property 정의
Grub.apply(this, [age, 'yellow']);
this.job = job;
};
// 부모의 Method 상속
Bee.prototype = Object.create(Grub.prototype);
Bee.prototype.constructor = Bee;
module.exports = Bee;
3. 정리
1. 개발을 할땐 class로 구현하되, 더 나은 개발자로 성장하기 위해 prototype, _ _ proto _ _, proto chain이 무엇인지 이해하기!
2. prototype과 _ _ proto _ _는 제발 따로 생각하셈.
# Work Off
주말 이용해서 class, html, css 좀 빠삭하게 공부좀 해놔야지..ㅎ
제발 졸지좀 말자 ㅠㅠㅠ 요새 왜이렇게 졸지 진짜 미춰버리겠음.
이번주 토요일, 일요일 좀만자자....목표치 못끝내면 사람이아니야 넌....
하하.....근데 갑자기 완벽한 계획은 완벽하게 망한다고 그랬던 말이 생각나네...ㅋ
그 말을 이번주에 깨드림ㅋ 기기기!!
👋👋
기본기가 탄탄한 풀스택 개발자가 되는 그날까지 🔥🔥🔥
