This is the 4th day of my participation in the August More Text Challenge

The class class, which usually identifies a common property of the same type,

“Class” syntax

Class people {// class method constructor() {... } computergame() { ... } basketball() { ... } eat() { ... }}Copy the code

We can then create an object with the above methods through new People (). New automatically calls methods from constructor(), so we can initialize objects from constructor() for example:

lass User { constructor(name) { this.name = name; } sayHi() { alert(`my name is ${this.name}`); Let user = new user ("coolFish"); user.sayHi();Copy the code

When new User(“John”) is called:

  1. A new object is created.
  2. constructorRun with a given parameter and assign itthis.name.

… Then we can call object methods, such as user.sayhi. Class has no commas between methods

What is the Class

It’s essentially a function

class User { constructor(name) { this.name = name; } sayHi() { alert(this.name); } // support: User is a function alert(typeof User); // functionCopy the code

That raises the question of why a class is essentially a function.

Prototype === prototype instance.__proto__ == prototype instance. Contructor === constructor constructor. Prototype === prototype instanceCopy the code
/ / class, more specifically, it is the constructor method alert (User = = = User. The prototype. The constructor); // true // method in user.prototype, for example: alert(user.prototype.sayhi); // alert(this.name);Copy the code

The constructor of the prototype instance is… Let’s look at a User class declaration built with a class User and a pure function

class User { constructor(name) { this.name = name; } sayHi() { alert(this.name); }}Copy the code

Rewrite class User as a pure function

Function User(name) {this.name = name; } // Function prototype has the default "constructor" attribute, so we don't need to create it // 2. SayHi = function() {alert(this.name); }; // usage: let user = new user ("John"); user.sayHi();Copy the code

Summary: We see that the results of both methods are basically the same, but there are still significant differences between them. Differences:

  1. Functions created through class have special internal attribute tags[[FunctionKind]]:"classConstructor".
  2. Unlike normal functions, you must call them using new
  3. Class methods are not enumerable. The class definition will be"prototype"Of all the methods inenumerableFlag set tofalse.
  4. Class always usesuse strict. All code in class construction is automatically put into strict mode

Getters and setters for Class

As in ES5, you can use the get and set keywords inside a “class” to set the store and value functions for an attribute and intercept the access behavior of that attribute.

class demo{ constructor(age){ this.age = agie; this._age = age; } get age(){ return this._age; } set age(value){ this._age = value; The console. The log (" age "+ value); } } let coolFish = new demo(9); coolFish.age = 18; console.log(coolFish.age);Copy the code

Class’s private methods and private properties

Private methods and properties: Are methods and properties that can only be accessed inside a class, not outside. This is a common requirement that facilitates code encapsulation, but ES6 does not provide it and can only be simulated through workarounds.

The underscore before the _bar method indicates that this is a private method for internal use only. However, this naming is not safe, as this method can still be called outside of the class

Class Cat{#eyes = "eyes "; Static pai(){console.log(" Kevin "); } say(){ Cat.pai(); Console. log(" Cat has a big pair "+this.#eyes); } } let kate=new Cat(); kate.say();Copy the code

Private properties can also set getter and setter methods.

Private attributes are not restricted to referencing from this; instances can also reference private attributes as long as they are inside the class.