Explication détaillée d'exemples d'objets Class pour démarrer avec ECMAScript6

Cet article présente principalement l'introduction détaillée d'ECMAScript6 - Class object L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil.

Un signe des langages orientés objet est qu'ils ont tous le concept de classes, à travers lequel un nombre illimité d'objets avec les mêmes propriétés et méthodes peuvent être créés.

Il n'y a pas de concept de classe dans ECMAScript5, donc ses objets sont différents de ceux des langages basés sur les classes.

La manière traditionnelle de générer des objets en Javascript consiste à utiliser des constructeurs.

function Person(name, age){
  this.name = name;
  this.age = age;
  this.sayHello = function(){
    return "Hello "+ this.name;
  }
}

var person = new Person("dahan",18);
person.sayHello();
//Hello dahan

Étant donné que la méthode ci-dessus est la même que la forme de déclaration des méthodes en Javascript, la distinction entre les objets et les méthodes n'est pas la même chose. Évidemment, il est facile de se tromper.

ES6 introduit le concept de Class (classe). Lorsque nous créons des objets via la syntaxe ES6, nous pouvons utiliser le mot-clé class pour définir des classes tout comme la syntaxe Java. Bien entendu, les fonctions de cette syntaxe peuvent également être réalisées via ES5. Cela rend simplement la définition des classes plus claire et plus facile à comprendre.

//类的定义
class Person {
  //ES6中新型构造器
  constructor(name) {
    this.name = name;
  }
  //实例方法
  sayName() {
    console.log("我的名字叫"+ this.name);
  }
}
//类的继承
class Programmer extends Person {
  constructor(name) {
    //直接调用父类构造器进行初始化
    super(name);
  }
  program() {
    cosnole.log("这是我的地盘");
  }
}
//运行测试
var person = new Person('lingxiao');
var coder = new Programmer('coder');

person.sayName();
//我的名字叫lingxiao
coder.sayName();
//我的名字叫coder
coder.program();
//这是我的地盘

Faisons maintenant attention à la syntaxe qui apparaît dans le code ci-dessus.

constructeur

constructor est la méthode par défaut d'une classe, tout comme la méthode principale en Java, chaque classe doit avoir une méthode constructor. Lorsque

instancie un objet via new, il appellera automatiquement la méthode constructor et la valeur renvoyée est la valeur renvoyée par constructor. constructorPar défaut, l'objet instance de la classe actuelle est renvoyé （this）, mais nous pouvons également spécifier un autre objet Bien sûr, cela fera que l'objet instancié ne sera pas une instance de la classe actuelle.

class Person {
  constructor(){
    var ob = new Object();
    return Ob;
  }
  sayHello(){
    return "Hello World"
  }
}
var person = new Person();
person.sayHello();
//Uncaught TypeError: person.sayHello is not a function

Quand on instancie un objet, ES6 stipule que j'utilise le mot-clé new S'il est appelé directement, il sera appelé en fonction.

class Person {
  constructor(name){
    this.name = name;
  }
};
var person = Person("dahan");
//Uncaught TypeError: Class constructor Person4 cannot be invoked without 'new'

this

Dans le premier code, on voit ceci, this dans la classe pointe vers l'instance elle-même, mais si nous This est utilisé dans la méthode . Lorsque cette méthode est appelée seule, une erreur se produit.

class Person{
  constructor(name){
    this.name = name;
  }
  sayHello() {
    return "Hello "+this.name
  }
}
var person = new Person("dahan");
var sayHello = person.sayHello;
sayHello();
//Uncaught TypeError: Cannot read property 'name' of undefined

Pour cela, nous pouvons simplement lier dans le constructeur this

class Person{
  constructor(name){
    this.name = name;
    this.sayHello = this.sayHello.call(this);
  }
  sayHello() {
    return "Hello "+this.name
  }
}

Hériter l'extension

Nous voulons Si vous le souhaitez étendre certains attributs sur une classe sans modifier la classe d'origine, vous utilisez l'héritage.

//类的继承
class Programmer extends Person {
  constructor(name,age) {
    this.age = age;//报错
    //直接调用父类构造器进行初始化
    super(name);
  }
  program() {
    cosnole.log("这是我的地盘");
  }
}

Lorsque vous utilisez l'héritage, vous devez utiliser le mot-clé super pour appeler la classe parent super(name) appelez simplement la méthode constructor de la classe parent.

De plus, lorsque nous utilisons l'héritage, le mot-clé super nous aide également à changer le pointeur de this, nous devons donc d'abord appeler la méthode super avant de pouvoir utiliser this. ES6 exige que le constructeur d'une sous-classe exécute la fonction super une fois, sinon une erreur sera signalée.

Enfin, l'émergence du mot-clé

class fait également ressembler Javascript davantage à un langage orienté objet. J'espère que Javascript deviendra meilleur et plus facile à utiliser. .

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!