What are static members of a class in es6

In es6, properties and methods called directly by a class are called static members. If you add the static keyword to a variable or function in a class, it is a static member; static members will not be instantiated as elements of new objects. The difference between static members and instance members: 1. Instance members belong to specific objects, while static members are shared by all objects; 2. Static members are accessed through class names or constructors, and instance members are accessed through instantiated objects.

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

Object-oriented

The main idea of ​​object-oriented is to decompose the problem that needs to be solved into objects. Creating objects is not to implement a step. , but to describe the behavior of each object in solving problems. The core of object-oriented is object.

Object-oriented advantages:

• Deeper modularity and strong encapsulation
• Easier to implement complex business logic
• Easier to maintain, reuse, and expand

Object-oriented features:

• Encapsulation: Objects are attributes and Combination of behaviors
• Polymorphism: The same message will have different effects when received by different objects
• Inheritance: Subclasses can inherit the information of the parent class

ES6 Object-oriented Grammar

ES6: ES is the abbreviation of ECMAScript, which is the syntax specification of JavaScript. ES6 expands on ES5 and adds object-oriented programming related technologies and the concept of classes.

Classes and Objects

Class: A collection with the same properties and behavior is called a class (a class is an abstraction of an object), in a class Most data can only be processed using the methods of this class.
Object: It is an instance of a class (it is the concretization of the class)

class keyword: used to define the class

class 类名{// "类名"是一个用户标识符 通常建议首字母大写
           属性;
           函数;
}

Constructor

Use constructor() in ES6 to define a constructor. Its function is to initialize the properties (member variables) of the object. The constructor is not necessary. If the user does not define a constructor, The system will generate a default, no-argument constructor.

Ordinary member functions

函数名([参数]){
     函数体语句
}

变量名 = function([参数]){
      函数体语句
}

            class Person{
                constructor(name,age,sex){// 构造函数 初始化对象的成员
                    this.name = name;// this指向构造函数新创建的对象
                    this.age = age;
                    this.sex = sex;
                }
                    tt = function(){ //普通的成员函数
	                    console.log(this.name);
	                    console.log(this.age);
	                    console.log(this.sex);
                	}	
            }
            var p = new Person('李相赫',25,'男')// p1是一个对象 通过调用构造函数对p1的三个属性进行了初始化
            p.fun();

        class Circle{// 定义类Circlie
            constructor(r){
                this.radius = r;
            };
            area(){ // 计算圆的面积
                var s = Math.PI*this.radius**2;
                return s;
            };
            // 计算圆的周长
            CircleLength = function(){
            return 2*Math.PI*this.radius;
            };
        };
        var c1 = new Circle(5);
        console.log('半径为5的圆的面积='+c1.area());
        console.log('半径为5的圆的周长='+c1.Circle_length());

The results are as follows:

##

		// 用类实现简单的四则运算
        class Number{// 定义类Number
            constructor(n1,n2){
                this.n1=n1;
                this.n2=n2;
            };
            add(){
                var sum = this.n1+this.n2;
                return sum;
            };
            sub(){
                var sum1 = this.n1-this.n2;
                return sum1;
            };
            mut(){
                var sum2 = this.n1*this.n2;
                return sum2;
            };
            p(){
                if(this.n2!=0){
                    var sum3 = this.n1/this.n2;
                    return sum3;
                }
            }
        }
        var p1 = new Number(12,21);
        console.log(p1.add());
        console.log(p1.sub());
        console.log(p1.mut());
        console.log(p1.p());

In ES6 Inheritance of classes

In JavaScript, inheritance is used to express

the relationship between two classes. Subclasses can inherit some attributes and methods of the parent class. After inheritance, they can also You can add your own unique properties and methods.

Syntax:

class 子类名 extends 父类名{
       函数体语句;
};

Note about inheritance:

The parent class must have been defined
• The subclass is also known as Derived classes can inherit the properties and functions of the parent class
• The subclass cannot inherit the constructor of the parent class

super keyword

Subclasses cannot inherit the constructor of the parent class. If you want to call the constructor of the parent class, you can use the super keyword.

**Note: **If super is used in the constructor of a subclass to call the constructor of the parent class, the calling statement must be the first statement of the constructor of the subclass.

Call the parent Class constructor

super([参数])

Call ordinary member function

super.函数名([参数])

Method override

If the function defined in the subclass has the same name as the function in the parent class, The subclass function overrides the function in the parent class. You can call the ordinary member function of the parent class with the same name in the subclass to solve the problem.

        class Father{ //父类(基类或超类)
            constructor(type,color){
                this.type = type;
                this.color = color;
            }
            money(){
                console.log(100);
            }
            show(){
                console.log('类型：'+this.type);
                console.log('颜色：'+this.color);
            }
        }
        class Son extends Father{ //Son是子类(又称派生类)
            constructor(type,color,weight){
                super(type,color); //调用父类的构造函数 要放在首位
                this.weight = weight;
            };
            show(){
                super.show();// 调用父类的普通成员函数
                console.log('重量：'+this.weight);
            };
            other(){
                return '子类的其他方法';
            };
        };
        var s1 = new Son('iPhone 12','黑色','3000g');//s1为子类的实例
        s1.show();
        console.log(s1.other());

Static members and instance members

Static members: members accessed through class name or constructor

Instance members: through Instance objectThe accessed members are called instance members

Difference:

Instance members belong to specific objects, while static members are shared by all objects
• Static members are accessed through
• class name or constructor , instance members are accessed through instantiated objects

in ES5 Define static attributes in ES6

        function Student(name,age,sex){
            Student.school = '西安邮电大学';// school是静态成员
            this.name = name;
            this.age = age;
            this.sex = sex;// name age sex都是实例成员
            this.show = function(){
                console.log('姓名：'+this.name);
                console.log('年龄：'+this.age);
                console.log('性别：'+this.sex);
            };
        };
        var f = new Student('李相赫',23,'男');
        f.show();
        console.log(Student.school);// 西安邮电大学
        console.log(f.school);// undefined

Static property definition in ES7

Use the

static keyword when defining a class

Define static properties

        class Foo{
            constructor(){
                this.color = '红色';// color是实例成员
            }
        }
        Foo.prop = 45;// prop是静态成员
        var f1 = new Foo();
        console.log('静态属性：'+Foo.prop);// 45
        console.log(f1.prop);// undefined

Classes and constructors The difference

Member methods in a class are defined in the class. After using the class to create objects, the methods of these objects all reference the same method, which can save memory space.

        class Foo{
            static prop = 45; //prop是静态成员
            constructor(){
                this.color = '红色';
            }
        }
        var f2 = new Foo();
        console.log('静态属性：'+Foo.prop);// 45
        console.log(f2.prop);// undefined

【Related recommendations:

javascript video tutorial, web front-end

】

The above is the detailed content of What are static members of a class in es6. For more information, please follow other related articles on the PHP Chinese website!