[ JavaScript ] 객체지향 프로그래밍

객체지향 프로그래밍

---

• 객체
  • 객체의 상태를 나타내는 변수
  • 객체의 행동을 나타내는 함수

객체 생성

---

• 객체 생성 방법

    const object = {
        attr1: 'a',
        attr2: 'b', // 프로퍼티
        func(a) {
            console.log(`${this.attr1}`); // this는 자기 자신 객체 가리킴
        },
    };

• Factory Function

  • 객체를 생성하는 함수를 따로 만들어 줌.

    function createObject(attr1, attr2) {
      const object = {
          attr1: attr1,
          attr2: attr2, // 프로퍼티
          func(a) {
              console.log(`${this.attr1}`); // this는 자기 자신 객체 가리킴
          },
      };
      return object;
    }
    
    // 위에거 축약
    function createObject(attr1, attr2) {
      const object = {
          attr1,
          attr2, // 프로퍼티
          func(a) {
              console.log(`${this.attr1}`); // this는 자기 자신 객체 가리킴
          },
      };
      return object;
    }
    
    obj1 = createObject('a', 'b') // 객체 편하게 생성 가능

• Constructor Function (생성자 함수)

  • 생성자 함수를 정의 & new 연산자 사용

    function Object(attr1, attr2) { // 함수를 통해서 객체 생성 가능
      this.attr1 = attr1; // this : constructor function으로 생성한 객체
      this.attr2 = attr2;
      this.f = function(a) {
          ..
      };
    }
    
    const obj = new Object('a', 'b') // 반드시 new를 붙여주어야 함.
    

• Class

  • class를 정의하여 객체 생성 가능

    class Object { 
      constructor(attr1, attr2) { // 생성자 안에서는 프로퍼티
          this.attr1 = attr1;
          this.attr2 = attr2;    
      }
    
      f(a) { // 메서드는 생성자 밖에서 선언
          ...
      }
    }
    
    const obj = new Object('a', 'b')

객체지향 프로그래밍

---

1. 추상화

   • 구체적인 존재를 간략화해서 나타내는 것
   • 클래스명, 프로퍼티명, 메소드명을 잘 정하는 것이 중요
   • 코드에 코멘트나 별도의 문서를 두어 잘 이해할 수 있도록 하는게 중요

2. 캡슐화

   • 객체의 특정 프로퍼티에 직접 접근하는 것을 막음

     class object {
       constructor() {
           this.attr1 = "attr";
       }
     
       set attr1(arg) { // setter, attr1 프로퍼티 값 수정할때 이상한 값 넣었는지 체크
           if (arg === 'a') {
               this._attr1 = arg; // _가 붙은 프로퍼티에 값 넣어줌(숨긴 프로퍼티)
           } else {
               throw new Error('value error');
           }
       }
     
       get attr1() { // getter 메서드
           return this._attr1; // 리턴값은 원하는대로 수정 가능
           // return `attr1 : ${_attr1}`;
       }
     }
     
     obj = new object();
     obj.attr1 = 'a'; // setter 호출
     console.log(obj.attr1) // getter 호출
     

3. 상속

    class object {
        constructor(a) {
            this.attr1 = a;
        }
    }
   
    class obj_child extends object {
        constructor(a, b) {
            super(a); // 상속 시에는 부모 클래스의 생성자를 super를 통해 반드시 호출
            this.attr2 = b;
        }
    }

4. 다형성

   • 많은 형태를 갖는 성질

   • 오버라이딩 : 원래 정의된 부모 클래스의 메소드를 덮어씌움

   • 하나의 변수가 다양한 종류의 객체 접근 가능

     class object {
       constructor(a) {
           this.attr1 = a;
       }
       f(a) {
           console.log("parent:"+a);
       }
     }
     
     class obj_child extends object {
       constructor(a) {
           super(a);
       }
       f(a) {
           console.log("child:"+a);
       }
     }
     
     let p_arr = [new object(10), new obj_child(10)];
     p_arr.forEach((element) => {
       element.f(10); // object, obj_child 두개 다 접근 가능
     });
     

클로저(Closure)

---

function createObject(a) {
    let outera = a; // outera는 외부에서 사용 불가능
    function f() { // f는 외부에서 호출 불가능

    }
    const obj = { // 객체 내부에서는 outera, f 사용하더라도 보존됨.
        get a() {
            return outera;
        },
        set a(newa) {
            outera = newa;
        }
    }
}

• 클로저 : 어떤 함수와 그 함수가 참조할 수 있는 값들로 이루어진 환경을 하나로 묶은 것
• 즉, outera는 외부에서는 obj.a를 통해서만 읽을 수 있다.

JavaScript

---

부모 클래스의 메소드 사용

---

• super.메소드()

class obj {
    constructor(a) {
        this.a = a
    }
    f(a) {
        console.log("parent->f")
    }
}

class obj_child extends obj {
    constructor(a) {
        super(a);    
    }
    f(a) {
        super.f(a)
    }
}

현재 변수의 클래스 확인

---

• instanceof 연산자 사용
  • child가 parent를 상속한 경우
  • child instanceof parent ⇒ True
  • child instanceof child ⇒ True
  • parent instanceof child ⇒ False
• instanceof를 활용한 분기문보다는 다형성을 활용하여 메소드 구성하는게 더 나음

변수 instanceof 클래스 // ==> 변수가 클래스인 경우에만 True

Static 프로퍼티 / Static 메서드

---

• 클래스에 직접적으로 달려있는 프로퍼티와 메서드

class Calculator {
    static i = 0;
    static sum(a, b) {
        return a + b;
    }
}

Calculator.i; // 0
Calculator.sum(3, 5); // 8

/* 프로퍼티 추가&변경 / 메서드 추가 가능 */
Calculator.i = 10;
Calculator.minus = function(a, b) {
    return a - b;
}