Ist die Klasse class eine es6-Syntax?

class ist die ES6-Syntax und eine neue Funktion von ES6. In ES6 wurde das Schlüsselwort class eingeführt, um „Klassen“ schnell zu definieren. Das Wesentliche einer Klasse ist jedoch die Funktion. Sie kann als syntaktischer Zucker betrachtet werden, wodurch das Schreiben von Objektprototypen klarer wird und der Syntax der objektorientierten Programmierung ähnlicher wird . Verwenden Sie „class“, um die Klassenmethode „class Person{//class declaration}“ oder „const Person=class{//class expression}“ zu definieren.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.

class ist die ES6-Syntax und eine neue Funktion von ES6.

In ES6 wurde das Schlüsselwort class eingeführt, um „Klassen“ schnell zu definieren.

In JS ist die Essenz von „Klasse“ die Funktion, die als syntaktischer Zucker betrachtet werden kann, wodurch die Schreibmethode des Objektprototyps prägnanter und klarer wird und eher der Syntax der objektorientierten Programmierung ähnelt.

Klassendefinitionsklasse verstehen

Wir werden feststellen, dass das Erstellen einer Klasse gemäß der vorherigen Konstruktorform nicht nur dem Schreiben einer gewöhnlichen Funktion zu ähnlich ist, sondern auch, dass der Code nicht leicht zu verstehen ist.

Im neuen Standard von ES6 (ECMAScript2015) wird das Schlüsselwort class verwendet, um Klassen direkt zu definieren. Klassen sind jedoch im Wesentlichen immer noch Syntaxzucker für die oben genannten Konstruktoren und Prototypketten. Lernen Sie daher die vorherigen Konstruktoren gut kennen ist für unser Verständnis des Konzepts und der Vererbungsbeziehung von Klassen förderlicher.

Wie verwendet man also eine Klasse, um eine Klasse zu definieren? –

Sie können eine Klasse auf zwei Arten deklarieren: Klassendeklaration und Klassenausdruck;

class Person{
    //类声明
}

const Person=class{
    //类表达式
}

Ähnlichkeiten und Unterschiede zwischen Klassen und Konstruktoren

Lassen Sie uns einige Funktionen von Klassen untersuchen: Sie werden feststellen, dass sie unserem Konstruktor ähneln Die Eigenschaften sind eigentlich die gleichen;

console.log(Person.prototype)
console.log(Person.prototype.__proto__)//Object null 
console.log(Person.prototype.constructor)//Person
console.log(typeof Person) // function

var p = new Person()
console.log(p.__proto__ === Person.prototype) // true

Konstruktor der Klasse

Wenn wir beim Erstellen eines Objekts einige Parameter an die Klasse übergeben möchten, was sollten wir zu diesem Zeitpunkt tun?

Jede Klasse kann ihren eigenen Konstruktor (Methode) haben.
• Der Name dieser Methode ist fester Konstruktor.
Wenn wir eine Klasse über den neuen Operator bedienen, wird der Konstruktor dieser Klasse als Konstruktor bezeichnet Jede Klasse kann nur einen Konstruktor haben
• Wenn sie mehrere Konstruktoren enthält, wird eine Ausnahme ausgelöst;
• Wenn wir eine Klasse über das Schlüsselwort new bedienen, wird diese Konstruktorfunktion aufgerufen und führt die folgenden Operationen aus:

1. Erstellen Sie ein neues Objekt (leeres Objekt)

2. Dem Attribut [[prototype]] wird der Wert des Attributs „prototype“ der Klasse zugewiesen zum neu erstellten Objekt;

• 4. Führen Sie den internen Code des Konstruktors aus (Funktionskörpercode);
• 5. Wenn der Konstruktor kein Nicht-Null-Objekt zurückgibt, geben Sie das neu erstellte Objekt zurück Methode der Klasse
• Die Eigenschaften, die wir oben definiert haben, werden alle direkt darauf platziert, was bedeutet, dass sie in dem neu erstellten Objekt platziert werden:
• Wir haben das zuvor für Instanzen gesagt. Wir hoffen, die Methode auf den Prototyp zu setzen, damit sie funktioniert kann von mehreren Instanzen gemeinsam genutzt werden;
• Zu diesem Zeitpunkt können wir es direkt in der Klasse definieren;

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
    this._address = "广州市"
  }

  // 普通的实例方法
  // 创建出来的对象进行访问
  // var p = new Person()
  // p.eating()
  eating() {
    console.log(this.name + " eating~")
  }

  running() {
    console.log(this.name + " running~")
  }
}

Zugriffsmethode der Klasse

Wir haben zuvor über Objekte gesprochen. Im Eigenschaftsdeskriptor wurde erwähnt, dass Objekte Setter hinzufügen können und Getter-Funktionen, sodass Klassen dies auch tun können:

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
    this._address = "广州市"
  }

  // 类的访问器方法
  get address() {
    console.log("拦截访问操作")
    return this._address
  }

  set address(newAddress) {
    console.log("拦截设置操作")
    this._address = newAddress
  }
}

Statische Methoden von Klassen

Statische Methoden werden normalerweise verwendet, um Methoden zu definieren, die direkt mithilfe der Klasse ausgeführt werden. Es ist nicht erforderlich, Instanzen von Klassen zu definieren das statische Schlüsselwort:

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
    this._address = "广州市"
  }
  // 类的静态方法(类方法)
  // Person.createPerson()
  static randomPerson() {
    var nameIndex = Math.floor(Math.random() * names.length)
    var name = names[nameIndex]
    var age = Math.floor(Math.random() * 100)
    return new Person(name, age)
  }
}

Vererbung von ES6-Klassen – erweitert

Wir haben viel Zeit damit verbracht, die Implementierung der Vererbung in ES5 zu diskutieren, obwohl wir am Ende einen relativ zufriedenstellenden Vererbungsmechanismus erreicht haben, aber der Prozess ist immer noch sehr umständlich . Das Schlüsselwort „extens“ wurde in ES6 neu hinzugefügt, was uns bei der Implementierung der Vererbung leicht helfen kann:

class Person{
    
}

class Student extends Person{
    
}

Super-Schlüsselwort

Wir werden feststellen, dass ich im obigen Code ein Super-Schlüsselwort verwendet habe, in dem dieses Super-Schlüsselwort verwendet werden kann verschiedene Möglichkeiten:

Hinweis: Bevor Sie dies im Konstruktor einer untergeordneten (abgeleiteten) Klasse verwenden oder das Standardobjekt zurückgeben, müssen Sie zuerst den Konstruktor der übergeordneten Klasse über super aufrufen!

Super kann an drei Stellen verwendet werden: Konstruktoren, Instanzmethoden und statische Methoden von Unterklassen;

Erben integrierter Klassen

Wir können unsere Klassen auch von integrierten Klassen erben lassen , wie Array :

class HYArray extends Array {
  firstItem() {
    return this[0]
  }

  lastItem() {
    return this[this.length-1]
  }
}

var arr = new HYArray(1, 2, 3)
console.log(arr.firstItem())
console.log(arr.lastItem())

class mixin

JavaScript-Klassen unterstützen nur die Einzelvererbung: Das heißt, es kann nur eine übergeordnete Klasse geben. Wenn wir also während der Entwicklung einer Klasse weitere ähnliche Funktionen hinzufügen müssen, wie sollten wir das tun? Zu diesem Zeitpunkt können wir Mixin verwenden

JavaScript中的多态

面向对象的三大特性：封装、继承、多态。

前面两个我们都已经详细解析过了，接下来我们讨论一下JavaScript的多态。JavaScript有多态吗？

维基百科对多态的定义：多态（英语：polymorphism）指为不同数据类型的实体提供统一的接口，或使用一

个单一的符号来表示多个不同的类型。

非常的抽象，个人的总结：不同的数据类型进行同一个操作，表现出不同的行为，就是多态的体现。

那么从上面的定义来看，JavaScript是一定存在多态的。

// 多态: 当对不同的数据类型执行同一个操作时, 如果表现出来的行为(形态)不一样, 那么就是多态的体现.
function calcArea(foo) {
  console.log(foo.getArea())
}

var obj1 = {
  name: "why",
  getArea: function() {
    return 1000
  }
}

class Person {
  getArea() {
    return 100
  }
}

var p = new Person()

calcArea(obj1)
calcArea(p)

// 也是多态的体现
function sum(m, n) {
  return m + n
}

sum(20, 30)
sum("abc", "cba")

// 传统的面向对象多态是有三个前提:
// 1> 必须有继承(是多态的前提)
// 2> 必须有重写(子类重写父类的方法)
// 3> 必须有父类引用指向子类对象

// Shape形状
class Shape {
  getArea() {}
}

class Rectangle extends Shape {
  getArea() {
    return 100
  }
}

class Circle extends Shape {
  getArea() {
    return 200
  }
}

var r = new Rectangle()
var c = new Circle()

// 多态: 当对不同的数据类型执行同一个操作时, 如果表现出来的行为(形态)不一样, 那么就是多态的体现.
function calcArea(shape: Shape) {
  console.log(shape.getArea())
}

calcArea(r)
calcArea(c)

export {}

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

Das obige ist der detaillierte Inhalt vonIst die Klasse class eine es6-Syntax?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!