Javascript Class(클래스), Prototype(프로토타입), Property(프로퍼티)

• Class(클래스)

  • 자바스크립트에서 클래스란 생성자 함수를 의미함

  • 함수가 특정 기능을 하는 구문(알고리즘, 로직)을 묶을 때 사용하는 문법이라면, 클래스는 이렇게 만들어진 수많은 변수와 함수 중 연관 있는 변수와 함수만을 선별해 포장하는 기술

  • 즉, 연관있는 변수와 함수를 하나로 묶을 때 사용

  • 객체 단위로 코드 그룹화 및 코드 재사용성을 사용하기 위함

    • 일반 함수는 기능 단위의 코드 그룹화 ~> 기능 단위의 중복 코드 제거 및 재사용

  • Class는 자바의 Class와 같이 동작하는 것이 아니라, prototype을 이용한 기존의 방법을 유지하면서 문법만 지원하는 것(ES6 부터)

    • 따라서, 기본적으로 Prototype에 대한 이해가 선행돼야함.

  • 상속

    • 프로토타입(prototype)을 통한 상속과 super()를 이용한 상속이 가능하다.

      • // 중복 코드를 담을 클래스 
        function MyParent() {
         this.prop1 = 10;
        }    
        
        MyParent.prototype.method1 = function () {
         console.log('this.prop1 = ' + this.prop1 ); 
         console.log('MyParent 클래스의 메소드1');
        };
        
        function ChildClassA() {
        }
        // 상속
        ChildClassA.prototype = new MyParent();
        ChildClassA.prototype.mothod2 = function () {
            console.log('ChildClassA 의 메소드2.');
        };
        
        function ChildClassB() {}
        // 상속
        ChildClassB.prototype = new MyParent();
        ChildClassB.prototype.mothod2 = function () {
         console.log('ChildClassB 의 메소드 2.');
        };
        // 인스턴스 생성
        const classA = new ChildClassA();                 // 프로퍼티와 메서드 접근(호출)
        console.log('classA.prop1 = ' + classA.prop1);    // classA.prop1 = 10
        classA.method1(); // this.prop1 = 10 
        classA.mothod2(); // ChildClassA 메소드 호출
        
        const classB = new ChildClassB(); // 프로퍼티와 메서드 접근(호출)
        console.log('classB.prop1 = ' + classB.prop1); // classB.prop1 = 10
        classB.method1(); // this.prop1 = 10
        classB.mothod2(); // 이 기능은 ChildClassB 에 있는 기능입니다.
        

      • super를 사용한 상속은 자바의 문법과 동일.

• 프로퍼티

  • 데이터 구조와 연관된 속성을 나타낸다.

    • 인스턴스 프로퍼티는 특정 object의 특정 데이터를 가지고 있다.

    • Static 프로퍼티는 모든 Object 인스턴트들에게 공유된 데이터를 가지고 있다.

  • prototype은 효과적으로 동작. 생성자를 통해 생성된 객체(인스턴스)들이 여러개 있어도, prototype에 연결된 객체들(movieObject)는 동일한 메모리 공간에서 효율적으로 재사용

  • 두 객체의 prototype은 같음.

myHealth.__proto__ === myHealth2.__proto__  //true
myHealth2.__proto__ === myHealth3.__proto__  //true
//__proto__ 객체는 자바스크립트 내부에서만 사용되는 속성이다.

• prototype객체는 최상위 Object까지 연결되어 있음.

• prototype연결고리를 만들어서 객체간의 상속관계를 만들 수 있음.