집 > 기사 > 웹 프론트엔드 > ES6의 클래스 키워드에 대한 자세한 설명

ES6의 클래스 키워드에 대한 자세한 설명

小云云원래의: 2018-01-18 09:55:552095검색

클래스는 es6에서 도입된 가장 중요한 기능 중 하나입니다. 클래스가 있기 전에는 프로토타입 체인을 통해서만 클래스를 시뮬레이션할 수 있었습니다. 이 글에서는 ES6의 class 키워드를 주로 소개합니다. Class는 es6에서 도입된 가장 중요한 기능 중 하나입니다. 이 글은 예제 코드를 통해 자세히 설명되어 있으니 필요한 친구들이 참고하시면 도움이 될 것 같습니다.

1. 소개

  //定义类
  class Point {
   constructor(x, y) {
   this.x = x;
   this.y = y;
   }
   toString() {
   return '(' + this.x + ', ' + this.y + ')';
   }
  }

　Point 클래스는 생성 메서드 외에도 toString 메서드도 정의합니다. "클래스" 메서드를 정의할 때 앞에 function 키워드를 추가할 필요가 없으며 함수 정의를 직접 입력하면 됩니다. 또한 메서드를 쉼표로 구분할 필요가 없습니다. 그렇지 않으면 오류가 보고됩니다.

 //类的数据类型就是函数，类本身就指向构造函数。用的时候，也是直接对类使用new命令，跟构造函数的用法完全一致。
  class Bar {
   doStuff() {
   console.log('stuff');
   }
  }
  var b = new Bar();
  b.doStuff() // "stuff"

2. 엄격 모드

클래스 및 모듈 내부에서는 기본값이 엄격 모드이므로 실행 모드를 지정하기 위해 use strict를 사용할 필요가 없습니다. 코드가 클래스나 모듈에 작성되어 있으면 엄격 모드만 사용할 수 있습니다

3. 생성자 메서드

생성자 메서드는 클래스의 기본 메서드입니다. 이 메서드는 객체 인스턴스가 생성될 때 자동으로 호출됩니다. 새로운 명령. 클래스에는 생성자 메서드가 있어야 합니다. 명시적으로 정의되지 않은 경우 기본적으로 빈 생성자 메서드가 추가됩니다.

class Point {
  }
  // 等同于
  class Point {
   constructor() {}//constructor方法默认返回实例对象（即this），完全可以指定返回另外一个对象。
  }
  //注意：类必须使用new调用，否则会报错。这是它跟普通构造函数的一个主要区别，后者不用new也可以执行。

4. 클래스의 인스턴스 객체

　 클래스의 인스턴스 객체를 생성하려면 new 명령을 사용하세요.

　 인스턴스의 속성이 자체적으로 명시적으로 정의되지 않는 한(즉, 이 객체에 정의됨) 프로토타입에 정의됩니다(즉, 클래스에 정의됨).

 class Point {
   // ...
  }
  // 报错
  var point = Point(2, 3);
  // 正确
  var point = new Point(2, 3);

5. 클래스 표현식

　다음 코드는 표현식을 사용하여 클래스를 정의합니다. 참고로 이 클래스의 이름은 Me가 아닌 MyClass입니다. Me는 Class의 내부 코드에서만 사용 가능하며 현재 클래스를 참조합니다.

 const MyClass = class Me {
   getClassName() {
   return Me.name;
   }
  };
  //采用 Class 表达式，可以写出立即执行的 Class。
  var person = new class {
   constructor(name) {
   this.name = name;
   }
   sayName() {
   console.log(this.name);
   }
  }('张三');
  person.sayName(); // "张三"

6. 변수 호이스트가 없습니다

클래스에 변수 호이스트(hoist)가 없습니다.

다음 코드에서는 Foo 클래스를 먼저 사용하고 나중에 정의하므로 ES6에서는 호이스트를 수행하지 않으므로 오류가 발생합니다. 코드 헤드에 대한 클래스 선언입니다. 이 규정을 적용한 이유는 아래에 언급된 상속과 관련이 있습니다. 하위 클래스가 상위 클래스 다음에 정의되는지 확인해야 합니다.

  new Foo(); // ReferenceError
  class Foo {}

7. 프라이빗 메서드

　 프라이빗 메서드는 일반적인 요구 사항이지만 ES6에서는 이를 제공하지 않으며 해결 방법을 통해서만 시뮬레이션할 수 있습니다.

　　프라이빗 메소드 추가　

　　①네이밍의 차이입니다.

　　②Symbol 값의 고유성을 이용하여 Private 메소드를 Symbol 값으로 명명합니다.

 /*命名上加以区别*/
  class Widget {
   // 公有方法
   foo (baz) {
   this._bar(baz);
   }
   // 私有方法
   _bar(baz) {
   return this.snaf = baz;
   }
   // ...
  }
  /*利用Symbol*/
  const bar = Symbol('bar');
  const snaf = Symbol('snaf');
  
  export default class myClass{
   // 公有方法
   foo(baz) {
   this[bar](baz);
   }
   // 私有方法
   [bar](baz) {
   return this[snaf] = baz;
   }
   // ...
  };

8. 개인 속성

개인 메서드와 마찬가지로 ES6는 개인 속성을 지원하지 않습니다. 현재 클래스에 개인 속성을 추가하라는 제안이 있습니다. 방법은 속성 이름 앞에 #을 사용하는 것입니다.

 class Point {
   #x;
   constructor(x = 0) {
   #x = +x; // 写成 this.#x 亦可
   }
   get x() { return #x }
   set x(value) { #x = +value }
  }

9. 요점

클래스 메소드에 이것이 포함되어 있으면 기본적으로 클래스의 인스턴스를 가리킵니다.
　이 방법만 단독으로 사용하면 오류가 보고될 가능성이 높습니다.

 class Logger {
   printName(name = 'there') {
   this.print(`Hello ${name}`);
   }
  
   print(text) {
   console.log(text);
   }
  } 
  const logger = new Logger();
  const { printName } = logger;
  printName();
  //上面代码中，printName方法中的this，默认指向Logger类的实例。但是，如果将这个方法提取出来单独使用，this会指向该方法运行时所在的环境，因为找不到print方法而导致报错。
  /*解决方法是，在构造方法中绑定this，这样就不会找不到print方法了。*/
  class Logger {
   constructor() {
   this.printName = this.printName.bind(this);
   }  
   // ...
  }

10.name 속성

본질적으로 ES6 클래스는 ES5 생성자를 위한 패키징 계층일 뿐이므로 name 속성을 포함하여 함수의 많은 기능이 Class에 상속됩니다.
　name 속성은 항상 class 키워드 바로 뒤에 클래스 이름을 반환합니다.

 class Point {}
  Point.name // "Point"

ES6의 클래스 키워드에 대한 자세한 설명

관련 기사