A quoi sert la classe es6 ?

Le mot-clé class d'es6 est utilisé pour définir rapidement une « classe » ; l'essence de la classe est la fonction, qui peut être considérée comme un sucre syntaxique, rendant l'écriture de prototypes d'objets plus claire et plus proche de la syntaxe de la programmation orientée objet. . Il n'y a pas de promotion de variable lors de la promotion d'une classe. Toutes les méthodes d'une classe sont définies sur l'attribut prototype de la classe. Appeler une méthode sur une instance d'une classe revient en fait à appeler une méthode sur le prototype.

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

Basics

• es6 introduit le concept de classe, et le mot-clé class est utilisé pour définir rapidement une "classe". La nouvelle méthode d'écriture de classe rend l'écriture de prototypes d'objets plus claire, plus proche de la syntaxe de la programmation orientée objet et plus facile à comprendre.

• En fait, les notions de prototype et de constructeur sont toujours utilisées derrière.

• Mode strict Il n'est pas nécessaire d'utiliser use strict car tant que le code est écrit dans des classes et des modules, le mode strict ne peut être utilisé.

• Il n'y a pas de promotion de variable lors de l'amélioration d'une classe (en raison de l'héritage, vous devez vous assurer que la sous-classe est définie après la classe parent).

• Toutes les méthodes d'une classe sont définies sur l'attribut prototype de la classe. Appeler la méthode sur l'instance de la classe revient en fait à appeler la méthode sur le prototype. La méthode prototype peut être appelée via l'objet instance, mais ne peut pas. être appelé via le nom de la classe, et une erreur sera signalée

class est utilisée pour définir une classe pour es6

• En fait, la classe n'est qu'un sucre syntaxique et une autre façon d'écrire un constructeur

• (Le sucre syntaxique est une sorte de codage pour éviter les erreurs de codage et améliorer l'efficacité. La solution élégante au niveau grammatical est simplement une méthode d'écriture portable)

Regardez le code

class Person{
}
console.log(typeof Person)                               //funciton
console.log(Person.prototype.constructor === Person)     //true

Utilisation Regardez le code
L'utilisation équivaut à utiliser le constructeur. Utilisez new pour générer des instances d'objet

class person2 {
}
let json = new person2;

Propriétés et méthodes

Les propriétés et méthodes définies dans le constructeur sont des propriétés et des méthodes d'instance qui sont appelées dessus, sinon ce sont des propriétés et des méthodes de prototype.

class Person {
  constructor (name) {
    this.name = name            //constructor内定义的方法和属性是实例对象自己的，
  }
  say () {                      //而constructor外定义的方法和属性则是所有实例对象可以共享的 注意!
    console.log('hello')
  }
}
let jon = new Person()
jon.hasOwnPrototype('name')     //true
jon.hasOwnPrototype('say')      //false

Méthodes statiques

Méthodes qui peuvent être appelées directement via des classes sans avoir besoin d'objets d'instance

class Person {
  static doSay () {
    this.say()
  }
  static say () {
    console.log('hello')
  }
}
Person.doSay()              //hello
***********************************************************************************************
//静态方法可以被子类继承
class Sub extends Person { 
}
Sub.doSay() // hello

//静态方法可以通过类名调用，不能通过实例对象调用，否则会报错
class Person {
    static sum(a, b) {
        console.log(a + b)
    }
}
var p = new Person()
Person.sum(1, 2)  // 3
p.sum(1,2)        //  TypeError p.sum is not a function

attribut name

L'attribut name renvoie le nom de la classe, qui est le nom qui suit immédiatement le cours.

class Person {
}
Person.name // Person

cela pointe vers l'instance de la classe par défaut.

Si la méthode de la classe contient ceci à l'intérieur, elle est susceptible de signaler une erreur si vous utilisez cette méthode seule
Si cela pointe dans la mauvaise direction 1. Utilisez la fonction flèche 2. Liez ceci dans le constructeur

.

La fonction de valeur (getter) et la fonction de valeur stockée (setter)

class Person {
  get name () {
    return 'getter'
  }
  set name(val) {
    console.log('setter' + val)
  }
}

let jon = new Person()
jon.name = 'jon' // setter jon
jon.name         // getter

//La déclaration de classe ne peut pas être répétée

class Person {}
class Person {}
// TypeError L'identifiant 'Person' a déjà été déclaré

mot-clé constructeur

• méthode constructeur
• la méthode constructeur est la méthode par défaut de la classe Lorsqu'une instance d'objet est générée via la nouvelle commande, cette méthode est automatiquement appelée (l'objet d'instance par lequel elle est renvoyée. défaut).
• Une classe doit avoir une méthode constructeur. Si elle n'est pas explicitement définie, une méthode constructeur vide sera ajoutée par défaut.
• Une classe ne peut avoir qu'une seule méthode spéciale nommée "constructeur". Si la classe contient plusieurs méthodes de constructeur, une SyntaxError sera levée.

class Person {
   constructor(x, y) {
    this.x = x    //默认返回实例对象 this
    this.y = y
  }
  toString() {
    console.log(this.x + ', ' + this.y)
  }
}

Qu'est-ce qu'un constructeur ?

Chaque classe doit avoir un constructeur S'il n'y a pas de déclaration explicite, le moteur js ajoutera automatiquement un constructeur vide

class person3 {
}
//等于 
class person3 {
    constructor(){}
}

Remarque. Lors de la déclaration d'une méthode dans une classe, n'ajoutez pas le mot-clé function avant la méthode Ne séparez pas les méthodes par des virgules, sinon une erreur sera signalée Toutes les méthodes définies à l'intérieur de la classe ne sont pas énumérables

Notez que comme es5, les attributs de l'instance sont définis sur le prototype à moins qu'ils ne soient explicitement définis sur lui-même (c'est-à-dire cet objet)

class Point {
  constructor(x,y){
    this.x = x;
    this.y = y;
    
  }
  toString(){
    return `this.x + this.y`;
  }
}
var point = new Point();
point.toString()    //(2,3)
point.hasOwnProperty("x")        //true
point.hasOwnProperty("y")        //true   在这x&&y都是实例对象point自身的属性(因为定义在this变量上) // 所以返回true 
point.hasOwnProperty("toString") //false  toString是原型对象的属性 (因为定义在Point类上)             //所以返回false 
point._proto_.hasOwnProperty("toString") //true  

//加两个实例 
var p1 = new Point();
var p2 = new Point();
p1._proto_ === p2._proto_                //true    这个不建议使用 
//上面代码中 p1和p2 都是point的实例 他们的原型都是Point.prototype 所以 _proto_属性是相等的 
//即是说 可以通过实例的_proto_ 属性为 "类" 添加方法

super mot-clé

Le super le mot-clé est utilisé pour accéder et appeler des fonctions sur la classe parent. Vous pouvez appeler le constructeur de la classe parent ou les fonctions ordinaires de la classe parent

 class Father {
        constructor (surname){
            this.surname = surname
        }
        say(){
            console.log("你的名字" + this.surname)  //你的名字锤子
        }
    }
    //在这里 子继承父类
    class Son extends Father {
        constructor(surname,name){
            super(surname)
            this.name = name 
        }
        say(){
            super.say()
            console.log('调用普通' + this.name)    //调用普通铁的
        }
    }
    var son = new Son('锤子',"铁的")
    son.say()
    console.log(son)   //打印  {surname: "锤子", name: "铁的"
    //在子类的构造函数如果使用 super 调用父类的构造函数 必须写在 this之前  
    //还可以 调用父类的普通方法 
    //在es6中 类没变量提升 必须先定义 才能通过实例化对象类里面的 共有属性 和方法 通过this 调用
    //类 里面的this 代表什么
    //constructor 里面this指向实例对象  
    // 方法里面this 代表 方法的 调用者

étend l'héritage

L'héritage est un sous-héritage Parent Industry En réalité, les sous-classes des programmes peuvent hériter de certaines méthodes et attributs de la classe parent. L'héritage est une fonctionnalité orientée objet majeure qui peut réduire l'écriture de code et faciliter l'extraction de contenus publics.

 class Father {
        constructor (surname){
            this.surname = surname
        }
        say(){                                     //父级Father里面有一个方法 say()  
            console.log("你的名字" + this.surname)
        }
    }

    class Son extends Father {                     //在这里Son 继承了 Father父级里面的方法   关键字extends 
    }

    var son = new Son('锤子')                      //new 出来实例   
    son.say()                                      //打印  你的名字锤子

类的方法

class Person  {
         constructor(name, age) {    
    // 构造函数，接收一个name和age
             this.name = name
             this.age = age 
         }
         say(){
    // 一个方法  //注意类里面的方法不加function关键字  方法与方法之间不用,号隔开 
             console.log("你好",this.name)
         }
         // ....sayWhat(){} saySome(){}
    }
     var person  = new Person('老王',44)
    //调用方法
     person.say()  //老王
    //在类的实例上调用方法 其实就是调用 原型上的方法

类的表达式

与函数一样 calss 也可以使用表达式的形式定义 采用class表达式 可以写出立即执行的Class!!
注意与函数表达式类似 类表达式在他们被求值前也不能使用(即赋值变量 之前调用) 但 与函数定义不同 虽然函数声明可以提升 但类不能

类表达式（类定义）
类表达式可以是被命名的或匿名的

匿名类

let Person = class {
  constructor(x, y) {
    this.x = x
    this.y = y
  }
}

命名的类

let Person = class Person {
  constructor(x, y) {
    this.x = x
    this.y = y
  }
}
const Mycalss = class Me {
    getClassName(){
        return Me.name;
    }
};     //这里用 表达式(即赋值变量一个) 
       //注意! 这个类的名字是Mycalss而不是 Me Me只在Class的内部代码可用 指代当前类
let inst = new Mycalss();
inst.getClassName()   //Me   
Me.name               //报错  Me只在Class内部有定义

采用class表达式 可以写出立即执行的Class!!

let person = new class {
    constructor(name) {
       this.name = this.name; 
    }    
    sayname(){
        console.log(this.name);
    }
}("常东东")         //这段代码中class是立即执行的实例

补充案例

class Animal {                       //class定义了一个“类”
        constructor(){
            this.type = 'animal'     //有一个constructor方法，这就是构造方法   //this关键字则代表实例对象
        }                            //constructor内定义的方法和属性是实例对象自己的，而constructor外定义的方法和属性则是所有实例对象可以共享的 注意!
        says(say){
            console.log(this.type + ' says ' + say)
        }
    }
    let animal = new Animal()
    animal.says('hello')    //animal says hello

    class Cat extends Animal {       //通过extends关键字实现继承  //定义了一个Cat类，该类通过extends关键字，继承了Animal类的所有属性和方法。
        constructor(){
            super()                  //super关键字 它指代父类的实例（即父类的this对象）子类必须在constructor方法中调用super方法，否则新建实例时会报错。
            this.type = 'cat'        //这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。   
        }
    }
    let cat = new Cat()
    cat.says('hello')       //cat says hello

【相关推荐：javascript视频教程、编程视频】

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!