Shulou(Shulou.com)06/03 Report--

This article focuses on "how to master the class class in the front-end JavaScript". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to master the class class in the front-end JavaScript.

1. Class

A class is a template for creating objects. The method of generating object instances in JavaScript is through constructors, which is quite different from that of mainstream object-oriented languages (java,C#), as follows:

Function Point (x, y) {this.x = x; this.y = y;} Point.prototype.toString = function () {return'('+ this.x +','+ this.y +')';}; var p = new Point (1,1)

ES6 provides a closer approach to the Java language, introducing the concept of Class (classes) as a template for objects. Through the class keyword, you can define classes.

As follows: constructor () is the constructor, and this represents the instance object:

Class Point {constructor (x, y) {this.x = x; this.y = y;} toString () {return'('+ this.x +','+ this.y +')';}}

The data type of the class is the function, which itself is the constructor that points to the function:

/ / ES5 function declares function Point () {/ /...} / / ES6 class declares class Point {/ /.... Constructor () {}} typeof Point / / "function" Point = = Point.prototype.constructor / / true

The method defined in the class is linked to Point.prototype, so the class only provides syntactic sugar, essentially a prototype chain call.

Class Point {constructor (x, y) {this.x = x; this.y = y;} toString () {return'('+ this.x +','+ this.y +')';}} Point.prototype = {/ /.... ToString ()} var p = new Point (1); p.toString () / / (1)

Another way to define a class class expression

/ / unnamed / anonymous class let Point = class {constructor (x, y) {this.x = x; this.y = y;}}; Point.name / / Point

There is an important difference between function declarations and class declarations. Function declarations are promoted, while class declarations are not.

> let p = new Point (); / / No error will be reported when promoted > function Point () {} > > let p = new Point (); / / error, ReferenceError > class Point {} > 1.1 constructor ()

The constructor () method is the default method of the class and is automatically called by new when it generates an instance object.

A class must have a constructor () method, and if it is not explicitly defined, the engine adds an empty constructor () by default.

The constructor () method returns the instance object (that is, this) by default.

Class Point {} / / automatically add class Point {constructor () {}} 1.2 getter and setter

Like ES5, you can use the get and set keywords inside a class to set a store-value function and a value-taking function on an attribute to intercept the access behavior of that property.

Class User {constructor (name) {this.name = name;} get name () {return this.name;} set name (value) {this.name = value;}} 1.3 this

The this inside the method of the class, which points to the instance of the class by default. When calling a method that has this, you need to use the obj.method () method, otherwise an error will be reported.

Class User {constructor (name) {this.name = name;} printName () {console.log ('Name is' + this.name)}} const user = new User ('jack') user.printName () / / Name is jackconst {printName} = user;printName () / / error Cannot read properties of undefined (reading' name')

If you want to call separately without reporting an error, a method can call bind (this) in the constructor.

Class User {constructor (name) {this.name = name; this.printName = this.printName.bind (this);} printName () {console.log ('Name is' + this.name)}} const user = new User ('jack') const {printName} = user;printName () / / Name is jack

Bind (this) creates a new function and points the incoming this as the context when the function is called.

You can also use the arrowhead function because the this inside the arrowhead function always points to the object in which it is defined.

Class User {constructor (name) {this.name = name;} printName = () = > {console.log ('Name is' + this.name)}} const user = new User ('jack') const {printName} = user;printName () / / Name is jack1.4 static attribute

Static properties refer to the properties of the class itself, not those defined on the instance object this.

Class User {} User.prop = 1bot User.prop / / 11.5static method

You can define a static method in a class, which is not inherited by the object instance, but is called directly through the class.

The use of this in static methods points to the class.

Class Utils {static printInfo () {this.info ();} static info () {console.log ('hello');}} Utils.printInfo () / / hello

With regard to the restrictions on the scope of method calls, for example, private and public, ES6 does not provide it for the time being, usually through a convention, such as putting an underscore _ print () in front of the method to indicate the private method.

2. Inheritance

Class inheritance is implemented through extends in Java. Classes in ES6 can also be inherited through extends.

When inheriting, the subclass must call the super method in the constructor method, otherwise it will report an error when creating a new instance.

Class Point3D extends Point {constructor (x, y, z) {super (x, y); / / call the parent class constructor (x, y) this.z = z;} toString () {return super.toString () +'+ this.z; / / call the parent class toString ()}}

The static method of the parent class is also inherited by the child class

Class Parent {static info () {console.log ('hello world');}} class Child extends Parent {} Child.info () / / hello world2.1 super keyword

The constructor of the subclass must execute the super function once, which represents the constructor of the parent class.

Class Parent {} class Child extends Parent {constructor () {super ();}}

When the method of the parent class is called through super in the normal method of the subclass, the this inside the method points to the current instance of the subclass.

Class Parent {constructor () {this.x = 1; this.y = 10} printParent () {console.log (this.y);} print () {console.log (this.x);}} class Child extends Parent {constructor () {super (); this.x = 2;} m () {super.print ();}} let c = new Child () C.printParent () / / 10c.m () / / 22.2 _ proto_ and prototype

When you are new to JavaScript, _ proto_ and prototype are easy to confuse. First we know that each JS object corresponds to a prototype object and inherits properties and methods from the prototype object.

Prototype some properties of built-in objects and functions, which are pointers to an object whose purpose is to contain properties and methods shared by all instances (we call this object a prototype object).

_ proto_ every object has this property, which generally points to the prototype property of the corresponding constructor.

The following figure shows some built-in objects that have prototype:

According to the above description, look at the following code

Var obj = {} / / equivalent to var obj = new Object () / / prototypeobj.__proto__ pointing to the Object constructor prototypeobj.__proto__ = Object.prototype / / true// obj.toString calling method inherits obj.toString from Object.prototype = obj.__proto__.toString / / true// array var arr = [] arr.__proto__ = Array.prototype / / true

For function objects, each declared function has both the prototype and _ _ proto__ attributes, the created object attribute _ _ proto__ points to the function prototype, and the function's _ _ proto__ points to the prototype of the built-in function object (Function).

Function Foo () {} var f = new Foo (); f.protoplast _ = Foo.prototype / / trueFoo.__proto__ = Function.prototype / / true2.3 inheritance _ proto__

The class, as the syntax sugar of the constructor, also has both the prototype attribute and the _ _ proto__ attribute, so there are two inheritance chains at the same time.

The _ _ proto__ attribute of the subclass, which represents the inheritance of the constructor, always points to the parent class.

The _ _ proto__ attribute of the subclass prototype attribute, which represents the inheritance of the method, always points to the prototype attribute of the parent class.

Class Parent {} class Child extends Parent {} Child.__proto__ = Parent / / trueChild.prototype.__proto__ = Parent.prototype / / true2.4 inherits _ _ proto__ in the instance

The _ _ proto__ property of the subclass instance points to the prototype of the subclass constructor.

The _ _ proto__ property of the _ _ proto__ property of the subclass instance points to the _ _ proto__ property of the parent class instance. That is, the prototype of the prototype of the subclass is the prototype of the parent class.

Class Parent {} class Child extends Parent {} var p = new Parent (); var c = new Child (); c. Eggs protozoa _ = = p.protoprotozoa _ / / falsec.__proto__ = p.protoprotoplasts _ / / true so far, I believe you have a deeper understanding of "how to master the class classes in front-end JavaScript", so you might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.