ES6 class understanding

This is the 13th day of my participation in Gwen Challenge

Two ways to define an object

Native JS definitions

function Person(age, name) {
    this.age = age
    this.name = name
}
Person.prototype.eat=function(){
    console.log("Nothing")}const p=new Person(18.'tom')
Copy the code

The class definition

• Methods defined by class cannot be enumerated

class Person2 {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
    eat() {
        console.log("Nothing")}}const p2 = new Person2('tony'.18)
Copy the code

A little bit about prototypes and prototype chains

console.log(p2.__proto__ === Person2.prototype)  //true
Copy the code

constructor

• A constructor method exists in each class and is added by default even if it is not created manually

• For a class, there can be only one constructor method, where this refers to the instance object being created

Variable ascension

For both variables and functions, variable promotion exists, but as a class, there is no such thing as variable promotion, so it must be created first and then called

class P{}new P()
Copy the code

Private methods

Underline variables

• The development team agreed in advance to underline private variable names

class P{
    constructor(name, age) {
        this.name = name
        this.age = age
        this._a = 1// indicates that _a is a private property}}new P()
Copy the code

But when you print an object, you can see that the _A property can still be called, which is simple and intuitive, but can still be called externally, ostensibly as a private variable

symbol

Symbol is used to define a unique value, using this property to implement private variables

Symbol('a') = = =Symbol('a')//false
Copy the code

// Encapsulate a class in a file
const _a = Symbol('_a')  //

class Person2 {

    constructor(name, age) {

        this.name = name
        this.age = age
        this[_a] = 1  // Add private attributes
    }

    eat() {
        console.log("Nothing")}show() {
        return this[_a] 
    }
}

// Introduce this class in another js file

const p2 = new Person2('tony'.18)

console.log(p2)
console.log(p2.show()) / / 1
console.log(p2._a)  //undefined cannot be accessed
Copy the code

This points to the problem

• Call a defined method inside a class

class Logger {
  printName(name = 'there') {
    this.print(`Hello ${name}`); // Call its own method
  }

  print(text) {
    console.log(text); }}const logger = new Logger();
const { printName } = logger;
printName(); // TypeError: Cannot read property 'print' of undefined
Copy the code

Use the bind

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

Arrow function

class Logger {
  constructor() {
    this.printName = (name = 'there') = > {
      this.print(`Hello ${name}`);
    };
  }
  // ...
}
Copy the code

super

As a method

• When used as a method, for examplesuper(name)The constructor that represents the parent class can only be written inconstructorIn the

As an object

• As an object, for examplesuper.move()A prototype object that represents the parent class