Javascript n’a-t-il pas de classes ?

Avant la spécification ECMAScript6, JavaScript n'avait pas le concept de classe. Il permettait uniquement de simuler des classes via des constructeurs et d'implémenter l'héritage via des prototypes. Après ECMAScript 6, vous pouvez utiliser le mot-clé class pour définir une classe. La méthode d'écriture consistant à utiliser le mot-clé class pour définir une classe est plus claire et ressemble davantage à une syntaxe orientée objet.

L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 6, ordinateur Dell G3.

JavaScript est un langage de programmation basé sur les objets, mais pas entièrement orienté objet. Dans le modèle de programmation orientée objet JS, il existe deux concepts fondamentaux : les objets et les classes. Avant la spécification ECMAScript6, JavaScript n'avait aucun concept de classes et permettait uniquement la simulation des classes via des constructeurs et l'héritage via des prototypes.

Le mot-clé class est ajouté dans ES6 pour définir des classes. L'utilisation du mot-clé class pour définir une classe est plus claire et ressemble davantage à une syntaxe orientée objet. Mais cela peut être considéré comme du sucre syntaxique, car c'est aussi la notion de constructeur et de prototype.

1 Déclaration de classe

Il existe 2 façons de définir une classe, une déclaration de classe et une expression de classe :

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

2 Pourquoi est-on appelé sucre syntaxique

Parce qu'une classe est en fait une fonction, la différence est la constructeur C'est une portée de fonction, et une classe est une portée au niveau du bloc. Les méthodes de la classe sont toutes définies sur le prototype de la classe, donc le début de l'article dit qu'il s'agit toujours du concept de constructeur et de prototype :

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 Attributs et méthodes contenus dans une classe

Les classes peuvent contenir des méthodes de constructeur, des méthodes d'instance, des getters, des setters et des méthodes de classe statique, mais celles-ci ne sont pas obligatoires. Les définitions de classe vides sont toujours valides.

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

3.1 Constructeur de classe

Le mot-clé constructeur d'une classe est constructor, ce qui équivaut à prototype.constructor dans le prototype.
Si aucune fonction constructeur n'est écrite, il y aura une fonction constructeur vide par défaut.

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

Lorsqu'une instance est créée à l'aide de l'opérateur new, le constructeur constructor est appelé.

3.2 Méthodes de classe

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

3.3 Les méthodes statiques de classe

sont les mêmes que les méthodes de classe, sauf que le mot-clé static est ajouté devant.
Les méthodes statiques ne sont pas héritées par les instances.
Les méthodes statiques des classes parents peuvent être héritées par les sous-classes.

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 Méthode privée de classe

Cette méthode n'est pas fournie dans es6, mais elle est généralement représentée en ajoutant un trait de soulignement devant la méthode.

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

3.5 Fonction de valeur (getter) et fonction de stockage (setter)

Il y a des mots-clés set et get dans la classe Vous pouvez définir les fonctions de stockage et de valeur pour un certain attribut et intercepter son comportement de stockage. .

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 Héritage de classe

4.1 Héritage via extends

Héritage de classe via le mot clé extends.

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

Super méthode 4.2

Notez que si la sous-classe n'écrit pas de constructeur, elle aura un constructeur et une super méthode par défaut, mais si le constructeur est explicitement écrit, il doit être dans la sous-classe Ajouter la super méthode au constructeur.Après l'avoir ajouté, le constructeur de la classe parent sera appelé et les propriétés et méthodes de la classe parent seront obtenues. Si la super méthode n'est pas ajoutée, une ReferenceError sera signalée.

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

Vous pouvez également passer des paramètres dans la super méthode

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

5 Autres

5.1 Ceci dans la méthode pointe vers

S'il y a ceci dans la méthode de la classe, alors il pointe vers la instance de la classe. Mais s’il est utilisé séparément, une erreur sera signalée.

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

Il existe deux solutions :

1. Liez ceci dans le constructeur

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

2 Utilisez la fonction flèche

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

5.2 Distinguer si cette classe est héritée

Distinguer si cette classe est héritée. Fonction Object.getPrototypeOf.

class A {
  constructor () {
    this.name = '小米'
  }
	show() {
    console.log('hi')
  }
}
class B extends A {
  constructor () {
    super()
  }
}
class C {}
Object.getPrototypeOf(B) === A // true 是继承的A类
Object.getPrototypeOf(B) === C // false 没有继承C类

【Apprentissage recommandé : Tutoriel avancé javascript】

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!