Detailed explanation of super keyword in ES6 Class
I have collected and organized the super keyword in ES6 Class. This article will be shared with everyone. It is very good and has reference value. Friends who need it can refer to it. I hope it can help everyone.
The following are just personal study notes:
The super keyword can be used as either a function or an object. In both cases, its usage is completely different.
1. Use it as a function
class A {} class B extends A { constructor() { super(); //ES6 要求,子类的构造函数必须执行一次super函数。 } }
Note that although super represents the constructor of parent class A, the returned It is an instance of subclass B, that is, this inside super refers to B, so super() is equivalent to A.prototype.constructor.call(this) here.
class A { constructor() { console.log(new.target.name); //new.target指向当前正在执行的函数 } } class B extends A { constructor() { super(); } } new A() // A new B() // B
You can see that when super() is executed, it points to the constructor of subclass B, not the constructor of parent class A. In other words, this inside super() points to B.
2. Use it as an object
In ordinary methods, it points to the prototype object of the parent class; in static methods, it points to the parent class.
class A { c() { return 2; } } class B extends A { constructor() { super(); console.log(super.c()); // 2 } } let b = new B();
In the above code, super.c() in subclass B uses super as an object. At this time, super points to A.prototype in the ordinary method, so super.c() is equivalent to A.prototype.c().
When calling the method of the parent class through super, super will bind this of the subclass.
class A { constructor() { this.x = 1; } s() { console.log(this.x); } } class B extends A { constructor() { super(); this.x = 2; } m() { super.s(); } } let b = new B(); b.m() // 2
In the above code, although super.s() calls A.prototype.s(), A.prototype.s() will bind the subclass B's this causes the output to be 2, not 1. In other words, what is actually executed is super.s.call(this).
Since this is bound to the subclass, if a property is assigned a value through super, then super is this, and the assigned property will become the property of the subclass instance.
class A { constructor() { this.x = 1; } } class B extends A { constructor() { super(); this.x = 2; super.x = 3; console.log(super.x); // undefined console.log(this.x); // 3 } } let b = new B();
In the above code, super.x is assigned a value of 3, which is equivalent to assigning a value of 3 to this.x. When reading super.x, A.prototype.x is read, so undefined is returned.
Note that when using super, you must explicitly specify whether to use it as a function or an object, otherwise an error will be reported.
class A {} class B extends A { constructor() { super(); console.log(super); // 报错 } }
In the above code, the super in console.log(super) cannot be seen whether it is used as a function or as an object, so when the JavaScript engine parses the code An error will be reported. At this time, if the data type of super can be clearly stated, no error will be reported.
Finally, since objects always inherit other objects, you can use the super keyword in any object.
Related recommendations:
Detailed explanation of the super() function in python Usage and working principle
Super calling details in multiple inheritance
The above is the detailed content of Detailed explanation of super keyword in ES6 Class. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Concepts and instances of classes and methods Class (Class): used to describe a collection of objects with the same properties and methods. It defines the properties and methods common to every object in the collection. Objects are instances of classes. Method: Function defined in the class. Class construction method __init__(): The class has a special method (construction method) named init(), which is automatically called when the class is instantiated. Instance variables: In the declaration of a class, attributes are represented by variables. Such variables are called instance variables. An instance variable is a variable modified with self. Instantiation: Create an instance of a class, a specific object of the class. Inheritance: that is, a derived class (derivedclass) inherits the base class (baseclass)

jQuery is a classic JavaScript library that is widely used in web development. It simplifies operations such as handling events, manipulating DOM elements, and performing animations on web pages. When using jQuery, you often encounter situations where you need to replace the class name of an element. This article will introduce some practical methods and specific code examples. 1. Use the removeClass() and addClass() methods jQuery provides the removeClass() method for deletion

In-depth analysis of the role and usage of the static keyword in C language. In C language, static is a very important keyword, which can be used in the definition of functions, variables and data types. Using the static keyword can change the link attributes, scope and life cycle of the object. Let’s analyze the role and usage of the static keyword in C language in detail. Static variables and functions: Variables defined using the static keyword inside a function are called static variables, which have a global life cycle

Class is a keyword in Python, used to define a class. The method of defining a class: add a space after class and then add the class name; class name rules: capitalize the first letter. If there are multiple words, use camel case naming, such as [class Dog()].

According to news from this site on January 6, Gigabyte’s RTX4080SUPER, RTX4070TiSUPER and RTX4070SUPER graphics cards have been exposed and are expected to be released at 0:00 on January 9th. As shown in the picture above, the logo of the Nvidia RTX40SUPER graphics card has changed. SUPER is all uppercase, while the RTX20 series has lowercase super. RTX20superlogo This site summarizes the revealed specifications and prices of the RTX40SUPER graphics card as follows: RTX4080SUPER is equipped with 10240CUDA core and 16GB23Gbps256bitGDDR6X video memory, priced at US$999 (currently about 7153 yuan) or US$1199 (currently about 7153 yuan)

When writing PHP code, using classes is a very common practice. By using classes, we can encapsulate related functions and data in a single unit, making the code clearer, easier to read, and easier to maintain. This article will introduce the usage of PHPClass in detail and provide specific code examples to help readers better understand how to apply classes to optimize code in actual projects. 1. Create and use classes In PHP, you can use the keyword class to define a class and define properties and methods in the class.

Vue error: Unable to use v-bind to bind class and style correctly, how to solve it? In Vue development, we often use the v-bind instruction to dynamically bind class and style, but sometimes we may encounter some problems, such as being unable to correctly use v-bind to bind class and style. In this article, I will explain the cause of this problem and provide you with a solution. First, let’s understand the v-bind directive. v-bind is used to bind V

How jquery determines whether an element has a class: 1. Determine whether an element has a certain class through the "hasClass('classname')" method; 2. Determine whether an element has a certain class through the "is('.classname')" method.
