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

This article mainly explains "how to use the class class in ES6". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let the editor take you to learn how to use the class class in ES6.

Recognize the class definition class

We will find that creating classes in the form of the previous constructor is not only too similar to writing ordinary functions, but also that the code is not easy to understand.

In the new standard of ES6 (ECMAScript2015), the class keyword is used to define the class directly; but the class is still the syntax sugar of the constructor and prototype chain mentioned earlier, so it is more helpful for us to understand the concept and inheritance relationship of the class after learning the constructor and prototype chain well.

So how do you use class to define a class? -you can declare a class in two ways: class declaration and class expression

Class Person {

/ / Class declaration

}

Const Person=class {

/ / Class expression

}

Similarities and differences between class and constructor

Let's take a look at some of the features of the class: you will find that it is actually consistent with the properties of our constructor

Console.log (Person.prototype)

Console.log (Person.prototype.__proto__) / / Object null

Console.log (Person.prototype.constructor) / / Person

Console.log (typeof Person) / / function

Var p = new Person ()

Console.log (P. eggs protoplast _ = = Person.prototype) / / true

Constructor of class

What if we want to pass some parameters to the class when we create the object?

Each class can have its own constructor (method), whose name is fixed constructor

When we manipulate a class through the new operator, we call the class's constructor constructor.

Each class can only have one constructor, and if it contains multiple constructors, an exception will be thrown

When we manipulate the class through the new keyword, we call the constructor function and do the following:

1. Create a new object (empty object) in memory

two。 The [[prototype]] property inside the object is assigned to the prototype property of the class.

3. The this inside the constructor will point to the new object created

4. Execute the internal code of the constructor (function body code)

5. If the constructor does not return a non-empty object, it returns the new object created

Instance method of the class

The attributes we defined above are directly placed on the this, which means that it is placed in the new object created:

As we said earlier, for the method of the instance, we want to put it on the prototype so that it can be shared by multiple instances.

At this point, we can define it directly in the class.

Class Person {

Constructor (name, age) {

This.name = name

This.age = age

This._address = "Guangzhou"

}

/ / ordinary instance method

/ / access the created object

/ / var p = new Person ()

/ / p.eating ()

Eating () {

Console.log (this.name + "eating--")

}

Running () {

Console.log (this.name + "running--")

}

}

Accessor methods of the class

When we talked about the property descriptor of an object, we said that an object can add setter and getter functions, then the class can also:

Class Person {

Constructor (name, age) {

This.name = name

This.age = age

This._address = "Guangzhou"

}

/ / accessor method of the class

Get address () {

Console.log ("blocking access operations")

Return this._address

}

Set address (newAddress) {

Console.log ("intercept Settings Operation")

This._address = newAddress

}

}

Static methods of the class

Static methods are usually used to define methods that are executed directly using a class, without the need for an instance of the class, using the static keyword to define:

Class Person {

Constructor (name, age) {

This.name = name

This.age = age

This._address = "Guangzhou"

}

/ / static method of the class (class method)

/ / Person.createPerson ()

Static randomPerson () {

Var nameIndex = Math.floor (Math.random () * names.length)

Var name = names [nameIndex]

Var age = Math.floor (Math.random () * 100)

Return new Person (name, age)

}

}

Inheritance of the ES6 class-extends

Before we spent a lot of space on the implementation of inheritance in ES5, although the final implementation of a relatively satisfactory inheritance mechanism, but the process is still very tedious. The extends keyword has been added in ES6, which can easily help us implement inheritance:

Class Person {

}

Class Student extends Person {

}

Super keyword

We will find that I use a super keyword in the above code, and this super keyword is used in different ways: note: before you can use this in the constructor of a child (derived) class or return the default object, you must call the constructor of the parent class through super!

There are three uses of super: constructors of subclasses, instance methods, and static methods.

Inherit built-in class

We can also have our class inherit from the built-in class, such as Array:

Class HYArray extends Array {

FirstItem () {

Return this [0]

}

LastItem () {

Return is [this.length-1]

}

}

Var arr = new HYArray (1,2,3)

Console.log (arr.firstItem ())

Console.log (arr.lastItem ())

Mixing mixin of class

JavaScript's classes only support single inheritance: that is, there can be only one parent class. So what should we do when we need to add more similar functionality to a class in development? At this point we can use mixin.

Polymorphism in JavaScript

There are three characteristics of object-oriented: encapsulation, inheritance and polymorphism.

We have analyzed the first two in detail, so let's talk about the polymorphism of JavaScript. Is there any polymorphism in JavaScript?

Wikipedia's definition of polymorphism: polymorphism (English: polymorphism) refers to providing a unified interface for entities of different data types, or using a

A single symbol to represent multiple different types.

Very abstract, personal summary: different data types perform the same operation and show different behaviors, which is the embodiment of polymorphism.

So from the above definition, there must be polymorphism in JavaScript.

/ / Polymorphism: when performing the same operation on different data types, if the behavior (shape) is different, it is the embodiment of polymorphism.

Function calcArea (foo) {

Console.log (foo.getArea ())

}

Var obj1 = {

Name: "why"

GetArea: function () {

Return 1000

}

}

Class Person {

GetArea () {

Return 100

}

}

Var p = new Person ()

CalcArea (obj1)

CalcArea (p)

/ / it is also the embodiment of polymorphism

Function sum (m, n) {

Return m + n

}

Sum (20,30)

Sum ("abc", "cba")

/ / traditional object-oriented polymorphism has three prerequisites:

/ / 1 > must have inheritance (is the premise of polymorphism)

/ / 2 > must be overridden (subclass overrides the method of the parent class)

/ / 3 > there must be a parent class reference to a subclass object

/ / Shape shape

Class Shape {

GetArea () {}

}

Class Rectangle extends Shape {

GetArea () {

Return 100

}

}

Class Circle extends Shape {

GetArea () {

Return 200

}

}

Var r = new Rectangle ()

Var c = new Circle ()

/ / Polymorphism: when performing the same operation on different data types, if the behavior (shape) is different, it is the embodiment of polymorphism.

Function calcArea (shape: Shape) {

Console.log (shape.getArea ())

}

CalcArea (r)

CalcArea (c)

Export {}

At this point, I believe you have a deeper understanding of "how to use the class class in ES6". 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.