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.
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 :
Fonctionnalités orientées objet :
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.
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 类名{// "类名"是一个用户标识符 通常建议首字母大写
属性;
函数;
}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.
函数名([参数]){
函数体语句
}变量名 = 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());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 :
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 : 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 :
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);// undefinedDé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);// undefineddans 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);// undefinedLa 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!
![Le cours front-end qui vous comprend le mieux : HTML5/CSS3/ES6/NPM/Vue/...[Original]](https://img.php.cn/upload/course/000/000/068/632ae26b9b376240.png)
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
