Résumer et organiser les points de connaissance de la classe en ES6

Cet article vous apporte des connaissances pertinentes sur javascript Il présente principalement des questions liées à la classe. ES6 introduit le concept de classe qui peut être défini via le mot-clé class, qui nous correspond davantage. langages orientés objet que nous comprenons habituellement. J'espère que cela sera utile à tout le monde.

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

Introduction à la classe

Le JS traditionnel n'a que le concept d'objets, pas de classes, car JS est un langage orienté objet basé sur sur les prototypes. La caractéristique des objets prototypes est de partager toutes les propriétés avec les nouveaux objets.

ES6 introduit le concept de classe. Les classes peuvent être définies via le mot-clé class. Il s'agit d'un langage orienté objet qui correspond davantage à ce que nous comprenons habituellement.

class Person{   //定义一个名为Person的类
    // 构造函数，用来接受参数
    constructor(x,y){
        this.x = x;    //this代表的是实例对象
        this.y = y;
    }
    todoSome(){  //这是个类的方法，不需要加function，有多个方法也不用逗号隔开
        alert(this.x + "的年龄是" +this.y+"岁");
    }
}
export default  Person;

Méthodes statiques et propriétés statiques

Les méthodes statiques et les propriétés statiques sont des propriétés et des méthodes qui utilisent le mot-clé statique

Méthodes statiques

static classMethod(){
		console.log('123456')
	}

• Les méthodes statiques ne seront pas héritées par les sous-classes, et les sous-classes ne peuvent pas Ceci en appelant la méthode statique
• pointe vers la classe, pas vers l'instance de la classe. Par conséquent, les méthodes statiques ne peuvent être appelées que via des noms de classe, pas via des instances. Les propriétés statiques ne peuvent pas être héritées par les sous-classes, et les sous-classes ne peuvent pas être appelées. appelé via Appelé par le nom de la classe, il ne peut pas être appelé par l'instance de la classe
l'héritage de classe extends

la classe peut être héritée en utilisant le mot-clé extends Héritage ES6, super() doit être utilisé dans le constructeur de la sous-classe . Parce que l'héritage ES6 y ajoute d'abord les attributs et les méthodes de l'objet d'instance de classe parent, puis appelle le constructeur de la sous-classe pour le modifier. Si la sous-classe ne définit pas de méthode constructeur, super() l'ajoutera par défaut. la sous-classe héritera des méthodes et des attributs de la classe parent, mais les méthodes et attributs statiques doivent être appelés via le nom de classe de la sous-classe

let p = new Point();
p.classMethod();  // 报错

la fonction de valeur de la classe getter et la fonction de stockage setter
• getter et setter sont les attributs donnés à la classe Utilisé pour lire et transmettre des valeurs.
• Le getter de la fonction de valeur et le setter de la fonction de stockage peuvent personnaliser l'affectation et le comportement de la valeur. Lorsqu'une propriété n'a qu'un getter et aucun setter, la propriété est une propriété en lecture seule et ne peut pas se voir attribuer de valeur, ni être initialisée. pour la première fois.

Si la variable est définie comme privée (définie en dehors des accolades de la classe), vous ne pouvez utiliser que des getters sans setters.

static prop = 1 ;  // 静态属性

• Comment utiliser :

• import classtest from "./classtest";  //先引入父类
  class Man extends classtest{
      constructor(x,y){   //构造函数尽量与父类参数保持一致
          super();   //利用super()关键字，这个必须放在子类构造函数中的第一位置
          this.x = x;
          this.y = y;
      }
  }
  export default  Man;

Remarques :
• 1. Lors de la définition d'une méthode dans une classe, vous ne pouvez pas ajouter le mot-clé function à la méthode, car le constructeur en JS est défini avec une fonction, et les deux sont séparé.
• 2. Ne séparez pas toutes les méthodes par des virgules, sinon une erreur sera signalée.

【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!