Detailed explanation of class keyword in ES6

class is one of the most important features introduced by es6. Before there was a class, we could only simulate classes through the prototype chain. This article mainly introduces the class keyword in ES6. Class is one of the most important features introduced by es6. This article gives you a detailed explanation through example code. Friends who need it can refer to it. I hope it can help everyone.

1. Introduction

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

In addition to the construction method, the Point class also defines a toString method. Note that when defining a "class" method, you do not need to add the keyword function in front, just put the function definition directly. In addition, there is no need to separate the methods with commas, otherwise an error will be reported.

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

2. Strict mode

Inside classes and modules, the default is strict mode, so there is no need to use use strict to specify the running mode. As long as your code is written in a class or module, only strict mode is available

3. Constructor method

The constructor method is the default method of the class. When an object instance is generated through the new command, it is automatically Call this method. A class must have a constructor method. If not explicitly defined, an empty constructor method will be added by default.​

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

4. Instance object of class

To generate an instance object of a class, use the new command.

Unless the attributes of an instance are explicitly defined on itself (i.e., defined on this object), they are defined on the prototype (i.e., defined on the class).​

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

5. Class expression

The following code uses an expression to define a class. It should be noted that the name of this class is MyClass instead of Me. Me is only available in the internal code of Class and refers to the current 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. There is no variable hoisting

There is no variable hoisting (hoist) in the class

In the following code, the Foo class is used first and defined later. This will cause an error. , because ES6 does not promote class declarations to the head of the code. The reason for this provision is related to inheritance mentioned below. It is necessary to ensure that the subclass is defined after the parent class.

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

7. Private methods

Private methods are a common requirement, but ES6 does not provide them and can only be simulated through workarounds.

Add private methods

① Make a difference in naming.

　② Take advantage of the uniqueness of the Symbol value and name the private method as a Symbol value.​​​

 /*命名上加以区别*/
  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. Private properties

Like private methods, ES6 does not support private properties. Currently, there is a proposal to add private attributes to classes. The method is to use # before the attribute name.​

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

9. This points to

If a class method contains this, it points to an instance of the class by default.
Once this method is used alone, an error is likely to be reported.

 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 attribute

Since in essence, the ES6 class is just a wrapper for the ES5 constructor, so many features of the function are inherited by Class, including the name attribute. .
The name attribute always returns the class name immediately following the class keyword.

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

Related recommendations:

Detailed explanation of super keyword in ES6 Class

Get and get of class class in ES6 javascript Set usage example

How to use the class attribute in JS

The above is the detailed content of Detailed explanation of class keyword in ES6. For more information, please follow other related articles on the PHP Chinese website!