Hat Javascript keine Klassen?

Vor der ECMAScript6-Spezifikation hatte JavaScript kein Klassenkonzept und erlaubte nur die Simulation von Klassen durch Konstruktoren und die Vererbung durch Prototypen. Nach ECMAScript 6 können Sie das Schlüsselwort class zum Definieren einer Klasse verwenden. Die Schreibmethode zum Definieren einer Klasse mit dem Schlüsselwort class ist klarer und ähnelt eher einer objektorientierten Syntax.

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

JavaScript ist eine objektbasierte, aber nicht vollständig objektorientierte Programmiersprache. Im objektorientierten JS-Programmiermodell gibt es zwei Kernkonzepte: Objekte und Klassen. Vor der ECMAScript6-Spezifikation hatte JavaScript kein Klassenkonzept und erlaubte nur die Simulation von Klassen durch Konstruktoren und die Vererbung durch Prototypen.

In ES6 wird das Schlüsselwort class zum Definieren von Klassen hinzugefügt. Die Schreibmethode zur Verwendung des Schlüsselworts class zum Definieren von Klassen ist klarer und ähnelt eher einer objektorientierten Syntax. Aber es kann als syntaktischer Zucker betrachtet werden, da es auch das Konzept von Konstruktor und Prototyp ist.

1 Klassendeklaration

Es gibt zwei Möglichkeiten, eine Klasse, Klassendeklaration und Klassenausdruck zu definieren:

// 类声明
class Student {}
// 类表达式
const Student = class {}

2 Warum heißt es syntaktischer Zucker? Da eine Klasse eigentlich eine Funktion ist, liegt der Unterschied darin Konstruktor Es handelt sich um einen Funktionsbereich, und eine Klasse ist ein Bereich auf Blockebene. Die Methoden in der Klasse sind alle im Prototyp der Klasse definiert. Daher heißt es am Anfang des Artikels, dass es sich immer noch um das Konzept von Konstruktor und Prototyp handelt:

class Student {
	take() {}
}
const a = new Student()
console.log(typeof Student)	// function
console.log(a.take === Student.prototype.take) // true

// 同等于
function Student() {}
Student.prototype.take = function() {}
const a = new Student()
console.log(typeof Student)	// function
console.log(a.take === Student.prototype.take) // true

3 Attribute und Methoden, die in einer Klasse enthalten sind

Klassen können Konstruktormethoden, Instanzmethoden, Getter, Setter und statische Klassenmethoden

enthalten, diese sind jedoch nicht erforderlich. Leere Klassendefinitionen sind weiterhin gültig.

class Student {
	// 实例属性 也可以放在这
	// b = 1
	// 静态属性
	static a = 1
	// 构造函数
	constructor() {
		// 实例属性 - 也可以放在类的最顶层
		this.b = 1
	}
	// 获取函数
	get myName() {}
	// 设置函数
	set myName() {}
	// 静态方法 不会被实例继承
	static show() {}
	// 方法
	take() {}
	// 私有方法
	_take() {}
}

3.1 Klassenkonstruktor

Das Konstruktorschlüsselwort einer Klasse ist Konstruktor, was dem Prototyp.constructor im Prototyp entspricht. Wenn keine Konstruktorfunktion geschrieben wird, gibt es standardmäßig eine leere Konstruktorfunktion.

class A {
	constructor() {
		this.name = '小明'
	}
}
const b = new A()
b.constructor === A.prototype.constructor // true

Wenn eine Instanz mit dem neuen Operator erstellt wird, wird der Konstruktor-Konstruktor aufgerufen.

3.2 Klassenmethoden

class Student {
	// 方法
	take() {}
}

3.3 Statische Klassenmethoden

sind die gleichen wie Klassenmethoden, außer dass das Schlüsselwort static am Anfang hinzugefügt wird. Statische Methoden werden nicht von Instanzen vererbt.

Statische Methoden von übergeordneten Klassen können von Unterklassen geerbt werden.

class A {
	// 静态方法
	static show() {
		console.log('hi')
	}
}
class B extends A {}
const c = new A()
c.show() // c.show is not a function
B.show() // hi

3.4 Private Methode der Klasse

Diese Methode wird in es6 nicht bereitgestellt, wird aber normalerweise durch Hinzufügen eines Unterstrichs vor der Methode dargestellt.

class A {
	// 私有方法
	_show() {
    	console.log('hi')
  	}
}

3.5 Wertfunktion (Getter) und Speicherfunktion (Setter)

In der Klasse können Sie die Speicher- und Wertfunktionen für ein bestimmtes Attribut festlegen und dessen Speicherverhalten abfangen .

class A {
  constructor () {
    this.name = '小米'
  }
  get name () {
    return 'get'
  }
  set name (val) {
    console.log('set' + val)
  }
}
const b = new A()
b.name // get
b.name = 123 // set123

4 Vererbung der Klasse

4.1 Vererbung durch Extends

Vererbung der Klasse durch Extens-Schlüsselwort.

class A {
	// 静态方法
	static show() {
    console.log('hi')
  }
}
class B extends A {}

4.2 Super-Methode

Beachten Sie, dass die Unterklasse standardmäßig über einen Konstruktor und eine Supermethode verfügt, wenn sie keinen Konstruktor schreibt. Wenn der Konstruktor jedoch explizit geschrieben wird, muss er sich in der Unterklasse Add befinden Nach dem Hinzufügen der Super-Methode wird der Konstruktor der übergeordneten Klasse aufgerufen und die Eigenschaften und Methoden der übergeordneten Klasse werden abgerufen. Wenn die Super-Methode nicht hinzugefügt wird, wird ein ReferenceError gemeldet.

class A {
  constructor () {
    this.name = '小米'
  }
	show() {
    console.log('hi')
  }
}
class B extends A {
  constructor () {
  	super() // 如果不写super，则会报ReferenceError错误
  }
}
const c = new B()

Sie können auch Parameter in der Super-Methode übergeben

class A {
  constructor (name) {
    this.name = name
  }
	show() {
    console.log('hi')
  }
}
class B extends A {
  constructor () {
    super('小红')
  }
}
const c = new B()
c.name // 小红

5 Andere

5.1 Dies in der Methode zeigt auf

Wenn es dies in der Methode der Klasse gibt, dann zeigt es auf die Instanz der Klasse. Wenn Sie es jedoch alleine verwenden, wird ein Fehler gemeldet.

class A {
  constructor () {
    this.name = '小米'
  }
  show () {
    console.log(this.name)
  }
}
const b = new A()
b.show() // 小米
const { show } = b // Cannot read property 'name' of undefined

Es ​​gibt zwei Lösungen:

1. Object.getPrototypeOf-Funktion.

class A {
  constructor () {
    this.name = '小米'
    this.show = this.show.bind(this)
  }
  show () {
    console.log(this.name)
  }
}

【Empfohlenes Lernen:

Javascript-Tutorial für Fortgeschrittene

】

Das obige ist der detaillierte Inhalt vonHat Javascript keine Klassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!