자바스크립트 객체지향프로그래밍(OOP)

Constructor

Constructor 함수 정의하기

• constructor 함수는 다른 함수들과는 다르게 값을 리턴하지 않고, 정의하기만 한다.
• 다른 함수들과 구분하기 위해 대문자로 시작한다.
• this 키워드 이용
• 인자를 받아오지 않고 정해진 값으로 지정 가능

function ConstructorName(arg1, arg2){
    this.propertyName = arg1;
    this.propertyName2 = arg2;
    this.propertyName3 = value;
}

Constructor 이용해서 객체 생성

let obj = new ConstructorName();

값 변경하기

다른 객체들과 마찬가지로, property에 접근하거나 값을 변경할 수 있다.

ConstructorName.propertyName = newValue;

instanceof를 이용해서 constructor 확인

function ConstructorName(arg1){
    this.propertyName = arg1;
    this.propertyName3 = value;
}
let obj = new ConstructorName(arg);
obj instanceof ConstructorName;

위의 예시에서, obj가 주어진 constructor로 만든 것이 맞다면 true, 아니라면 false 리턴

Own Properties

Constructor로 만들어진 각 객체의 properties는 own properties라고 불린다. obj.hasOwnProperty(property)로 확인가능

Prototype Properties 이용

여러 instance들이 어떤 property에 대하여 공통된 값을 가진다면, prototype을 이용해 값을 더하는 것이 편하다.

ConstructorName.prototype.propertyName = value;

위와 같은 방식으로 추가하면 된다.

또는 다음과 같이 여러 property를 포함하는 object를 사용해 효율적으로 만들 수도 있다.

ConstructorName.prototype = {
  propertyName1: value1, 
  propertyName2: function() {
      //function
  },
  propertyName3: function() {
    //function
  }
};

properties 반복방법

for(let property in instanceName){
  if(instanceName.hasOwnProperty(property)){
    ownProps.push(property); //배열
  }
  else{
    prototypeProps.push(property); //배열
  }
}

Constructor property

instanceName.constructor == ConstructorName;

주어진 인스턴스가 해당 constructor로 만들어진 것이라면 true, 아니라면 false를 반환한다.

새로운 object마다 프로토타입을 설정하는 방법은 constructor property를 없앤다는 단점이 있다. 이럴 경우 instanceof를 이용해서 constructor를 확인하기가 어렵다. 이를 해결하기 위해서 프로토타입이 object에 정해질 때, constructor property를 정의해주자.

ConstructorName.prototype = {
  constructor: ConstructorName,
  property: value,
  property: function() {
    //function
  }
};

상속

constructor로부터 만들어진 object는 해당 constructor를 상속받는다. 이는 isPrototypeOf를 통해 확인할 수 있다.

function ConstructorName(arg){
    this.property = arg;
}

let obj = new ConstructorName(arg1);
ConstructorName.prototype.isPrototypeOf(obj); //true

자바스크립트에서 대다수의 객체는 prototype을 가지고 있다. 또한 프로토타입 자체도 object다. 따라서 프로토타입도 프로토타입을 가지고있다.

상속을 이용해서 DRY(Do not Repeat Yourself)

공통된 메소드가 여러 곳에서 쓰인다면, supertype을 만들어줄 수 있다.

Object.create(obj): 새로운 object 만들어서 obj를 새로운 오브젝트의 prototype으로 설정

//1. supertype 만들기
function ParentObject() { }

ParentObject.prototype = {
  constructor: ParentObject,
  methodName: function() {
    //function
  }
};

//2-1) inherit
let obj = Object.create(ParentObject.prototype);

//2-2) subtype의 prototype 설정
ChildObject.prototype = Object.create(ParentObject.prototype);
//constructor 설정할 수 있다
ChildObject.prototype.constructor = ChildObject;

let obj = new ChildObject()

이와 같이 상속받을 경우 supertype의 property도 상속받게 된다.

상속받은 뒤에 메서드 추가

ChildObject.prototype.methodName = function(){
    //function
}

Override

//1. supertype 만들기
function ParentObject() { }

ParentObject.prototype = {
  constructor: ParentObject,
  methodName: function() {
    //function
  }
};

//2. 상속받기
ChildObject.prototype = Object.create(ParentObject.prototype);
ChildObject.prototype.constructor = ChildObject;

//3. override - 같은 이름의 메소드로 만들기
ChildObject.prototype.methodName = function(){
    //function
}

Mixin

mixin은 다른 오브젝트에서 특정 함수들을 쓸 수 있게 해준다.

let mixinName = function(obj){
  obj.methodName = function(){
    //function
  }
}

glideMixin(object);

Closure

constructor 함수 내에서 변수를 만들면 private한 property가 된다. 이러면 해당 변수는 constructor 함수의 메소드를 이용해서만 접근하고 변경할 수 있게 된다.

function constructorName() {
  let privateProperty = 10;

  this.getPrivateProperty = function() { 
    return privateProperty;
  };
}

Immediately Invoked Function Expression (IIFE)

(function () {
  //function
})();

함수 선언과 동시에 실행

모듈 만들 때 IIFE 사용하기

let moduleName = (function(){  return{    mixinName1 : function(obj) {      obj.functionName = function() {        //function      };    },    mixinName2 : function(obj){      obj.functionName = function(){        //function      };    }  }})();