Comment écrire oop en javascript
Dans le développement web, JavaScript est devenu un langage de programmation très populaire. En JavaScript, la programmation orientée objet (POO) est un concept important. Grâce à la POO, vous pouvez structurer votre code et réduire sa duplication, ce qui facilite sa maintenance et son extension. Cet article explique comment écrire la POO en JavaScript.
- Prototype et constructeur
En JavaScript, les propriétés et méthodes d'un objet peuvent être partagées via des prototypes. nouvel objet et initialiser ses propriétés. Ce qui suit est un exemple simple utilisant des constructeurs et des prototypes :
function Person(name, age) { this.name = name; this.age = age; } Person.prototype.sayHi = function() { console.log("Hi, my name is " + this.name + " and I'm " + this.age + " years old."); } var person1 = new Person("John", 30); var person2 = new Person("Mary", 25); person1.sayHi(); // Hi, my name is John and I'm 30 years old. person2.sayHi(); // Hi, my name is Mary and I'm 25 years old.
Dans l'exemple ci-dessus, nous définissons un constructeur Person
et initialisons name</ code> et <code Attributs >âge
. Ensuite, nous utilisons Person.prototype
pour ajouter une méthode sayHi
à chaque objet Person
. Cette méthode peut être utilisée par tous les Person<. /code> code>Partage d'objets. Enfin, nous avons créé deux objets <code>Person
et appelé leur méthode sayHi
. Person
构造函数,初始化了name
和age
属性。然后,我们使用Person.prototype
给每个Person
对象添加了一个sayHi
方法,这个方法可以被所有Person
对象共享。最后,我们创建了两个Person
对象,并调用了它们的sayHi
方法。
- 类(class)
在ES6中,JavaScript引入了类的概念,并使用关键字class
来实现。类提供了一种更简洁、更易于理解的语法,用于定义对象。
以下是一个使用类的例子:
class Person { constructor(name, age) { this.name = name; this.age = age; } sayHi() { console.log("Hi, my name is " + this.name + " and I'm " + this.age + " years old."); } } let person1 = new Person("John", 30); let person2 = new Person("Mary", 25); person1.sayHi(); // Hi, my name is John and I'm 30 years old. person2.sayHi(); // Hi, my name is Mary and I'm 25 years old.
在上面的例子中,我们使用class
关键字定义了一个Person
类,并在constructor
方法中初始化了name
和age
属性。然后,我们定义了一个sayHi
方法,用于输出一个招呼。最后,我们创建了两个Person
对象,并调用了它们的sayHi
方法。
- 继承(inheritance)
在OOP中,继承是指从一个已有的对象中派生出一个新的对象,新对象继承了原来的对象的属性和方法。在JavaScript中,继承可以通过使用prototype
和class
来实现。
以下是使用prototype
实现继承的例子:
function Person(name, age) { this.name = name; this.age = age; } Person.prototype.sayHi = function () { console.log("Hi, my name is " + this.name + " and I'm " + this.age + " years old."); } function Student(name, age, major) { Person.call(this, name, age); this.major = major; } Student.prototype = Object.create(Person.prototype); Student.prototype.constructor = Student; Student.prototype.sayMajor = function() { console.log("My major is " + this.major + "."); } let person1 = new Person("John", 30); let student1 = new Student("Mary", 25, "Computer Science"); person1.sayHi(); // Hi, my name is John and I'm 30 years old. student1.sayHi(); // Hi, my name is Mary and I'm 25 years old. student1.sayMajor(); // My major is Computer Science.
在上面的例子中,我们定义了一个Person
构造函数,在原型中添加了sayHi
方法。另外,我们定义了一个Student
构造函数,通过使用call
方法调用了Person
构造函数来初始化name
和age
属性,并添加了一个major
属性。然后,我们使用Object.create
方法创建了一个Person.prototype
的副本,并将其指定给Student.prototype
,以便Student
对象可以继承Person
对象的属性和方法。最后,我们定义了一个sayMajor
方法,用于输出学生的专业。最终,我们创建了一个Person
对象和一个Student
对象,并调用了他们的方法。
以下是使用class
实现继承的例子:
class Person { constructor(name, age) { this.name = name; this.age = age; } sayHi() { console.log("Hi, my name is " + this.name + " and I'm " + this.age + " years old.") } } class Student extends Person { constructor(name, age, major) { super(name, age); this.major = major; } sayMajor() { console.log("My major is " + this.major + "."); } } let person1 = new Person("John", 30); let student1 = new Student("Mary", 25, "Computer Science"); person1.sayHi(); // Hi, my name is John and I'm 30 years old. student1.sayHi(); // Hi, my name is Mary and I'm 25 years old. student1.sayMajor(); // My major is Computer Science.
在上面的例子中,我们定义了一个Person
类,在constructor
方法中初始化了name
和age
属性,并在sayHi
方法中输出了一个招呼。然后,我们使用extends
关键字创建了一个Student
类,并使用super
关键字调用了Person
类的constructor
方法来初始化name
和age
属性,并添加了一个major
属性。最后,我们定义了一个sayMajor
方法,用于输出学生的专业。最终,我们创建了一个Person
对象和一个Student
对象,并调用了他们的方法。
结论:
在JavaScript中,OOP是一种非常重要的概念,使用对象、构造函数、原型和类可以更好地组织代码和减少重复性。继承可以通过原型和类来实现。从ES6开始,JavaScript引入了关键字class
- Class (class) #🎜🎜##🎜🎜##🎜🎜#Dans ES6, JavaScript a introduit le concept de classes et a utilisé le mot-clé
class à implémenter. Les classes fournissent une syntaxe plus claire et plus facile à comprendre pour définir des objets. #🎜🎜##🎜🎜#Ce qui suit est un exemple d'utilisation d'une classe : #🎜🎜#rrreee#🎜🎜#Dans l'exemple ci-dessus, nous utilisons le mot-clé <code>class
pour définir un Person
et initialisé les propriétés name
et age
dans la méthode constructor
. Ensuite, nous avons défini une méthode sayHi
pour afficher un message d'accueil. Enfin, nous avons créé deux objets Person
et appelé leurs méthodes sayHi
. #🎜🎜#- #🎜🎜#Inheritance#🎜🎜##🎜🎜##🎜🎜#En POO, l'héritage fait référence à la dérivation d'un nouvel objet à partir d'un objet existant, le nouvel objet hérite. les propriétés et méthodes de l’objet d’origine. En JavaScript, l'héritage peut être obtenu en utilisant
prototype
et class
. #🎜🎜##🎜🎜#Ce qui suit est un exemple d'utilisation de prototype
pour implémenter l'héritage : #🎜🎜#rrreee#🎜🎜#Dans l'exemple ci-dessus, nous définissons une Person code > Constructeur, ajout de la méthode <code>sayHi
dans le prototype. De plus, nous avons défini un constructeur Student
et appelé le constructeur Person
en utilisant la méthode call
pour initialiser name
et age et ajout d'un attribut major
. Nous créons ensuite une copie de Person.prototype
en utilisant la méthode Object.create
et l'attribuons à Student.prototype
afin que Student peuvent hériter des propriétés et des méthodes des objets <code>Person
. Enfin, nous définissons une méthode sayMajor
pour afficher la majeure de l'étudiant. Enfin, nous avons créé un objet Person
et un objet Student
et appelé leurs méthodes. #🎜🎜##🎜🎜#Ce qui suit est un exemple d'utilisation de class
pour implémenter l'héritage : #🎜🎜#rrreee#🎜🎜#Dans l'exemple ci-dessus, nous définissons une Person code >Class, les propriétés <code>name
et age
sont initialisées dans la méthode constructor
, et a est généré dans le sayHi
appel de méthode. Ensuite, nous avons créé une classe Student
en utilisant le mot-clé extends
et appelé la classe Person
en utilisant le mot-clé super
Le constructor initialise les propriétés name
et age
, et ajoute une propriété major
. Enfin, nous définissons une méthode sayMajor
pour afficher la majeure de l'étudiant. Enfin, nous avons créé un objet Person
et un objet Student
et appelé leurs méthodes. #🎜🎜##🎜🎜#Conclusion : #🎜🎜##🎜🎜# En JavaScript, la POO est un concept très important. L'utilisation d'objets, de constructeurs, de prototypes et de classes permet de mieux organiser le code et de réduire les duplications. L'héritage peut être obtenu grâce à des prototypes et des classes. À partir d'ES6, JavaScript a introduit le mot-clé class
, qui fournit une syntaxe plus simple et plus facile à comprendre pour définir des objets. Dans la mesure du possible, il est important de choisir la bonne approche pour écrire du code POO, car cela apportera des avantages significatifs dans le développement et la maintenance du projet. #🎜🎜#
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!

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

L'article traite de l'utilisation Effecte dans React, un crochet pour gérer les effets secondaires comme la récupération des données et la manipulation DOM dans les composants fonctionnels. Il explique l'utilisation, les effets secondaires courants et le nettoyage pour éviter des problèmes comme les fuites de mémoire.

Le chargement paresseux retarde le chargement du contenu jusqu'à ce qu'il soit nécessaire, améliorant les performances du Web et l'expérience utilisateur en réduisant les temps de chargement initiaux et la charge du serveur.

L'article explique l'algorithme de réconciliation de React, qui met à jour efficacement le DOM en comparant les arbres DOM virtuels. Il traite des avantages de la performance, des techniques d'optimisation et des impacts sur l'expérience utilisateur. Compte de charge: 159

L'article traite du curry dans JavaScript, une technique transformant les fonctions mulguments en séquences de fonctions à argument unique. Il explore la mise en œuvre du currying, des avantages tels que des applications partielles et des utilisations pratiques, améliorant le code

Les fonctions d'ordre supérieur dans JavaScript améliorent la concision du code, la réutilisabilité, la modularité et les performances par abstraction, modèles communs et techniques d'optimisation.

L'article explique UseContext dans React, qui simplifie la gestion de l'État en évitant le forage des accessoires. Il traite des avantages tels que les améliorations centralisées de l'État et des performances grâce à des redevances réduites.

L'article discute de la connexion des composants React à Redux Store à l'aide de Connect (), expliquant MapStateToproprop, MapDispatchToprops et des impacts de performances.

L'article discute de la prévention des comportements par défaut dans les gestionnaires d'événements à l'aide de la méthode empêchée dedEfault (), de ses avantages tels que une expérience utilisateur améliorée et des problèmes potentiels tels que les problèmes d'accessibilité.
