The basic syntax of ES6 Class

1. Introduction

The from which the class came from

In the JavaScript language, the traditional way to generate instance objects is through 构造函数 Here's an example.

function Point(x, y) {
  this.x = x;
  this.y = y;
}
Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};
var p = new Point(1, 2);

The above writing is very different from traditional object-oriented languages, such as C+ and Java, and can easily confuse new programmers learning the language.

ES6 provides a writing closer to traditional languages, Class（类） as a template for objects. The class keyword allows you to define a class.

Basically, ES6's class 语法糖 can be thought of as just a syntax sugar, most of its functions, ES5 can do, the new class writing just makes the object prototype writing clearer, more like object-oriented programming syntax. The code above is rewritten with class of ES6, and that's it.

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

The code above defines a "class" in which you can see that there is a constructor method, which is the construction method, and the this keyword represents the instance object. That is, the constructor Point of ES5, the method of constructing the Point class corresponding to ES6.

In addition to constructing methods, the Point class defines a toString method. N ote that when defining a "class" method, you don't need to add the keyword function before, just put the function definition in. In addition, there is no need for comma separation between methods, and errors are added.

The class of ES6 can be thought of as another way of writing a constructor.

class Point {
  // ...
}
typeof Point // "function"
Point === Point.prototype.constructor // true

The above code indicates that the data type of the class is a function, and the class itself points to the constructor.

When used, the new command is also used directly on the class, which is exactly the same as the use of the constructor.

class Bar {
  doStuff() {
    console.log('stuff');
  }
}
var b = new Bar();
b.doStuff() // "stuff"

The prototype property of the constructor continues to exist above the Class of ES6. In fact, all methods of the class are defined above the class's prototype property.

class Point {
  constructor() {
    // ...
  }
  toString() {
    // ...
  }
  toValue() {
    // ...
  }
}
// 等同于
Point.prototype = {
  constructor() {},
  toString() {},
  toValue() {},
};

Calling a method above an instance of a class is actually calling a method on a prototype.

class B {}
let b = new B();
b.constructor === B.prototype.constructor // true

In the code above, b is an instance of Class B, and its constructor method is the constructor method of the Class B prototype.

Because the methods of the class are defined above the prototype object, the new methods of the class can be added above the prototype object. The Object.assign method makes it easy to add multiple methods to a class at once.

class Point {
  constructor(){
    // ...
  }
}
Object.assign(Point.prototype, {
  toString(){},
  toValue(){}
});

The constructor property of the prototype object points directly to the class itself, which is consistent with the behavior of ES5.

Point.prototype.constructor === Point // true

In addition, all defined methods within the class are non-enumerable.

class Point {
  constructor(x, y) {
    // ...
  }
  toString() {
    // ...
  }
}
Object.keys(Point.prototype)
// []
Object.getOwnPropertyNames(Point.prototype)
// ["constructor","toString"]

In the above code, the toString method is a method defined internally by the Point class, and it is not enumerable. This is inconsistent with the behavior of ES5.

var Point = function (x, y) {
  // ...
};
Point.prototype.toString = function() {
  // ...
};
Object.keys(Point.prototype)
// ["toString"]
Object.getOwnPropertyNames(Point.prototype)
// ["constructor","toString"]

The above code is written in ES5, and the toString method is enumerable.

The constructor method

constructor method 类 default method of the class, which is automatically called when an object instance is generated by the new command. A class must have a constructor method, and if it is not explicitly defined, an empty constructor method is added by default.

class Point {
}
// 等同于
class Point {
  constructor() {}
}

In the code above, an empty class Point is defined, and the JavaScript engine automatically adds an empty constructor method to it.

The constructor method returns the instance object (this) by default, which can be specified to return another object.

class Foo {
  constructor() {
    return Object.create(null);
  }
}
new Foo() instanceof Foo
// false

In the above code, the constructor function returns a completely new object, resulting in an instance object that is not an instance of the Foo class.

The class must be called with new or an error will be reported. This is one of the main differences between it and the normal constructor, which can also be executed without new.

class Foo {
  constructor() {
    return Object.create(null);
  }
}
Foo()
// TypeError: Class constructor Foo cannot be invoked without 'new'

An instance of the class

The instance of the generated class is written exactly the same as ES5 and uses the new command. As mentioned earlier, if you forget to add new and call Class like a function, you will report an error.

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

As with ES5, the properties of an instance are defined on a prototype (that is, on class) unless they are explicitly defined on itself (that is, on the this object).

//定义类
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.hasOwnProperty('x') // true
point.hasOwnProperty('y') // true
point.hasOwnProperty('toString') // false
point.__proto__.hasOwnProperty('toString') // true

In the above code, both x and y are properties of the instance object point itself (because it is defined on the this variable), so the hasOwnProperty method returns true, and toString is the property of the prototype object (because it is defined on the Point class), so the hasOwnProperty method returns false. These are consistent with the behavior of ES5.

Like ES5, all instances of a class share a prototype object.

var p1 = new Point(2,3);
var p2 = new Point(3,2);
p1.__proto__ === p2.__proto__
//true

In the code above, p1 and p2 are both instances of Point, and their prototypes are Point.prototype, so the proto properties are equal.

This also means that methods can be added to the Class through the instance's proto property.

Proto is not a feature of the language itself, it is a private property added by major vendors when it is specifically implemented, and although this private property is currently available in the JS engine of many modern browsers, it is not recommended to use this property in production to avoid dependency on the environment. In a production environment, we can use the Object.getPrototypeOf method to get a prototype of an instance object, and then add methods/attributes to the prototype.

var p1 = new Point(2,3);
var p2 = new Point(3,2);
p1.__proto__.printName = function () { return 'Oops' };
p1.printName() // "Oops"
p2.printName() // "Oops"
var p3 = new Point(4,2);
p3.printName() // "Oops"

The above code adds a printName method to the prototype of p1, which can also be called because the prototype of p1 is the prototype of p2. A lso, the new instance p3 can then call this method. This means that overwriteing the prototype with the proto property of the instance must be fairly cautious and not recommended because it changes the original definition of "class" and affects all instances.

Take-value functions (getter) and save functions (setter)

As with ES5, the get and set keywords can 存值函数 be used inside “类” to set a value-saving function and 取值函数 on a property to block access behavior for that property. set

class MyClass {
  constructor() {
    // ...
  }
  get prop() {
    return 'getter';
  }
  set prop(value) {
    console.log('setter: '+value);
  }
}
let inst = new MyClass();
inst.prop = 123;
// setter: 123
inst.prop
// 'getter'

In the above code, the prop property has corresponding value functions and value-taking functions, so both assignment and read behavior are customized.

The value-saving function and the value-taking function are set on the Descriptor object of the property.

class CustomHTMLElement {
  constructor(element) {
    this.element = element;
  }
  get html() {
    return this.element.innerHTML;
  }
  set html(value) {
    this.element.innerHTML = value;
  }
}
var descriptor = Object.getOwnPropertyDescriptor(
  CustomHTMLElement.prototype, "html"
);
"get" in descriptor  // true
"set" in descriptor  // true

In the code above, the memory function and the value-taking function are defined above the description object of the html property, which is exactly the same as ES5.

Property expression

The property name of the class, which can take an expression.

let methodName = 'getArea';
class Square {
  constructor(length) {
    // ...
  }
  [methodName]() {
    // ...
  }
}

In the code above, the method name of the Square class, getArea, is derived from an expression.

Class expression

Like functions, classes can be defined in the form of expressions.

const MyClass = class Me {
  getClassName() {
    return Me.name;
  }
};

The above code defines a class using expressions. N ote that the name of this class is Me, but Me is only available inside Class and refers to the current class. Outside class, this class can only be referenced with MyClass.

let inst = new MyClass();
inst.getClassName() // Me
Me.name // ReferenceError: Me is not defined

The code above indicates that Me is defined only within Class.

If the inside of the class is not used, me can be omitted, that is, it can be written in the following form.

const MyClass = class { /* ... */ };

With a Class expression, you can write a Class that executes immediately.

let person = new class {
  constructor(name) {
    this.name = name;
  }
  sayName() {
    console.log(this.name);
  }
}('张三');
person.sayName(); // "张三"

In the code above, person is an instance of an immediately executed class.

Note the point

(1) Strict mode

Inside classes and modules, the default is strict mode, so you don't need to use use strict to specify the run mode. A s long as your code is written in a class or module, only strict mode is available. Considering that all future code is actually running in modules, ES6 actually upgraded the entire language to strict mode.

(2) There is no ascension

类 does 变量提升 promotion (hoist), which is completely different from ES5.

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

In the above code, the Foo class is used before and defined later, which will report an error because ES6 does not elevate the class's declaration to the head of the code. The reason for this provision is related to the inheritance to be mentioned below, and it is important to ensure that the child class is defined after the parent class.

{
  let Foo = class {};
  class Bar extends Foo {
  }
}

The code above doesn't report an error because When Bar inherits Foo, Foo is already defined. However, if there is an elevation of class, the above code will report an error because class is promoted to the head of the code and the let command is not promoted, so foo is not defined when Bar inherits Foo.

(3) name property

Because the class of ES6 is essentially just a layer of wrapper for the constructor of ES5, many of the properties of the Class including the name property.

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

The name property always returns the class name that follows the class keyword.

(4) Generator method

If a method is previously asterisked with an asterisk, it means that the method is a Generator function.

class Foo {
  constructor(...args) {
    this.args = args;
  }
  * [Symbol.iterator]() {
    for (let arg of this.args) {
      yield arg;
    }
  }
}
for (let x of new Foo('hello', 'world')) {
  console.log(x);
}
// hello
// world

In the code above, the Symbol.iterator method of the Foo class has an asterisk in front of it, indicating that the method is a Generator function. T he Symbol.iterator method returns a default traverser for the Foo class, for... The of loop automatically calls the traverser.

(5) The point of this

If the method of the class contains this, it points by default to the instance of the class. However, you must be very careful that once you use this method alone, you are likely to report an error.

class Logger {
  printName(name = 'there') {
    this.print(`Hello ${name}`);
  }
  print(text) {
    console.log(text);
  }
}
const logger = new Logger();
const { printName } = logger;
printName(); // TypeError: Cannot read property 'print' of undefined

In the code above, this in the printName method points by default to an instance of the Logger class. However, if this method is extracted for use alone, this points to the environment in which the method runs (because the class is in strict mode, so this actually points to undefined), resulting in an error that cannot be found for the print method.

An easier solution is to bind this in the construction method so that you don't find the print method.

class Logger {
  constructor() {
    this.printName = this.printName.bind(this);
  }
  // ...
}

Another solution is to use the arrow function.

class Obj {
  constructor() {
    this.getThis = () => this;
  }
}
const myObj = new Obj();
myObj.getThis() === myObj // true

This inside the arrow function always points to the object where it was defined. I n the code above, the arrow function is inside the constructor, and its definition takes effect when the constructor executes. At this point, the running environment in which the arrow function is located must be the instance object, so this always points to the instance object.

Another workaround is to use Proxy, which automatically binds this when you get the method.

function selfish (target) {
  const cache = new WeakMap();
  const handler = {
    get (target, key) {
      const value = Reflect.get(target, key);
      if (typeof value !== 'function') {
        return value;
      }
      if (!cache.has(value)) {
        cache.set(value, value.bind(target));
      }
      return cache.get(value);
    }
  };
  const proxy = new Proxy(target, handler);
  return proxy;
}
const logger = selfish(new Logger());

2. Static method

The class is the prototype of the instance, and all methods defined in the class are inherited by the instance. If you add the static keyword before a method, it means that the method is not inherited by the instance, but is called directly through the class, which is called a "static method."

class Foo {
  static classMethod() {
    return 'hello';
  }
}
Foo.classMethod() // 'hello'
var foo = new Foo();
foo.classMethod()
// TypeError: foo.classMethod is not a function

In the code above, the ClassMethod method of the Foo class is previously followed by the static keyword, indicating that the method is a static method that can be called directly on the Foo class (Foo.classMethod() rather than on an instance of the Foo class. If a static method is called on an instance, an error is thrown indicating that the method does not exist.

Note that if the static method contains the this keyword, this this refers to the class, not the instance.

class Foo {
  static bar() {
    this.baz();
  }
  static baz() {
    console.log('hello');
  }
  baz() {
    console.log('world');
  }
}
Foo.bar() // hello

In the code above, the static method bar calls this.baz, where this refers to the Foo class, not an instance of Foo, which is equivalent to calling Foo.baz. In addition, as can be seen from this example, static methods can be renamed with non-static methods.

The static method of the parent class, which can be inherited by the child class.

class Foo {
  static classMethod() {
    return 'hello';
  }
}
class Bar extends Foo {
}
Bar.classMethod() // 'hello'

In the code above, the parent class Foo has a static method that the child class Bar can call.

Static methods can also be called from the super object.

class Foo {
  static classMethod() {
    return 'hello';
  }
}
class Bar extends Foo {
  static classMethod() {
    return super.classMethod() + ', too';
  }
}
Bar.classMethod() // "hello, too"

3. A new way to write an instance property

实例属性 Can also be defined at the top of the class in addition to the this that is defined within 类 constructor() method.

class IncreasingCounter {
  constructor() {
    this._count = 0;
  }
  get value() {
    console.log('Getting the current value!');
    return this._count;
  }
  increment() {
    this._count++;
  }
}

In the code above, the instance this._count is defined in the constructor() method. Another way to write is that this property can also be defined at the top of the class, and everything else remains the same.

class IncreasingCounter {
  _count = 0;
  get value() {
    console.log('Getting the current value!');
    return this._count;
  }
  increment() {
    this._count++;
  }
}

In the code above, the instance _count is at the same level as the value() and increment() methods of the value function. At this point, you do not need to add this before the instance property.

The advantage of this new approach is that the properties of all instance objects themselves are defined at the head of the class and look neat, so you can see at a glance what instance properties of the class are.

class foo {
  bar = 'hello';
  baz = 'world';
  constructor() {
    // ...
  }
}

The above code, you can see at a glance, foo class has two instance properties, at a glance. In addition, it is more concise to write.

4. Static properties

静态属性 refer Class properties of Class itself, Class.propName rather than properties defined on instance objects (this).

class Foo {
}
Foo.prop = 1;
Foo.prop // 1

The above is written with a static property prop defined for the Foo class.

Currently, only this writing is feasible because ES6 clearly states that there are only static 静态方法 静态属性 Class Now there is a proposal that provides static properties for the class, written in front of the instance properties, plus the static keyword.

class MyClass {
  static myStaticProp = 42;
  constructor() {
    console.log(MyClass.myStaticProp); // 42
  }
}

This new writing greatly facilitates the expression of static properties.

// 老写法
class Foo {
  // ...
}
Foo.prop = 1;
// 新写法
class Foo {
  static prop = 1;
}

In the code above, the static properties of the old writing are defined outside the class. A fter the entire class is generated, static properties are generated. T his makes it easy to ignore this static property and does not conform to the principle of code organization that the relevant code should put together. In addition, the new approach is explicit declaration, rather than assignment processing, with better semantics.

5. Private methods and private properties

Existing solutions

Private methods and private properties are methods and properties that can only be accessed inside the class and cannot be accessed externally. This is a common requirement that facilitates the encapsulation of code, but ES6 is not available and can only be implemented through work-through simulation.

One approach is to distinguish between naming.

class Widget {
  // 公有方法
  foo (baz) {
    this._bar(baz);
  }
  // 私有方法
  _bar(baz) {
    return this.snaf = baz;
  }
  // ...
}

In the code above, _bar before the method, indicating that this is a private method that is limited to internal use. However, this naming is not safe, and can still be called to this method outside the class.

Another approach is to move the private method out of the module, because all methods inside the module are visible to the outside world.

class Widget {
  foo (baz) {
    bar.call(this, baz);
  }
  // ...
}
function bar(baz) {
  return this.snaf = baz;
}

In the code above, foo is an exposed method that calls bar.call (this, baz) internally. This makes bar actually a private method of the current module.

Another approach is to take advantage Symbol uniqueness of the Symbol value and name the private method after a Symbol value.

const bar = Symbol('bar');
const snaf = Symbol('snaf');
export default class myClass{
  // 公有方法
  foo(baz) {
    this[bar](baz);
  }
  // 私有方法
  [bar](baz) {
    return this[snaf] = baz;
  }
  // ...
};

In the above code, bar and snaf are Symbol values that are generally not available and therefore have the effect of private methods and private properties. But it's not absolutely not, and Reflect.ownKeys() can still get them.

const inst = new myClass();
Reflect.ownKeys(myClass.prototype)
// [ 'constructor', 'foo', Symbol(bar) ]

In the code above, the property name of the Symbol value can still be obtained from outside the class.

Proposals for private properties

Currently, there is a proposal to add a private property 私有属性 The method is to use the s before the property name.

class IncreasingCounter {
  #count = 0;
  get value() {
    console.log('Getting the current value!');
    return this.#count;
  }
  increment() {
    this.#count++;
  }
}

In the code above, #count is a private property that can only be used inside the class (this.#count). If used outside the class, an error is reported.

const counter = new IncreasingCounter();
counter.#count // 报错
counter.#count = 42 // 报错

The above code, outside the class, reads the private property and reports an error.

Here's another example.

class Point {
  #x;
  constructor(x = 0) {
    this.#x = +x;
  }
  get x() {
    return this.#x;
  }
  set x(value) {
    this.#x = +value;
  }
}

In the code above, #x is a private property that cannot be read outside the Point class. #x and x are two different properties because the hashtag is part of the property name and must be used with the hashtag.

The reason for introducing a new prefix, s, that represents a private property between private attributes and not the private keyword is that JavaScript is a dynamic language with no type declarations, and using separate symbols seems to be the only convenient and reliable way to accurately distinguish whether a property is private or not. In addition, the Ruby language uses s for private properties, and ES6 does not use the symbol because s has been left to Decorator.

This type of writing can be used not only to write private properties, but also to write private methods.

class Foo {
  #a;
  #b;
  constructor(a, b) {
    this.#a = a;
    this.#b = b;
  }
  #sum() {
    return #a + #b;
  }
  printSum() {
    console.log(this.#sum());
  }
}

In the code above, #sum () is a private method.

In addition, private properties can set the getter and setter methods.

class Counter {
  #xValue = 0;
  constructor() {
    super();
    // ...
  }
  get #x() { return #xValue; }
  set #x(value) {
    this.#xValue = value;
  }
}

In the code above, #x is a private property that reads and writes through get #x() and set #x().

Private properties are not limited to references from this, and instances can refer to private properties as long as they are inside the class.

class Foo {
  #privateValue = 42;
  static getPrivateValue(foo) {
    return foo.#privateValue;
  }
}
Foo.getPrivateValue(new Foo()); // 42

The above code allows private properties to be referenced from above the instance foo.

Before private properties and private methods, you can also add the static keyword to indicate that this is a static private property or a private method.

class FakeMath {
  static PI = 22 / 7;
  static #totallyRandomNumber = 4;
  static #computeRandomNumber() {
    return FakeMath.#totallyRandomNumber;
  }
  static random() {
    console.log('I heard you like random numbers…')
    return FakeMath.#computeRandomNumber();
  }
}
FakeMath.PI // 3.142857142857143
FakeMath.random()
// I heard you like random numbers…
// 4
FakeMath.#totallyRandomNumber // 报错
FakeMath.#computeRandomNumber() // 报错

In the above code, #totallyRandomNumber is a private property, #computeRandomNumber() is a private method, which can only be called internally by the FakeMath class, and the external call will report an error.

6. New.target property

new a command to generate an instance object from a constructor. E S6 introduces a new.target which is typically used 构造函数 constructors and returns the constructor to which the new command works. If the constructor is not called by the new command or Reflect.construct(), new.target returns undefined, so this property can be used to determine how the constructor is called.

function Person(name) {
  if (new.target !== undefined) {
    this.name = name;
  } else {
    throw new Error('必须使用 new 命令生成实例');
  }
}
// 另一种写法
function Person(name) {
  if (new.target === Person) {
    this.name = name;
  } else {
    throw new Error('必须使用 new 命令生成实例');
  }
}
var person = new Person('张三'); // 正确
var notAPerson = Person.call(person, '张三');  // 报错

The above code ensures that the constructor can only be called by the new command.

Class calls new.target internally, returning the current Class.

class Rectangle {
  constructor(length, width) {
    console.log(new.target === Rectangle);
    this.length = length;
    this.width = width;
  }
}
var obj = new Rectangle(3, 4); // 输出 true

It is important to note that when a child class inherits a parent class, new.target returns the child class.

class Rectangle {
  constructor(length, width) {
    console.log(new.target === Rectangle);
    // ...
  }
}
class Square extends Rectangle {
  constructor(length, width) {
    super(length, width);
  }
}
var obj = new Square(3); // 输出 false

In the above code, new.target returns sub-classes.

This feature allows you to write classes that cannot be used independently and must be inherited before they can be used.

class Shape {
  constructor() {
    if (new.target === Shape) {
      throw new Error('本类不能实例化');
    }
  }
}
class Rectangle extends Shape {
  constructor(length, width) {
    super();
    // ...
  }
}
var x = new Shape();  // 报错
var y = new Rectangle(3, 4);  // 正确

In the code above, the Shape class cannot be instantiated and can only be used for inheritance.

Note that outside the function, using new.target will report an error.