OOP 객체지향, JS 객체 생성, 프로토타입

1. OOP 

OOP(Object-Oriented Programming) 객체지향은 프로그래밍 패러다임 중 하나로,

사람이 실제로 세계를 보고 이해하는 방식으로 프로그래밍을 하는 것을 말한다. (마치 사물 "thing"을 보는 것처럼)

 

객체지향 외 절차지향, 함수형 프로그래밍 등 여러 패러다임 존재한다. 

객체지향은 절차형 프로그래밍으로는 복잡한 문제를 해결하기가 힘들어졌기 때문에 그 문제를 해결하기 위해 고안 되었다고 한다.

어떤 문제가 있고, 그 문제를 해결하는 과정 중에 프로그래밍 패러다임이 발전한 것이다.

 

그렇다고 객체지향이 만능이냐 하면 그렇지 않다.

문제를 해결하기 위한 하나의 방법일 뿐으로,  절차지향, 함수형 프로그래밍 등 다양한 방법론이 필요하다. 

 

*

중요 키워드

1. 추상화

  ㄴ 불필요한 정보를 숨기고 중요한 정보 노출.

2. 캡슐화

  ㄴ 관련이 있는 기능, 특성들을 모아 재활용.

3. 상속

  ㄴ 상위 집합체의 기능과 특성을 사용 가능

4. 다형성

  ㄴ 재정의 가능

 

*

OOP 기본 구성 요소

1. 클래스

2. 객체(object)

3. 메서드

 

*

대표적인 절차형 프로그래밍 언어는 C

대표적인 객체지향 프로그래밍 언어는 JAVA, C# (객체지향 언어의 시초는 스몰토크라는 언어라고 한다)

대표적인 멀티 패러타임 언어는 C++

함수형 프로그래밍 언어는 스칼라

 

 

2. 자바스크립트 객체 생성 방법

1. Functional

 

const Score = function() {
  const obj = {};
  obj.score = 0;
  obj.up = function() {
    this.score += 1;
  };
  return obj;
};

const player1 = Score();
const player2 = Score();

console.log(player1.score); // 0
player1.up();
player1.up();
console.log(player1.score); // 2

 

2. Functional Shered

const extend = function(instanceObj, methodObj) {
  for (let prop in methodObj) {
    instanceObj[prop] = methodObj[prop];
  }
};

const methodObj = {};
methodObj.up = function() {
  this.score += 1;
};

const Score = function(score) {
  const instanceObj = {
    score
  };
  extend(instanceObj, methodObj);
  return instanceObj;
};

const player1 = Score(10);

console.log(player1.score); // 10
player1.up();
console.log(player1.score); // 11

 

Functional Shered 방법을 사용하면

methodObj의 메소들만 사용하기 때문에 메모리 효율이 좋아진다.

 

 

3. Prototypal

 

const upMethod = {};
upMethod.up = function() {
  this.score += 1;
};

const Score = function(score) {
  const obj = Object.create(upMethod);
  obj.score = score;
  return obj;
};

const player1 = Score(10);


console.log(player1.score); // 10
player1.up();
player1.up();
console.log(player1.score); // 12

 

 

4.Pseudoclassical

const Score = function(score) {
  this.score = score;
};

Score.prototype.up = function() {
  this.score += 1;
};

const player1 = new Score(10);


console.log(player1.score); // 10
player1.up();
player1.up();
console.log(player1.score); // 12

new 를 붙여주는 것에 주의하자.

 

* 추가 Pseudoclassical 에서의 상속은 다음과 같이 구현하면 된다.

const Car = function() {
  this.color = 'black';
  this.max = 300;
};

Car.prototype.run = function() {
  console.log('run~~~');
};

const ToyCar = function() {
  Car.call(this);
  this.name = 'toyCar';
  this.max = 10;
};

ToyCar.prototype = new Car();
ToyCar.prototype.constructor = ToyCar;

const tc = new ToyCar();
console.log(tc); // ToyCar { color: 'black', max: 10, name: 'toyCar' }
tc.run(); // run~~~

 

1. ToyCar.prototype = new Car();
2. ToyCar.prototype.constructor = ToyCar;

 

1. ToyCar.prototype 는 Car 객체 {color: "black", max: 300} 를 참조하게 된다.

2. 기존 constructor 는 사라졌기 때문에 다시 ToyCar.prototype.constructor = ToyCar; 통해 constructor 에 기존 함수를 넣어야 한다. 

 

es6 class 문법으로 다음과 같이 바꿀 수 있다. 뭔가 더 간결하고 보기가 좋아진 것 같다.

class Car {
  constructor() {
    this.color = 'black';
    this.max = 300;
  }

  run() {
    console.log('run~~~');
  }
}

class ToyCar extends Car {
  constructor() {
    super();
    this.name = 'toyCar';
    this.max = 10;
  }
}

const tc = new ToyCar();
console.log(tc); // ToyCar { color: 'black', max: 10, name: 'toyCar' }
tc.run(); // run~~~

 

 

3. 자바스크립트 프로토타입

 

프로그래밍 언어는 클래스 타입과 프로토타입으로 나뉜다.

일반적으로 클래스 타입 언어로는 JAVA, Python 등 많은 언어가 이에 해당하고 

프로토타입 언어로는 대표적으로 자바스크립트와 Lua 가 해당한다.

 

자바스크립트는 프로타입 기반 언어로 자바처럼 클래스가 없어 상속을 구현할 수 없다.

최신 문법에서 클래스 문법이 생겼지만, 흉내내는 것이라고 한다.

 

function Car() {
  this.wheel = 4;
  this.handle = 1;
}

const k3 = new Car();
const audi = new Car();

console.log(k3.wheel); // 4
console.log(k3.handle); // 1

console.log(audi.wheel); // 4
console.log(audi.handle); // 1

 

 

prototype 이용 코드의 재사용성을 높이고 효율을 높일 수 있다.

function Car() {}

Car.prototype.wheel = 4;
Car.prototype.handle = 1;

const k3 = new Car();
const audi = new Car();

console.log(k3.wheel); // 4
console.log(k3.handle); // 1

console.log(audi.wheel); // 4
console.log(audi.handle); // 1

 

 

참고)

https://medium.com/@bluesh55/javascript-prototype-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-f8e67c286b67

[Javascript ] 프로토타입 이해하기

https://www.opentutorials.org/module/4047/24610

prototype - JavaScript 객체 지향 프로그래밍