Table of contents
4. The difference between ES5 constructors and ES6 classes
3. The process of creating subclass objects
1. Introduction
Classes do not appear in our es5 study, so what are classes used for? What problems are they mainly used to solve? What are the methods and how to use them? In this article, I will introduce them to you in turn. After reading this article, I believe you will have a deeper understanding of classes.
Class, as the name suggests, refers to a type, meaning a class. In ES6, class (class) was introduced as an object module. We candefine classes through the class keyword, the essence of a class is function, and the essence is the constructor. It can be regarded as a syntactic sugar, making the writing method of object prototype clearer and more like the syntax of object-oriented programming.
2. Category
1. Class usage syntax
Named class:
class class name {
//Constructor function
constructor(){
}
//Functions at the same level as constructor----Prototype members
method(){
}
// Static members
stactic method(){
}
}
Anonymous class:
let Example = class {
//Constructor function
constructor(){
}
//Functions at the same level as constructor----Prototype members
method(){
}
// Static members
stactic method(){
}
}
Notice:
- The constructor is called automatically when creating an instance. A class must have a constructor constructor method (function: create attributes of the instance object). If not written, the system will add constructor(){} by default.
- After creating the instance object, the constructor will be automatically called. We do not need to call it. The implicit parameter this points to the newly created instance object. Finally, the reference value of the instance object is returned.
- All methods in a class are defined on the prototype of the class
- All methods called by instances of a class call methods on the prototype.
- Methods defined internally in a class are not enumerable
2.Method
(1) Constructor method
The constructor method is the default method of the class and is called when creating an object of the class. Also known as the constructor method (constructor, constructor) of a class. There is only one constructor in a class. The constructor method will be executed when new class()
class People {
constructor() {
console.log("我是构造方法，使用new创建对象时调用");
}
}
new People(); //将执行constructor方法(2)Prototype method
There is no need to use the function keyword, call it through "Object.Prototype method".
class People {
say(world) {
console.log(`say ${world}`);
}
add(a, b) {
console.log(a + b);
}
}
let p = new People();
p.say("hello"); //say hello
p.add(1, 2); //3(3)Static method
Use static to modify it. There is no need to create an object when calling, just pass " class name.static Method" call
class People {
static sum(a, b) {
console.log(a + b);
}
}
People.sum(1, 2);3.static
- static can only be accessed through classes. That is, static can only be called through the class itself, not through an instance of the class.
- Static methods call other static methods in the same class using the this keyword.
- In non-static methods, you cannot directly use the this keyword to access static methods. Instead, use the class name to call; or use the constructor's attributes to call the method.
4. The difference between ES5 constructors and ES6 classes
First we write a constructor: the code is as follows
<script>
//构造函数
function Person(name,age){
//实例成员name,age
this.name=name;
this.age=age;
}
//原型对象Person.prototype
//原型成员like
Person.prototype.like=function(){
console.log(this.name+"喜欢小狗狗");
}
//实例对象p
var p=new Person("小明",18);
//构造函数上的属性和方法(静态成员)----eat
Person.eat=function(){
console.log("重庆小面");
}
console.log(p);
p.like();//小明喜欢小狗狗
//静态成员只能给构造函数使用不能给实例使用
Person.eat();//重庆小面
p.eat();//报错
</script>
Let’s write another class, the code is as follows
<script src="">
//class类
class Person {
// 构造函数
constructor(name, age) {
this.name = name;
this.age = age
}
//原型成员 like constructor
like(){
console.log(this.name + "喜欢小狗狗")
}
//静态成员 eat
static eat(){
return "重庆小面"
}
}
var p=new Person("小明",18);
console.log(p);
</script>
Through observation, we found that the essence of a class is a constructor. The class is written using a function, which is a curly brace, to include instance members, constructors, prototype members, and static members. It can be regarded as a syntax sugar that allows objects to The writing method of prototype is clearer and more like the syntax of object-oriented programming.
3. Class inheritance
1. Class inheritance
(1) Grammar:
;
}
}
whereextands is similar to prototype chain inheritance,super is similar to constructor inheritance , the parameters inside are passed to the parent class
(2)Code analysis
<script>
class People {
//父类构造方法
constructor() {
this.a = 100; //父类中定义的变量
console.log("People constructor");
}
//原型方法
eat() {
console.log("eat...")
}
//静态方法
static play() {
console.log("play...")
}
}
class Student extends People {
//子类构造方法
constructor() {
super(); //调用父类构造器，必须存在，且位于子类构造器第一行的位置
this.b = 200; //子类定义的变量
console.log("Student constructor");
}
study() {
console.log("study...");
}
}
let stu = new Student();
console.log(stu.a,stu.b);//100,200
stu.eat();//eat...
stu.study();//study...
Student.play();//play...
</script>
Through the above code we find:
- The new object from new can call the prototype method of the subclass and the prototype method of the parent class
- The constructor method will execute the constructor method when new class()
- Subclasses can call static methods of parent classes
2. Notes on class inheritance
-
Solve code reuse
-
Useextendskeyword to implement inheritance
-
Subclasses can inherit all methods and properties from the parent class
-
A subclass can only inherit one parent class (Single inheritance), and a parent class can have multiple subclasses
-
The constructor of the subclass must havesuper() to specify the call to the constructor of the parent class, and it is located in the constructor of the subclass Thefirst line,
-
If the subclass has the same methods and attributes as the parent class, the subclass’s (override) will be used first.Emphasis!!!!
3. The process of creating subclass objects
- Create parent class object
- Add subclass object space
- The subclass construction method is executed automatically. Super(...) is used in the subclass construction method to call the parent class construction method. super(...) is located before this is used.
- Return the reference of the subclass object (If the parent class does not write a constructor, the subclass uses super(). The parent class's constructor method also uses super() without parameters. If the class constructor has parameters, then super(actual parameter...) )
4.Inner class
The inner class is a member of the outer class and must be accessed through "External class.Inner class"
// 外部类
class Outer {
constructor() {
console.log("outer");
}
}
// 内部类
Outer.Inner = class {
constructor() {
console.log("Inner");
}
}
new Outer.Inner();5.super summary
super can be used both as a function and as an object. In these two cases, its usage is completely different.
- Scenario 1: When super is used as a function, it represents the constructor of the parent class, and what is returned after the call is an instance of the subclass (this inside super points to the instance of the subclass)
- Note that it can only be called in the constructor of a subclass
Case 2: super is used as an object
- 1. In a normal method, super points to the prototype object of the parent class, and this in the method called by super points to the instance of the subclass.
- 2. In the static method, super points to the parent class, and this in the method called by super points to the subclass. If the constructor is defined in the subclass, it must first call super() before it can use this.
You can use super.parent class members in any method of a subclass to access overridden members in the parent class.