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

클래스는 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 Class의 super 키워드에 대한 자세한 설명

ES6 javascript에서 클래스 클래스의 get 및 set 사용 예

JS에서 클래스 속성을 사용하는 방법

위 내용은 ES6의 클래스 키워드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!