(JS) OOP / 객체 지향 프로그래밍 (2/2)

상속 예제 한 번 더 보기

function Vehicle(name, speed) {
  this.name = name;
  this.speed = speed;
}
Vehicle.prototype.drive = function () {
  console.log(this.name + ' runs at ' + this.speed)
};
var tico = new Vehicle('tico', 50);
tico.drive(); // 'tico runs at 50'
function Sedan(name, speed, maxSpeed) {
  Vehicle.apply(this, arguments)
  this.maxSpeed = maxSpeed;
}
Sedan.prototype = Object.create(Vehicle.prototype);
Sedan.prototype.constructor = Sedan;
Sedan.prototype.boost = function () {
  console.log(this.name + ' boosts its speed at ' + this.maxSpeed);
};
var sonata = new Sedan('sonata', 100, 200);
sonata.drive(); // 'sonata runs at 100'
sonata.boost(); // 'sonata boosts its speed at 200'

위 예제의 방식은 상속하는 수 많은 방법 중 에러가 없는 방법의 하나이다. tico와 sedan은 vehicle을 상속하는 생성자 함수이다.

Vehicle.apply(this, arguments);는 Vehicle의 this들을 그대로 받으란 뜻이다. apply라는 함수는 이름 그대로 적용하는 메소드이다. 즉 해석하면 vehicle 생성자에 this arguments를 적용한다는 의미이다. arguments는 매개변수를 의미한다.

sedan은 매개변수로 name과 speed, maxSpeed가 있다. 이게 그대로 Vehicle과 연결된다. 다만, maxSpeed는 Vehicle이 갖고 있지 않기 때문에 무시된다. 이렇게 Vehicle의 속성을 상속(또는 확장, extend)받았고, 메소드를 처리하면 된다.

생성자 아래 sedan.prototype. = Object.create(Vehicle.prototype);은 sedan의 prototype과 Vehicle의 prototype을 연결한다. 이렇게 연결되어야 Vehicle의 메소드였던 drive를 쓸 수 있다.

Object.create

• Object.create는 생성자.prototype을 상속하는 새로운 객체를 만드는 메소드이다.
• Object.create는 객체를 만들지만, 생성자는 실행하지 않는다.

Sedan.prototype.constructor = Sedan;는 오류를 수정하는 코드이다.
생성자.prototype.constructor === 생성자 는 명확히 부모와 자식간의 관계를 알려주는 명확한 방법인 동시에, 자바스크립트의 한계적 문제 때문에 필수적으로 작성해줘야 하는 코드이다.

그래서 위 코드에서는 Sedan.prototype.constructor에 sedan을 다시 넣어준다.

그 다음에 Sedan.prototype.boost 로 boost라는 메소드를 Sedan에 만들었다. 이제 Sedan은 Vehicle에게 상속받은 drive와 Vehicle 생성자를 확장한 자신의 boost 메소드를 쓸 수 있는 것이다.

출처 : 제로초 블로그 객체 상속

캡슐화

객체의 key 값이 함수일 때 우린 그것을 메소드라 부른다. 캡슐화는 관련있는 맴버 변수와 메소드를 클래스와 같은 하나의 틀 안에 담고 외부에 공개될 필요가 없는 정보는 숨기는 것을 말한다.

변수를 스코프 안쪽에 가두어 함수 밖으로 노출시키지 않는 방법이다.

이를 통해서 객체의 내부에서만 사용해야 하는 값이 노출됨으로서 생길 수 있는 오류를 줄일 수 있다.

var Person = (function () {
  
  var power = 0;

  return {
    powerUp: function () {
      power++;
    },
    powerDown: function () {
      power--;
    }
    getPower: function () {
      return power;
    }
  };
})();

console.log(power); // power 변수에 접근할 수 없다.

즉시 실행되는 익명함수로 만들어주면 scope 때문에 power 변수에 접근할 수 없다.
외부에서 허용되지 않은 자들이 함부로 접근할 수 없도록 내부 정보를 보호하는 것을 캡슐화라고 한다.

추상화

객체의 프로퍼티와 메소드를 정의하고 복잡한 원리나 구동 방식을 사용자로부터 추상화시켜주는 작업이다. 추상화란 객체들의 공통적인 프로퍼티와 메소드를 작업을 의미한다.

좀 더 쉽게 풀이해서 설명하자면, 제작한 물건(객체)를 사용자가 복잡한 원리를 몰라도 쉽게 쓸 수 있도록 해주는 것이다.

var Person = (function () {
  // Now encapsulated
  var power = 0;

  return {
    powerUp: function () {
      power = 100;
    },
    powerDown: function () {
      power = 0;
    },
    upDown: function () {
      power = 100;
      setTimeout(function () {
        power = 0;
      }, 5000);
    }
  };
})();

Factory

팩토리 함수는 생성자 함수가 아니면서 객체를 만들어서 돌려주는 함수를 말한다.

var Person = {
  powerUp: function () {
    this.power = 100;
  },
  powerDown: function () {
    this.power = 0;
  },
};

function createPerson () { // <- Factory Function
  return Object.create(Person);
}

var person1 = createPerson();
var person2 = createPerson();
var person3 = createPerson();

return Object.create(Person)은 값을 갖는 Person을 prototype으로 갖는 객체를 만들어주는 것이다.