자바스크립트 문법 (15) Class

(15) CLASS

 

ES2015이후부터 자바스크립트로 클래스 구문을 사용할 수 있다. 자바스크립트 ES2015버전에서 가장 큰 변화는 화살표 함수와 클래스가 아닌가한다. 프로토타입 객체를 선언하고, 인스턴스를 통해 계승하고, 상속하던 기존의 과정이 'class' 명령어로 깔끔하게 정리됐다.

---

[예제]

class Member {

constructor( firstname, lastname ) {

this.firstname = firstname;

this.lastname = lastname;

}

getName( ){

return this.firstname + this.lastname;

}

}

var m1  = new Member( '리차드', '브랜슨' );

var m2  = new Member( );

m1.firstname ='맥'

m2.firstname='토니';

m2.lastname='맥가이';

console.log( m1.firstname);

console.log( m1.getName( ));

console.log( m2.getName( ));

---

프로토타입을 사용할 때보다 훨씬 코드가 깔끔해졌다. 클래스에서 'constructor' 생성자는 인수를 받아서 데이터값으로 저장하는 역할을 한다. 함수로 말하자면, 인자값이라 할 수 있다. (Default값) 생성자는 외부의 데이터를 받아서 클래스 내부 데이터에 저장해주는 역할을 한다.

1 『클래스를 활용한 set / get 구문』

---

class Member {

constructor( ){

var _firstname;

var _lastname;

}

get firstName( ){

return this._firstName;

}

set firstName(val){

this._firstName = val;

}

get lastName( ){

return this._lastName;

}

set lastName(val){

this._lastName = val

}

getName( ){

return this.firstName + this.lastName;

}

}

var m = new Member( );

     m.firstName='라울';

     m.lastName ='김';

console.log(m.getName());

m._firstname ='라사'

m._lastname = '최';

console.log(m.getName( ) );  // 결과: '김라울'

---

위의 예시는 class 방식에서 get과 set을 사용하는 코드이다. constructor에 정의한 _firstname과 _lastname은 firstName( ), lastName( ) 매소드를 통해서만 값이 class안으로 전달된다. 따라서 m._firstname ='라사' , m._lastname ='최'는 class 안으로 값을 전달할 수 없다.

2 『Class 상속하기』

class 상속은 extends 키워드 하나만으로 간단하게 해결된다.

---

[예제]

class Member{

constructor( firstname, lastname ){

...중략

}

}

class myMember extends Member {

work( ){

return this.getName( ) +'초대합니다';

}   

}

let m3 = new myMember( );

    m3._firstname = '미라'

    m3._lastname = '클'

console.log( m3.work( ));  // 결과 '미라클초대합니다'

---

'class 클래스 이름 extends 계승할 클래스 이름' 공식이다.

3 『모듈』

어플리케이션 규모가 커질수록 기능 단위로 분할해야 한다. 이때 모듈이 중요해진다.

모듈기능이 있다면, 해당 파일에 들어있는 Class들을 다른 파일에서 그대로 사용할 수 있다.

---

[예제]

//  lib / Util.js  파일

var name = 'SAMSUMG, LC ';

export class Member {  ...중략  }

export class Area { ....중략   } 

---

Util 폴더에 있는 lib.js라는 파일을 위와 같이 만들었다. js 파일 내에서 밖으로 export할 class는 앞에 export 명령어를 붙인채로 class를 생성한다. 이제 lib.js 내용을 다른 파일에서 사용할 수 있다.

---

import { Member , Area } from './lib/Util';

var m = new Member('홍' , '길동' );

console.log(m.getName( ));  // 결과: 홍길동

---

import를 할 때, 일일이 class 이름을 적기 싫다면, 아래처럼 한꺼번에 가져올 수 있다.

import * as app from './lib/Util'   // app이라는 이름으로 ./lib/Util 파일내용을 모두 긁어온다.

---

var m = new app.Member('박','혁거세');  

console.log(m.getName( ));   // 결과: 박혁거세

---

import할 때에 아래와 같이 별명을 지정할 수도 있다.

---

import { Member as Guest , Area as Width } from './lib/Util';

var m = new Guest( '김' ,'길동');

console.log( m.getName( ));

var w = new Width('석' , '박사');

console.log( m.getName( ));

---

* 기타 ES2015 기능   -프로퍼티를 동적으로 생성하기-

---

let i = 0;

let member = {

name: '김만교',

birth : new Date( 1999, 3, 21 ),

['memo' + ++i ] : '공격수',

['memo' + ++i ] : '오른발',

['memo' + ++i ] : '스트라이커'

};

console.log(member);

//결과:   {name:'김만교' ,brith: 중략...., memo1 :'공격수' , memo2 :'오른발' , memo3:'스트라이커' }

---