preface

The last article organized a piece of knowledge related to es6 deconstruction syntax (ES6 series). In this article, I will sort out the knowledge related to class.

What is the class

Class is a class, and ES5 constructor is very similar, most functions are the same, but class writing, can make the object prototype function clearer, more in line with the characteristics of object-oriented language.

The class of the writing

  • The way you write the constructor
function Point(x, y) {
    this.x = x;
    this.y = y;
}

Point.prototype.sayPoint = function() {
    console.log(`x: The ${this.x}, y: The ${this.y}`);
}
Copy the code
  • The class of the writing
class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    sayPoint() {
        console.log(`x: The ${this.x}, y: The ${this.y}`); }}Copy the code
  • Note the class notation

1) Constructor (). 2. When defining a class’s methods, you don’t need to add a comma or a function

  • The difference between the two

All methods defined inside a class are not enumerable. The methods defined above the stereotype are enumerable.

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    sayPoint() {
        console.log(`x: The ${this.x}, y: The ${this.y}`); }}Object.keys(Point.prototype);  / / []
Copy the code
function Point(x, y) {
    this.x = x;
    this.y = y;
}

Point.prototype.sayPoint = function() {
    console.log(`x: The ${this.x}, y: The ${this.y}`);
}
Object.keys(Point.prototype);  //['sayPoint']
Copy the code

The constructor method

Constructor is the default method of the class, and if not defined, there will be an empty constructor.

class Point {}/ / is equivalent to
class Point {
    constructor() {}}Copy the code
  • Return in the constructor
class Point {
    constructor() {
        return Object.create(null); }}new Point() instanceof Point
// false
Copy the code
  • Class must use new
class Point {
    constructor() {
        return Object.create(null);
    }
}
Point();
// Class constructor Point cannot be invoked without 'new'
Copy the code

Getter and setter

Getters and setters are interceptors, and when you do something, you can add some custom things.

class Point{
    constructor() {
        // ...
    }
    get x() {
        console.log('getter');
    }
    set x(val) {
        console.log(`setter: ${val}`)}}const p = new Point();
p.x = 1;
// setter: 1
p.x
// getter
Copy the code

Pay attention to the point

  • Strict mode

Class internally defaults to strict mode.

  • There is no variable promotion
new Point(); // SyntaxError: Identifier 'Point' has already been declared
class Point{}
Copy the code
  • The name attribute

The class is a wrapper around the ES5 constructor, so many properties are inherited by class, including the name attribute.

class Point{}
Point.name  // Point
Copy the code
  • This points to the problem

Normally, this points to instances of the class. But when you call one of the methods separately, an error occurs.

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    print() {
        console.log(this);
        console.log(`x: The ${this.x},y: The ${this.y}`); }}const p = new Point();
let {print} = p;
print();
Copy the code

In this example, the output this is undefined. Because this refers to the context in which the function is currently running, but strict mode is defined inside the class, this is undefined.

Static methods and static properties

  • A static method

Static methods are methods on a class that are not inherited by an instance. Keywords – static

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    static print() {
        console.log(this);
        console.log(`x: The ${this.x},y: The ${this.y}`); }}const p = new Point();
p.print(); // p.print is not a function
Point.print(); // x: undefined,y: undefined
Copy the code
  • Static attributes

Static properties don’t have the keyword static.

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    static print() {
        console.log(this);
        console.log(`x: The ${this.x},y: The ${this.y}`);
    }
}
Point.z = 1;
const p = new Point();
p.z //undefined
Copy the code

A new way to write instance attributes

When an attribute value is not assigned at initialization, we can write as follows:

class Point{
    constructor() {
        this.x = 1;
        this.y = 2; }}/ / is equivalent to

class Point{
    x = 1;
    y = 2;
}
Copy the code

conclusion

This article has put together some basic syntax for class. The next article will sort out class inheritance.