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

Relearn JavaScript in a series of articles…

Traditional JavaScript has no concept of classes, only objects. To make JavaScript more like an object-oriented language, ES6 introduced the concept of Class, which defines classes through the Class keyword.

Let’s take a look at creating an instance using the ES5 constructor versus class:

// es5 constructor function Person(name,age){this.name = name this.age = age Prototype method person.prototype. say = function(){console.log(this.name+' talking ')} var p = new Person(' talking ',18) p.say(Copy the code
Constructor (name,age){this.name = name this.age = age 'man' // Prototype method say(){console.log(this.name+' speaking ')}} var p1 = new Person1(' lisi ',18) p1.say() // lisi is speaking p1.say === = Person1.prototype.say // true typeof Person1 // 'function'Copy the code

From this example, you can see that class is essentially a function, and the SAY attribute in p1 instance is equal to the SAY attribute in the Person1 class prototype.

Class properties and functions are also defined in Prototype properties, but ES6 encapsulates prototype property-related operations in class, eliminating the need to manipulate Prototype properties between us.

Static properties and methods

Static properties and methods are modified with the static keyword and can only be used by the class itself, not by instances.

Class Person{static name = 'class' static getName(){console.log('static getName')}} class Person{static name = 'class' static getName(){console.log('static getName')} 'class' person.getname // 'static getName' // let p = new Person() p.name // undefined p.get_name () // undefinedCopy the code

In this example we did not declare the constructor, why did we not declare an error? Because an empty constructor is automatically added implicitly when it is not declared.

inheritance

ES6 can implement class inheritance through the extends keyword.

Class Person{constructor(name,age){this.name = name this.age = age} static tag = 'Person' getName(){return Class Boy extends Person{constructor(name,age,sex){super(name,age) this.sex = sex} GetSex (){return this.sex}} var b = new Boy(' 3 ',18,' 4 ') b.get_name () // b.get_sex () // b.get_name () // '4' b.get_sex () // undefined Boy.tag // 'person'Copy the code

Static functions of a parent class cannot be inherited by an instance, but can be inherited by a subclass, which can be accessed by itself, not by a subclass instance.

Note:

  1. Class can only be used with the new keyword configuration
Class Person(){} new Person() // Correct Person() // Error: class constructor cannot executeCopy the code
  1. Class defines that there is no variable promotion for the class
Var p = new Person(){}Copy the code
  1. Class to declare functions, do not add the function keyword
Class Person(){say function(){// UnExpected token function}}Copy the code
  1. This points to the problem
Class Person(){constructor(name){this.name = name} getName(){return this.name}} const {getName} = new Person(' zhang3 ') GetName () : Cannot read property 'name' of undefinedCopy the code

The getName() function executes in the global environment; this refers to the global environment. But ES6 class keyword uses strict mode, and strict mode this can not point to the global environment, but to undefined, so use undefined name error.

Workaround: Rebind this in the constructor

Class Person{constructor(name){this.getName = name // re-bind this to an instance of this.getName = this.getname.bind (this)} GetName (){return this.name}} const {getName} = new Person(' zhang3 ') getName() // zhang3Copy the code

Since then we have studied the ES6 class keyword.