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.
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:
Object-oriented features:
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.
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 类名{// "类名"是一个用户标识符 通常建议首字母大写
属性;
函数;
}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.
函数名([参数]){
函数体语句
}变量名 = 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());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 父类名{
函数体语句;
};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 constructorsuper([参数])
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: members accessed through class name or constructor
Instance members: through Instance objectThe accessed members are called instance members
Difference: 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);// undefinedstatic 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);// undefinedClasses 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);// undefinedjavascript 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!
![The front-end course that understands you best: HTML5/CSS3/ES6/NPM/Vue/...[Original]](https://img.php.cn/upload/course/000/000/068/632ae26b9b376240.png)
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
