# JavaScript - 예시로 배우는 객체지향프로그래밍

객체를 위주로 코드를 정리한다

# 1. 램프만들기

너무 어두워서 램프를 만들어야 할 것 같아요

var lamp = {
  brightness: 0,
  turnOn: function() {
    return (this.brightness = 100);
  },
  turnOff: function() {
    return (this.brightness = 0);
  }
};

console.log(lamp.turnOn());
console.log(lamp.turnOff());

위 코드는 lamp.brightness = 5000; 만으로 lamp에 접근할 수 있습니다 그래서!

캡슐화
- 외부인이 접근 하지 못하게, brightness 속성을 내부에만 접근하도록 함
- 내부 정보 보호
- 데이터를 숨기는 것과 비슷하다.

//클로저를 만들어 스코프를 감싼 방법
var lamp = (function() {
  //캡슐화
  //외부 접근 불가
  var brightness = 0;

  return {
    turnOn: function() {
      brightness = 100;
    },
    turnOff: function() {
      brightness = 0;
    }
  };
})();
//lamp는 객체가 담김
lamp.turnOn();
lamp.turnOff();

보니까,,, 전등이 5초만 켰다가 꺼진다 그래서 5초동안 켜졌다가 자동으로 꺼지는 기능이 있으면 좋을듯 brightness에 대한 0, 100인것은 사용자가 굳이 알 필요다 없어, 켜지고 꺼지는 것만 알면됨

복잡한 원리, 구동방식을 사용자로부터 추상화 작업도 중요하다.

추상화

//클로저를 만들어 스코프를 감싼 방법
var lamp = (function() {
  //캡슐화
  //외부 접근 불가
  var brightness = 0;

  return {
    turnOn: function() {
      brightness = 100;
    },
    turnOff: function() {
      brightness = 0;
    },
    autoOnAndOff: function() {
      brightness = 100;
      setTimeout(function() {
        brightness = 0;
      }, 5000);
    }
  };
})();
//lamp는 객체가 담김
//lamp.turnOn();
//lamp.turnOff();
lamp.autoOnAndOff(); //사용자는 이 함수만 실행하면 되도록

그 다음으로, 램프가 몇 개 더 필요합니다. 앞으로도 계속 램프가 필요합니다.

new Lamp()를 통해 램프가 사용되도록
램프 클래스를 조작할때 brightness를 만지지 말라 통보 (재사용성을 강조)

function Lamp() {
  this.brightness = 0;
}
Lamp.prototype.turnOn = function() {
  this.brightness = 100;
};
Lamp.prototype.turnOff = function() {
  this.brightness = 0;
};
Lamp.prototype.autoOnAndOff = function() {
  var that = this;
  that.brightness = 100;
  setTimeout(function() {
    that.brightness = 0;
  }, 5000);
};
var lamp1 = new Lamp();
var lamp2 = new Lamp();
console.log(lamp1);

그래도 나는 brightness 를 노출시키고 싶지 않아

factory를 통해
생성자 함수가 아닌 함수가 객체를 리턴한다. 그 함수를 보통 factory함수라 말한다.

var lampPrototype = {
  turnOn: function() {
    this.brightness = 100;
  },
  turnOff: function() {
    this.brightness = 0;
  },
  autoOnAndOff: function() {
    this.brightness = 100;
    setTimeout(() => {
      this.brightness = 0;
    }, 5000);
  }
};
//factory function
function createLamp() {
  return Object.create(lampPrototype);
}
var lamp1 = createLamp();
lamp1.turnOn();

constructor

this, new 사용
성능
myFoo = new Foo() : 쉽다
단점
- new가 필요
- 프로토타입 체인 설계
- 갈아엎으려면 손볼게 많아 (new 키워드, 프로토타입 체인 루트)

# 2. 자동차를 만들어 봅시다

function Car(owner) {
  this.owner = owner;
}
Car.prototype.soldTo = function(owner) {
  this.owner = owner;
};
var car = new Car("nkh");
car.soldTo("ki");
console.log(car);

같은 차인데 전기차 , 수소차 같이 하위 구조를 가진 차를 만들어 봅시다

수소차도 soldTo함수를 동시에 가져야 합니다. 그렇기에 기존의 Car의 함수를 위임받도록 합시다

상속

function ElectricCar(owner) {
  //상위 constructor가져오기
  Car.call(this, owner);
  this.power = 0;
}

//Car의 프로토타입들을 강제로 전기차에 넣음
ElectricCar.prototype = Object.create(Car.prototype);
//위 상황까지만 보면 ElectricCar.prototype은 Car를 가리키므로 아래와 같이 정의함으로
//1:1 대응 시켜준다.
ElectricCar.prototype.constructor = ElectricCar;
ElectricCar.prototype.recharge = function(time) {
  var that = this; // ec reference
  setTimeout(function() {
    that.power = Math.min(time / 100, 100);
  }, time);
};

var myCar = new ElectricCar("nkh");
myCar.soldTo("ki");
console.log(myCar);

//하위 구조가 아닌 형제 구조를 봅시다.
//형제는 위와 동일하게 상속받으면 형제를 독립적으로 활용할 수 있습니다.

function VW(owner) {
  Car.call(this, owner);
  this.condition = "so so";
}

VW.prototype = Object.create(Car.prototype);
VW.prototype.constructor = VW;

VW.prototype.manipulate = function() {
  this.condition = "GOOD";
};

myVW = new VW("nkh");
console.log(myVW);

일반차, 전기차가 가진 중첩되는 기능이 많아질때, 어떻게 효율적으로 바꿀 것인가?

차가 더 상위, 전기차가 하위일때!

상속
- call 함수 사용
- Car.call(this,owner)
  - this는 프토로타입으,ㅣ 객체
  - 상위 클래스의 생성자를 실행한다.
  - 하위 클래스에서 상위 클래스 호출
- ec는 car의 프로토타입을 가져오고 ec만의 constructor를 재 설정 해야한다.
- setTimeout을 사용하면 this는 글로벌 가리킴 (그 안의 함수는 콜백큐로 들어감)

그런데, ec말고 폭스바겐 같은 형제 레벨의 차를 만든다

ec와 같은 방법으로 폭스바겐에 상속시킨다

# 그 외, Solid principle, kiss, grasp

solid가 무슨뜻인지 정도는

s : 단일책임원칙 : 한 클래스는 하나의 책임만 진다

자동차는 자동차만 (정비사 정보까지 아는건 아니다)

o : 개발 - 폐쇄 : 확장에는 열려있으나 변경에는 닫친다

D : 추상화에의존해야지 구체화에 의존하면 안된다

# es6 class활용법

class안에 constructor를 넣고 그 안에는 car에 대한 기본 정보가 담긴다.

Prototype의 메소드는

상속 : class E extends Car

super() : 상위 클래스의 생성자 함수 (인자)
생성자 함수에서 반드시 먼저 super를 호출하여 상위클래스를 받아오고, 현재 필요한 인스턴스 장착

주의!

다른 언어의 class와 완전 다르다 js는 프로토타입체인 타는 것이다

class Car {
  constructor(owner) {
    this.owner = owner;
  }

  soldTo(newOwner) {
    this.owner = newOwner;
  }
}
//constructor 를 실행함
var car = new Car("nkh");

//하위 차
class ElectricCar extends Car {
  constructor(owner) {
    //상위 생성자 함수
    super(owner);
    this.power = 0;
  }

  recharge(time) {
    var that = this;

    setTimeout(function() {
      that.power = Math.min(time / 100, 100);
    }, time);
  }
}
var ec = new ElectricCar("ki");

#JS

노경환

이 글이 도움이 되셨다면! 깃헙 스타 부탁드립니다 😊😄

← JavaScript - 객체 value로 정렬하기 JavaScript - prototype, 프로토타입 원리 이해하기 →