DeepDive JS - 7일차 // 25 - 26장

25장 클래스

클래스는 함수, 일급객체임

 

프로토타입을 추상화 한 것이 클래스

 

생성자 함수와의 차이점으로는 

new 없이 안됨

내부 필드 프로퍼티 어트리뷰트 [[Enumerable]] 모두 false임 // 열거 되지 않음.

strict mode 적용
호이스팅시 tdz에 let, const 처럼 tdz에 빠짐
super, extends 상속 지원

 

const person = (function ( ) {                              class person {

//생성자 함수                                                          //생성자

function person (name) {                                    constructor(   )  {

this.name = name ;

}                                                                              }

//프로토타입 메서드                                            //프로토타입메서드

person.prototype.sayHi = function ( ){                 sayHi() {

console.log( ) 

}                                                                                   }

//정적 메서드                                                       //정적 메서드

person.sayHello =  function ( ) {                          satic sayHello  ( ) {     

console.log( )

}                                                                                  }

                                                                                }

return person;

} ());

클래스에서 정의한 메서드 특징
function 축약 표현
클래스에서 메서드 정의할 때는 콤마 필요없음
암묵적으로 strict mode
프로퍼티 어트리뷰트 [[Enumerable]] 값 false // 열거 안됨.
non - constructor 다, 따라서 new 연산자와 함께 호출 할 수 없음

프로퍼티
인스턴스
접근자(get,set)

클래스 필드 정의 (자바에서 클래스 필드를 this 생략 변수처럼 선언, this 생략해도 클래스필드 참조 가능)

ex) class person  ( )  {
name = 'lee'

}
private (은닉, 클래스 내부에서만 참조)

static ( #붙이기) ex) static # num = 10

상속 

extends 클래스 뿐만 아니라 [[constructor]] 내부 메서드 갖는 함수 객체로 평가될 수 있는 모든 표현식 사용 가능 
super 를 호출하면 수퍼클래스의 constructor를 호출한다. 

super 를 참조하면 수퍼클래스의 메서드를 호출 할 수 있다.

 

 

+)메서드 축약 표현으로 정의된 함수만이 [[HomeObject]]를 갖는다.

 [[HomeObject]]를 통해 메서드 자신을 바인딩하고 있는 객체의 프로토타입을 찾을 수 있다.

ex) class Parent {
  greet() {
    console.log("Hello from Parent");
  }
}
class Child extends Parent {
  greet() {
    super.greet(); // [[HomeObject]] 덕분에 Parent의 greet 메서드 호출
  }
}
new Child().greet(); // "Hello from Parent"

26장 ES6 함수의 추가 기능

함수의 구분

일반함수 constructor, prototype, arguments

메서드     super, arguments

화살표함수  없음.

 

메서드

함수 축약표현 

ex) 객체내 bar :  function ( ) { }  -> bar ( ) { } 이런식으로 

constructor 없음. 상속 super에서 언급한 내부 슬롯[[HomeObject]] 가짐. super 키워드 사용 가능. 

 

화살표 함수 

화살표 함수도 일급 객체 이므로, 고차 함수에 인수로 전달 가능 -> 콜백 함수로서 정의 유용

constructor 없음. 인스턴스 생성 안됨, prototype도 생성하지 않음 

ex)

const arrow = () => {};
console.log(arrow.prototype); // undefined

화살표 함수안의 this는 상위 스코프 참조

클래스 내부는 strict mode, 일반함수 this는 일반적으로 undefined
여기서 화살표 함수 사용하면 문제해결.

super :  this와 마찬가지 화살표 함수 내에선 상위 스코프 참조

arguments :  this와 마찬가지 화살표 함수 내에선 상위 스코프 참조

 

(...)Rest파라미터

함수에 전달된 인수들의 목록을 배열로 전달 받음.
유사배열객체에 ...유사배열객체 하면 배열로 전환.

 

매개변수 기본값

매개변수에 초기값이 undefined 일시 초기값을 줄 수 있음
function (x= 0 ,y ) { }