Heim >Web-Frontend >js-Tutorial >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. constructor
Standardmäß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!