Maison > interface Web > Questions et réponses frontales > Comment écrire oop en javascript

Comment écrire oop en javascript

王林
Libérer: 2023-05-16 09:43:07
original
521 Les gens l'ont consulté

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.

  1. 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.
Copier après la connexion

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构造函数,初始化了nameage属性。然后,我们使用Person.prototype给每个Person对象添加了一个sayHi方法,这个方法可以被所有Person对象共享。最后,我们创建了两个Person对象,并调用了它们的sayHi方法。

  1. 类(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.
Copier après la connexion

在上面的例子中,我们使用class关键字定义了一个Person类,并在constructor方法中初始化了nameage属性。然后,我们定义了一个sayHi方法,用于输出一个招呼。最后,我们创建了两个Person对象,并调用了它们的sayHi方法。

  1. 继承(inheritance)

在OOP中,继承是指从一个已有的对象中派生出一个新的对象,新对象继承了原来的对象的属性和方法。在JavaScript中,继承可以通过使用prototypeclass来实现。

以下是使用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.
Copier après la connexion

在上面的例子中,我们定义了一个Person构造函数,在原型中添加了sayHi方法。另外,我们定义了一个Student构造函数,通过使用call方法调用了Person构造函数来初始化nameage属性,并添加了一个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.
Copier après la connexion

在上面的例子中,我们定义了一个Person类,在constructor方法中初始化了nameage属性,并在sayHi方法中输出了一个招呼。然后,我们使用extends关键字创建了一个Student类,并使用super关键字调用了Person类的constructor方法来初始化nameage属性,并添加了一个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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal