Une compréhension simple des classes en es6 (avec des exemples)

Cet article vous apporte une compréhension simple des cours en es6 (avec des exemples). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

cours de classe

Concepts de base, enregistrés pour que vous puissiez approfondir votre compréhension plus tard

Comprendre ce qu'est un cours

Qu'est-ce que la classe ? Autant en écrire un et jeter un œil au prototype de

class Demo {
    constructor() {
        this.a = 1;
        this.b = this.f;
    }
    f() {
        return this;
    }
}
Demo.prototype; //{
                //  constructor: class Demo
                //  f: ƒ f()           
                //  __proto__: Object }

Demo. Vous pouvez voir que ces trois attributs ne sont pas traversables et qu'il existe une chaîne de prototypes __proto__ de plus par rapport à la classe Demo. Jetons un coup d'œil à une nouvelle Démo

let o = new Demo();
console.log(Object.getPrototypeOf(o));  //{
                                        //  constructor: class Demo
                                        //  f: ƒ f()           
                                        //  __proto__: Object }

En fait, la classe Demo est équivalente au prototype de l'instance Demo

Le constructeur de la classe

Dans mon avis

    constructor() {
        this.a = 1;
        this.b = this.f;
    }

Cette partie est équivalente au rôle du constructeur dans es5 Dans le nouveau processus, on lui attribue une valeur et celle-ci est renvoyée pour devenir un objet instance
Vous renvoyez donc un objet dans le constructeur et il n'est pas égal à null, alors l'objet instance est la valeur de retour, qui a le même effet que le constructeur es5

Méthode en classe

    f() {
        return this;
    }

Cette méthode appartient finalement à la chaîne de prototypes de l'objet instanceNon disponible Méthode Traversal , elle peut donc également être utilisée par les objets instances

Nouveau point de connaissance

La méthode statique de classe

signifie que la méthode ne sera pas héritée par l'instance, mais directement appelée via une classe

class Demo {
    constructor() {
        this.a = this;
        this.b = this.f;
    }
    static g() {
        return this;
    }
    static f() {
        return this;
    }
}
let o = new Demo(); 
//console.log(o.b());    //not a function
//console.log(o.g());     //not a function
Demo.g() === Demo;        //true

ceci dans la méthode statique pointe vers la classe elle-même, tandis que this.a = this pointe vers l'objet d'instance lui-même

Les méthodes statiques peuvent être héritées par les sous-classes

class Foo {
  static classMethod() {
    return 'hello';
  }
}

class Bar extends Foo {
}

Bar.classMethod() // 'hello'

Les méthodes statiques peuvent être appelées à partir du super objet

class Foo {
  static classMethod() {
    return 'hello';
  }
}

class Bar extends Foo {
  static classMethod() {
    return super.classMethod() + ', too';
  }
}

Bar.classMethod() // "hello, too"

La classe n'a que des méthodes statiques à l'intérieur , pas d'attributs statiques

Exécution immédiate des expressions de classe

var o =  new class {
    constructor(n) {
        this.a = n;
        this.b = this.f;
    }
    g() {
        return n;
    }
    f() {
        return this;
    }

}(1)

o.a;             // 1

Il n'y a pas de promotion de variable dans la déclaration de classe

l'attribut new.target

renvoie un objet après new. Par exemple, le constructeur f dans es5 ne renvoie pas undefined via un nouvel appel, mais renvoie le constructeur via un nouvel appel Self

function f() {
    return new.target;
}
console.log((new f()) === f);       //true

et dans la classe class, renvoie la classe elle-même. C'est la même chose que dans la méthode statique ; new renverra quelle classe

class Shape {
  constructor() {
    if (new.target === Shape) {
      throw new Error('本类不能实例化');
    }
  }
}

class Rectangle extends Shape {
  constructor(length, width) {
    super();
    // ...
  }
}

var x = new Shape();  // 报错
var y = new Rectangle(3, 4);  // 正确

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!