Javascript 클래스(class) 이론

 

클래스(class)

 

 

클래스는 계급, 집단, 집합을 뜻 하는데 자바스크립트에서는 뜻 그대로 집단으로 나뉠 수 있다.

 

 

 

 

 

• 왼쪽 그림에서 class 파트는 직접적으로 사용되는 생성된 객체 배열 [1,2,3] 등등이 아니라 이 생성 객체를 만드는 매개가 되는 생성자 범위를 class라고 부른다. 
• 이 class 파트에서  생성자의 메소드들을 정적 메소드, 정적 프로퍼티로 구분할 수 있으며 프로토타입의 메소드는 그냥 메소드 아니면 프로토타입 메소드라고 불린다.

 

 

 

 

 

• 생성자에 인하여 생성된 직접적으로 사용하는 객체 instance는 프로토타입 메소드에 접근이 가능하다. 왜냐하면 __proto__의 매개체를 생략 가능하므로 가능하다.
• 하지만 생성된 객체 instance가 정적 메소드 및 프로퍼티에 바로 접근은 되지 않는다. 프로토타입 및 constructor을 통해 접근할 수는 있지만 constructor 같은 중간 매개가 포함되어 this가 생성된 객체 instance 자체가 되지 않는다는 문제가 있다. 그래서 접근이 불가능하다는 의미이다.
• 즉 생성 객체 instance을 this 자체가 되게 하려면 apply, call, bind을 사용해야하는데 하지만 좋은 결과를 불러드리기 힘들다.

 

 

• 위 코드를 보면 생성 객체 gomu에서 바로 생성자 getInformations에 접근하면 에레가 뜬다는 것을 알 수 있다.
• 하지만 Person.getInformations으로 정적 메소드로 접근한다면 에러가 뜨지 않고 결과가 잘 도출된다.  아니면 gomu.constructor.getInformations처럼 프로토타입 성질을 이용하여 건너가 접근 할수 도있다.

 

 

 

 

 

 

응용

 

 

 

• 위의 그림들을 보면 두 개의 생성자 파트와 두 개의 생성 객체 파트 그리고 두 개의 프로토타입 메소드 파트가 존재하는 것을 확인 할 수 있다.
• 두 개씩 존재하는 만큼 중복된 코드가 존재한다. 이를 상위와 하위가 구별되는 효율적인 코드를 만들기 위하여 class 개념을 이용하여 결합을 해줄 수 있다.

 

 

 

 

 

 

 

• 먼저 이론적으로 설명하자면 일단 공통적인 부분 getName(), getAge() 프로토타입 메소드들과 생성 객체들을 하나로 합친다.
• 그리고 겹치지 않아 남은 Employee의 프로토타입 getposition() 메소드를  class 성질 중 생성 객체인 instance가 프로토타입 메소드와 정상적으로 접근 가능하다는 개념을 이용한 대각선 프로토타입 체인잉을 해주어 연결하면 된다.
• 결국 상위에 Person class을 위치하고 하위에  Employee class을 위치하게 되었다. 

 

 

 

 

 

 

 

• 즉 코드상으로 생성 객체인 instance가 프로토타입 메소드와 접근 및 연결을 시키려면 Employee.prototype=new Person() 해주면 된다. 코드 해석 그대로 Employee의 프로토타입이 Person의 생성자 객체 instance이 되면 연결이 되는 것이다.
• 하지만 문제점이 있다. Employee.prototype=new Person() 해주면 Person() 에게 덮어씌우게 된 것이니Employee.prototype의 constructor 정보가 날아가는 문제가 있는 것이다.
• 이때 Employee.prototype.constructor = Employee 해주면 다시 constructor가 원래 바라보고 있었던 Employee 생성자 정보가 살아난다.

 

 

 

 

 

 

 

결국 왼쪽 코드의 두 가지가 겹치는 부분의 장황한 코드가 오른쪽처럼 상위와 하위가 구별되는 관계가 생성이 되었다.

 

 

 

 

 

하지만

↓

 

 

만약  Employee 의 생성 객체 중 실수로 지워 name : "고무" 프로퍼티가 사라진다면 프로토타입 체인으로 연결되어 있기 때문에 Person 생성 객체에서 name을 찾을수 가 없어 name : "이름 없음" 이라고 출력되어 버린다. 

 

 

 

 

 

 

그래서 프로토타입 체인닝은 윗 단계의 프로토타입 프로퍼티 안에는 프로퍼티가 아닌 메소드만 존재해야 한다.

 

프로토타입 프로퍼티 안에는 프로퍼티가 아닌 메소드만 존재해야 한다.

 

 

 

 

 

 

 

 

위와 같이 프로토타입 체인링에 대한 있을 수 있는 오류를 피하기 위하여 더 좋은 구상이 가능하다.

↓

 

• 브릿지 함수라는 것을 또 하나 만들어 브릿지 함수의 프로토타입과 person 함수의 프로토타입을 변수로서 같게하여 연결시킨다.
• 그 다음 Employee의 프로토타입과 브릿지의 생성 함수와 변수로서 같게하여 연결하면 문제는 해결된다.

 

 

 

 

 

 

 

 

• 위와 같이 브릿지 함수로 연결시켜주었더니 제일 윗 단계는 메소드만 존재하게 되었다.
• Emplpyee만이 프로퍼티를 가지고 있는 것을 확인 할 수 있다. 

 

 

 

 

 

 

 

 

위 코드는 브릿지 함수를 이용한 코드를 함수화하여 정리한 것이다. 이게 바로 더글라스 크락포드가 제안한 내용이다.

 

 

 

 

 

 

 

인프런의 정재남 강사님의 강의를 참조하였습니다.

https://www.inflearn.com/instructors/46840/courses