This is the 16th day of my participation in the August More Text Challenge. For details, see: August More Text Challenge

ES6’s class can be seen as a syntactic sugar. Most of the functions of ES5 can be done, but the new class writing just makes the object prototype more clear and more like the syntax of object-oriented programming.

Classes in ES6 and classes in ES5

1.1 the constructor

ES6 in:

class Person {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    return 'hello, I am ' + this.name; }}var kevin = new Person('Kevin');
kevin.sayHello(); // hello, I am Kevin
Copy the code

ES5:

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function () {
  return 'hello, I am ' + this.name;
};

var kevin = new Person('Kevin');
kevin.sayHello(); // hello, I am Kevin
Copy the code

We can see that ES5’s constructor Person corresponds to the constructor method of ES6’s Person class.

Note: All methods defined in an ES6 class are non-enumerable.

In the ES6:

Object.keys(Person.prototype); / / []
Object.getOwnPropertyNames(Person.prototype); // ["constructor", "sayHello"]
Copy the code

In the ES5:

Object.keys(Person.prototype); // ['sayHello']
Object.getOwnPropertyNames(Person.prototype); // ["constructor", "sayHello"]
Copy the code

1.2 Instance Attributes

In ES6, we previously defined instance properties that could only be written within the constructor method of the class. Such as:

class Person {
  constructor() {
    this.state = {
      count: 0}; }}Copy the code

However, there is a proposal that specifies new writing for both instance attributes and static attributes, and Babel already supports it. Now we can write:

class Person {
  state = {
    count: 0
  };
}
Copy the code

In the ES5:

function Person() {
  this.state = {
    count: 0
  };
}
Copy the code

1.3 Static Methods

All methods defined in a class are inherited by the instance. If you put the static keyword in front of a method, it means that the method will not be inherited by the instance, but will be called directly through the class. This is called a static method.

In the ES6:

class Person {
  static sayHello() {
    return 'hello';
  }
}

Person.sayHello() // 'hello'

var kevin = new Person();
kevin.sayHello(); // TypeError: kevin.sayHello is not a function
Copy the code

In the ES5:

function Person() {}

Person.sayHello = function() {
  return 'hello';
};

Person.sayHello(); // 'hello'

var kevin = new Person();
kevin.sayHello(); // TypeError: kevin.sayHello is not a function
Copy the code

1.4 Static Properties

Static properties refer to the properties of the Class itself, namely class.propname, rather than the properties defined on the instance object (this).

In ES6, previously we could only add static properties like this:

class Person {}

Person.name = 'kevin';
Copy the code

Because the proposal mentioned above can now be written as:

class Person {
  static name = 'kevin';
}
Copy the code

In the ES5:

function Person() {};

Person.name = 'kevin';
Copy the code

1.5 new

Note: The class must be called with new, otherwise an error will be reported. Normal constructors can be executed without new.

class Person {}

Person(); // TypeError: Class constructor Foo cannot be invoked without 'new'
Copy the code

1.6 getter and setter

In ES6, as in ES5, you can use the get and set keywords inside a class to set a value function and a value function for a property, blocking access to that property.

class Person {
  get name() {
    return 'kevin';
  }
  set name(newName) {
    console.log('new name is: ' + newName)
  }
}

let person = new Person();

person.name = 'daisy';
// New name is: Daisy

console.log(person.name);
// kevin
Copy the code

In the ES5:

function Person(name) {}

Person.prototype = {
  get name() {
    return 'kevin';
  },
  set name(newName) {
    console.log('new name is: ' + newName)
  }
}

let person = new Person();

person.name = 'daisy';
// New name is: Daisy

console.log(person.name);
// kevin
Copy the code