Ausführliche Erläuterung von Beispielen für Klassenobjekte für den Einstieg in ECMAScript6

Dieser Artikel stellt hauptsächlich die detaillierte Einführung in ECMAScript6 vor – Klassenobjekt. Der Herausgeber findet es ziemlich gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz geben. Folgen wir dem Editor und werfen wir einen Blick darauf.

Ein Merkmal objektorientierter Sprachen ist, dass sie alle das Konzept von Klassen haben, durch die beliebig viele Objekte mit denselben Eigenschaften und Methoden erstellt werden können.

In ECMAScript5 gibt es kein Klassenkonzept, daher unterscheiden sich seine Objekte von denen in klassenbasierten Sprachen.

Die traditionelle Art, Objekte in Javascript zu generieren, erfolgt über Konstruktoren

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

Da die obige Methode mit der Form der Methodendeklaration in Javascript identisch ist, besteht keine Unterscheidung zwischen Objekten und Methoden das Gleiche. Offensichtlich ist es leicht, verwirrt zu werden.

ES6 führt das Konzept von Class (Klasse) ein. Wenn wir Objekte über die ES6-Syntax erstellen, können wir das Schlüsselwort class verwenden, um Klassen genau wie die Java-Syntax zu definieren. Natürlich können die Funktionen dieser Syntax auch über ES5 realisiert werden. Dadurch wird die Definition von Klassen lediglich klarer und verständlicher.

//类的定义
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();
//这是我的地盘

Lassen Sie uns nun auf die Syntax achten, die im obigen Code erscheint.

Konstruktor

constructor ist die Standardmethode der Klasse, genau wie die Hauptmethode in Java muss jede Klasse eine constructor-Methode haben. Wenn

ein Objekt über new instanziiert, ruft es automatisch die Methode constructor auf und der zurückgegebene Wert ist der von constructor zurückgegebene Wert. constructorStandardmäßig wird das Instanzobjekt der aktuellen Klasse zurückgegeben （this）, wir können aber auch ein anderes Objekt angeben. Dies führt natürlich dazu, dass das instanziierte Objekt keine Instanz der aktuellen Klasse ist.

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

Wenn wir ein Objekt instanziieren, schreibt ES6 vor, dass ich das neue Schlüsselwort verwende. Wenn es direkt aufgerufen wird, wird es als Funktion aufgerufen.

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

dies

Im ersten Code sehen wir dies, dies zeigt in der Klasse auf die Instanz selbst, aber wenn wir dies tun, wird dies in der Methode verwendet Wenn diese Methode alleine aufgerufen wird, tritt ein Fehler auf.

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

Dazu können wir einfach den Konstruktor einbinden this

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

Inherit extension

Wir wollen Wenn Sie wollen Wenn Sie einige Attribute einer Klasse erweitern, ohne die ursprüngliche Klasse zu ändern, verwenden Sie Vererbung.

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

Bei Verwendung der Vererbung müssen Sie das Schlüsselwort super verwenden, um die übergeordnete Klasse super(name) aufzurufen. Rufen Sie einfach die Methode constructor der übergeordneten Klasse auf.

Wenn wir Vererbung verwenden, hilft uns das Schlüsselwort super außerdem dabei, den Zeiger von this zu ändern. Daher müssen wir zuerst die Methode super aufrufen, bevor wir this verwenden können. ES6 erfordert, dass der Konstruktor einer Unterklasse die Funktion super einmal ausführen muss, andernfalls wird ein Fehler gemeldet.

Schließlich lässt das Aufkommen des Schlüsselworts

class Javascript auch mehr wie eine objektorientierte Sprache aussehen .

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Beispielen für Klassenobjekte für den Einstieg in ECMAScript6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!