Que sont les membres statiques d'une classe dans Es6

Dans es6, les propriétés et méthodes appelées directement par une classe sont appelées membres statiques. Si vous ajoutez le mot-clé static à une variable ou une fonction dans une classe, il s'agit d'un membre statique ; les membres statiques ne seront pas instanciés en tant qu'éléments de nouveaux objets. La différence entre les membres statiques et les membres d'instance : 1. Les membres d'instance appartiennent à des objets spécifiques, tandis que les membres statiques sont partagés par tous les objets. 2. Les membres statiques sont accessibles via des noms de classe ou des constructeurs, et les membres d'instance sont accessibles via des objets instanciés.

L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 6, ordinateur Dell G3.

Orienté objet

L'idée principale de l'orientation objet est de décomposer le problème qui doit être résolu en objets. L'établissement d'objets ne consiste pas à mettre en œuvre une étape, mais à décrire le comportement de. chaque objet dans la résolution du problème, le noyau de l'orientation objet est objet.

Avantages de l'orientation objet :

• Modularité plus profonde et encapsulation forte
• Plus facile à mettre en œuvre une logique métier complexe
• Plus facile à maintenir, réutiliser et développer

Fonctionnalités orientées objet :

• Encapsulation : les objets sont une combinaison d'attributs et de comportements
• Polymorphisme : le même message aura des effets différents lorsqu'il est reçu par différents objets
• Héritage : les sous-classes peuvent hériter des informations des classes parentes

Syntaxe orientée objet ES6

ES6 : ES est l'abréviation d'ECMAScript, qui est la spécification syntaxique de JavaScript. ES6 développe ES5 et ajoute des technologies liées à la programmation orientée objet et le concept de classes.

Classes et objets

Class : Une collection avec les mêmes attributs et comportements est appelée une classe (une classe est une abstraction d'un objet) La plupart des données d'une classe ne peuvent être traitées qu'en utilisant les méthodes de celle-ci). classe.
Object : C'est une instance d'une classe (c'est la concrétisation de la classe)

mot-cléclass : Utilisé pour définir le

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

constructeur de la classe

Utilisez constructor() dans ES6 pour définir le constructeur, Sa fonction est d'initialiser les propriétés (variables membres) de l'objet. Le constructeur n'est pas nécessaire. Si l'utilisateur ne définit pas de constructeur, le système générera un constructeur par défaut sans paramètre.

Fonctions membres ordinaires

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

变量名 = 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());

Les résultats sont les suivants :

		// 用类实现简单的四则运算
        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());

Héritage des classes dans ES6

En JavaScript, l'héritage est utilisé pour représenterla relation entre deux classes , sous-classes Vous peut hériter de certaines propriétés et méthodes de la classe parent, et vous pouvez également ajouter vos propres propriétés et méthodes uniques après l'héritage.

Grammaire :

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

Remarque sur l'héritage :

• La classe parent doit avoir été définie
• La sous-classe, également appelée classe dérivée, peut hériter des attributs et des fonctions de la classe parent
• La sous-classe ne peut pas hériter du constructeur de la classe parent

super mot-clé

Les sous-classes ne peuvent pas hériter du constructeur de la classe parent. Si vous souhaitez appeler le constructeur de la classe parent, vous pouvez utiliser le super mot-clé.

**Remarque :** Si super est utilisé dans le constructeur d'une sous-classe pour appeler le constructeur de la classe parent, l'instruction appelante doit être la première instruction du constructeur de la sous-classe

Appelez le constructeur de la classe parent

super([参数])

Appeler la fonction membre ordinaire

super.函数名([参数])

Remplacement de méthode

Si la fonction définie dans la sous-classe a le même nom que la fonction dans la classe parent, la fonction de la sous-classe remplace la fonction dans la classe parent et le membre ordinaire la fonction de la classe parent portant le même nom peut être appelée dans la sous-classe Pour résoudre

        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());

membres statiques et membres d'instance

membres statiques  : membres accessibles via nom de classe ou constructeur

instance membres  : les membres accessibles via objet d'instance sont appelés membres d'instance

Différence :

• Les membres d'instance appartiennent à des objets spécifiques, tandis que les membres statiques sont partagés par tous les objets
• Les membres statiques sont accessibles via nom de classe ou constructeur , les membres de l'instance sont des objets instanciés via Visitez

Définissez les propriétés statiques dans ES5

        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

Définissez les propriétés statiques dans ES6

1 Créez d'abord la classe

2. nom de la propriété

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

dans ES7 Définition d'attribut statique

Utilisez le mot-clé statique lors de la définition d'une classe pour définir des attributs statiques

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

La différence entre une classe et un constructeur

Les méthodes membres d'une classe sont définies dans le classe.Après avoir utilisé la classe pour créer un objet, ces méthodes de l'objet font toutes référence à la même méthode, ce qui peut économiser de l'espace mémoire.

	class Person {
		sing(){
			console.log('hello');
		}
	}
	var p1 = new Person();
	var p2 = new Person();
	console.log(p1.sing === p2.sing);	// 输出结果：true

【Recommandations associées : tutoriel vidéo javascript, front-end web】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!