ES6 입문 강좌 의 Class 와 Module 상세 설명

본 고 는 주로 ES6 에서 Class 와 Module 의 관련 내용 을 소개 하고 여러분 이 참고 하여 공부 할 수 있 도록 공유 하 였 습 니 다.다음은 상세 한 소 개 를 살 펴 보 겠 습 니 다.
클래스
ES6 는 Class(클래스)라 는 개념 을 도입 하여 대상 의 템 플 릿 으로 삼 았 다.class 키 워드 를 통 해 클래스 를 정의 할 수 있 습 니 다.

 //    
 class Point() {

  constructor(x, y) {
   this.x = x;
   this.y = y;
  }

  toString() {
   return '(' + this.x + ', ' + this.y + ')';
  }
 }

 var point = new Point(2, 3);
 point.toString(); //(2, 3)

위의 코드 세 션 에서 먼저 Point 류 를 정 의 했 고 그 안에 constructor 함수 가 있 습 니 다.이것 이 바로 구조 함수 입 니 다.this 키 워드 는 인 스 턴 스 대상 을 대표 합 니 다.
Class 간 에 extends 키 워드 를 통 해 계승 할 수 있 습 니 다.

Class ColorPoint extends Point {
 constructor(x, y, color) {
  super(x, y); //   super.constructor(x, y)
  this.color = color;
 }

 toString() {
  return this.color + '' + super();
 }
}

2.Module 의 기본 용법
1>,export 와 import
ES6 는 자바 스 크 립 트 코드 의 의존 과 배치 상의 문 제 를 해결 하고 기 존의 comonJS 와 AMD 규범 을 대체 하여 브 라 우 저 와 서버 에서 통용 되 는 모듈 솔 루 션 이 되 는 모듈 기능 을 실현 했다.
모듈 의 기능 은 두 가지 키워드 가 있 습 니 다:export 와 import.export 는 사용자 정의 모듈 에 사 용 됩 니 다.대외 인 터 페 이 스 를 규정 하 다.import 는 다른 모듈 의 기능 을 입력 하 는 동시에 네 임 스페이스(namespace)를 만 들 고 함수 이름 충돌 을 방지 합 니 다.
ES6 은 독립 된 JS 파일 을 모듈 로 사용 할 수 있 습 니 다.즉,하나의 JavaScript 스 크 립 트 파일 이 다른 스 크 립 트 파일 을 호출 할 수 있 도록 합 니 다.가장 간단 한 모듈 은 export 키워드 출력 변 수 를 사용 하 는 JS 파일 입 니 다.

 //profile.js
 export var firstName = "Pandora";
 export var lastName = "G.Dragon";
 export var year = 1973;

 //export        ，      
 var firstName = "Pandora";
 var lastName = "G.Dragon";
 var year = 1973;
 export({firstName, lastName, year});

export 정의 모듈 을 사용 하면 다른 JS 파일 은 import 키 워드 를 통 해 이 모듈(파일)을 불 러 올 수 있 습 니 다.로 딩 방식 은 다음 과 같 습 니 다:

 import {firstName, lastName, year} from './profile';

 function setHeader(element) {
  element.textContent = firstName + '' + lastName;
 }

위의 코드 세 션 에 서 는 import 키 워드 를 사용 하여 대상 을 받 아들 이 고"{}"로 표시 합 니 다.다른 모듈 에서 가 져 올 변 수 를 지정 하 였 습 니 다.대괄호 안의 변수 이름 은 가 져 온 모듈 대외 인터페이스의 이름과 같 아야 합 니 다.
단,입력 한 속성 과 방법 에 이름 을 다시 지 으 려 면 import 문 구 는 다음 과 같이 써 야 합 니 다.

 import {someMethod, another as newName} from './exporter';

2>모듈 의 전체 로드
export 키 워드 는 출력 변 수 를 제외 하고 출력 방법 이나 클래스(class)도 가능 합 니 다.다음 코드 를 보십시오.

 // circle.js

 //   -1:       
 export function area(radius) {
  return Math.PI * radius * radius; 
 }
 //   -2：       
 export function circumference(radius) {
  return 2 * Mathi.PI * radius;
 }

다음은 main.js 파일 이 위의 모듈 을 참조 하도록 정의 합 니 다.

 // mian.js
 import {area, circumference} from 'circle';

 console.log("   ： " + area(4));
 console.log("   ： " + circumference(14));

위의 서법 은 도입 할 방법 을 하나하나 제정 하 는 것 이다.그러나 또 다른 표기 법 은 모듈 키 워드 를 사용 하여 전체적으로 가 져 오 는 것 이다.

 // main.js
 module circle from 'circle';

 console.log("   ： " + circle.area(4));
 console.log("   ： " + circle.circumference(14));

module 키워드 뒤에 변 수 를 따라 가 져 온 모듈 이 이 변수 에 정의 되 어 있 음 을 표시 합 니 다.
3>,export default 문장
어떤 속성 이나 방법 에 입력 할 이름 을 만 들 지 않 으 려 면 export default 문 구 를 사용 할 수 있 습 니 다.

 // export-default.js
 export default function foo() { // foo()           
  console.log('foo');
 }

다른 모듈 에서 이 모듈 을 가 져 올 때 import 문 구 는 기본 적 인 방법 으로 임의의 이름 을 지정 할 수 있 습 니 다.

 // import-default.js
 import customName from './export-default';
 customName(); //'foo'

분명히 한 모듈 은 기본 적 인 방법 으로 만 사용 할 수 있다.
기본 속성 에 대해 서 는 export default 뒤에 직접 정의 하면 됩 니 다.다음 코드 와 같이:

 export default 42;

3.모듈 의 계승
모듈 간 에는 계승 할 수 있다.
현재 circle Plus 모듈 이 circle 모듈 을 계승 했다 고 가정 합 니 다.코드 는 다음 과 같 습 니 다:

 //circleplus.js
 export * from 'circle'; // "export *"    circle          
 export var e = 2.71828;
 export default function(x) {
  return Math.exp( x );
 }

이 때 cicle 의 속성 과 방법 을 바 꾼 후 출력 할 수 있 습 니 다.

 export {area as circleArea } from 'circle';

모듈 을 불 러 오 는 방법 은 다음 과 같 습 니 다.

 //main.js
 module math from 'circleplus';
 import exp from "circleplus"; // "import exp"   circleplus          exp  。
 console.log( exp(math.pi) );

총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.