Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "whether the class of es6 is a function or not". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Es6 class is a function. In es6, class (class) is introduced as a template for objects, and the class can be defined by the class keyword, and the syntax is "class class name {.}; the essence of class is function (function), which is a syntax sugar, and its underlying layer is created through the" constructor ".

The operating environment of this tutorial: windows7 system, ECMAScript version 6, Dell G3 computer.

Es6 class is a function.

In ES6, class (class) is introduced as a template for objects, and classes can be defined through the class keyword.

The essence of class is function.

It can be seen as a syntax sugar, and its underlying layer is created through constructors, making the object prototype written more clearly and more like the syntax of object-oriented programming.

Function Person (name, age) {this.name = name; this.age = age;} Person.prototype.sayName = function () {return this.name;} const xiaoming = new Person ('Xiaoming', 18); console.log (xiaoming)

The above code is implemented in ES6's class, which looks like this

Class Person {constructor (name, age) {this.name = name; this.age = age;} sayName () {return this.name;}} const xiaoming = new Person ('Xiaoming', 18) console.log (xiaoming); / / {name: 'Xiaoming', age: 18} console.log ((typeof Person)); / / functionconsole.log (Person = = Person.prototype.constructor); / / true

The constructor method, which is the constructor, and the this keyword represents the instance object. The data type of the class is the function, and the class itself points to the constructor.

When defining a class, there is no need to add function in front of it, and there is no need for comma separation between methods, which will cause an error.

All methods of the class are defined on the prototype property of the class.

Class A {constructor () {} toString () {} toValue () {}} / / equivalent to function A () {/ / constructor}; A.prototype.toString = function () {}; A.prototype.toValue = function () {}

To call a method on an instance of a class is to call a method on the prototype.

Let a = new A (); a.constructor = = A.prototype.constructor / / true

An instance of the class

The properties of an instance are defined on the prototype (that is, on the class) unless they are explicitly defined on itself (that is, on the this object).

Note:

1. There is no variable promotion in class.

New A (); / / ReferenceErrorclass A {}

Because ES6 does not promote the declaration of the class to the head of the code. The reason for this provision is related to inheritance, and it is necessary to ensure that the subclass is defined after the parent class.

{let A = class {}; class B extends A {}}

The above code will not report an error, because when B inherits A, An is already defined. However, if there is a class promotion, the above code will report an error, because class will be promoted to the code header, and the let command will not be promoted, so when B inherits A, Foo has not been defined.

2. If the method pointing to the class of this contains this, it points to the instance of the class by default. However, great care must be taken, and once this method is used alone, an error is likely to be reported.

Inherit

Class can inherit through the extends keyword

Class Animal {} class Cat extends Animal {}

A Cat class is defined in the above code, which inherits all the properties and methods in the Animal class through the extends keyword. But since no code is deployed, the two classes are exactly the same, which is tantamount to copying an Animal class. Next, let's add code inside Cat.

Class Cat extends Animal {constructor (name, age, color) {/ / call parent's constructor (name, age) super (name, age); this.color = color;} toString () {return this.color +'+ super.toString (); / / call parent's toString ()}}

The super keyword appears in both the constructor method and the toString method, where it represents the constructor of the parent class and is used to create the this object of the parent class.

The subclass must call the super method in the constructor method, otherwise the new instance will report an error. This is because the this object of the subclass must first be molded through the constructor of the parent class to get the same instance properties and methods as the parent class, and then process it, plus the subclass's own instance properties and methods. If you do not call the super method, the subclass will not get the this object.

Class Animal {/ *... * /} class Cat extends Animal {constructor () {}} let cp = new Cat (); / / ReferenceError

Cat inherits the parent class Animal, but its constructor does not call the super method, causing the new instance to report an error.

If the subclass does not have a constructor method defined, this method is added by default, as shown in the following code. That is, any subclass has a constructor method, whether explicitly defined or not.

Class Cat extends Animal {} / / is equivalent to class Cat extends Animal {constructor (... args) {super (.. ARGs);}}

Another thing to note is that the constructor of es5 can access this before calling the parent constructor, but the constructor of es6 cannot access this until the parent constructor (that is, super) is called.

Class A {constructor (x, y) {this.x = x; this.y = y;}} class B extends A {constructor (x, y, name) {this.name = name; / / ReferenceError super (x, y); this.name = name; / / correct}}

In the above code, the constructor method of the subclass uses the this keyword before calling super, resulting in an error, and it is correct to put it after the super method.

The static methods of the parent class are also inherited by the child class.

Class A {static hello () {console.log ('hello world');}} class B extends A {} B.hello () / / hello world "whether the class of es6 is a function" ends here. Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.