Maîtriser la programmation orientée objet et l'héritage en JavaScript

Dans le développement Web moderne, JavaScript est devenu un langage indispensable. Parmi eux, la programmation orientée objet (POO) et l'héritage sont deux aspects importants du développement JavaScript. Cet article présentera aux lecteurs la programmation orientée objet et l'héritage en JavaScript et donnera des exemples de code spécifiques.

1. Programmation orientée objet

La programmation orientée objet est une méthode de programmation qui utilise des objets comme unité de base du programme et encapsule les données et les opérations sur les données. En JavaScript, nous pouvons utiliser des objets et des fonctions pour implémenter une programmation orientée objet.

1. Objets

En JavaScript, un objet est une collection de paires clé-valeur. Nous pouvons utiliser des accolades pour définir un objet :

var person = {
  name: 'Tom',
  age: 18,
  sayHello: function() {
    console.log('Hello, my name is ' + this.name);
  }
};

Dans le code ci-dessus, nous définissons un objet avec trois propriétés. Parmi eux, name et age sont des attributs de base, et sayHello est une méthode. Les propriétés et méthodes d'un objet sont accessibles via : name和age是基本属性，sayHello是一个方法。可以通过以下方式访问对象的属性和方法：

console.log(person.name); // 输出 'Tom'
person.sayHello(); // 输出 'Hello, my name is Tom'

2. 函数

在JavaScript中，函数是一种特殊的对象。我们可以使用函数来创建对象、封装操作和定义类。下面是一个使用函数来创建对象的示例：

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    console.log('Hello, my name is ' + this.name);
  }
}

var person = new Person('Tom', 18);
person.sayHello(); // 输出 'Hello, my name is Tom'

在上面的代码中，我们定义了一个Person函数来创建一个包含name和age属性的对象。这里使用了this关键字来代表当前的对象。通过new Person('Tom', 18)语句来创建一个新的Person对象。

二、继承

继承是一种实现代码复用的方式。在JavaScript中，我们可以使用原型链来实现继承。

1. 原型链

JavaScript中的对象有一个指向其原型对象的指针。我们可以通过原型对象来实现继承，即子对象继承父对象的属性和方法。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name);
}

function Student(name, age, grade) {
  Person.call(this, name, age);
  this.grade = grade;
}

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

var student = new Student('Tom', 18, 3);
student.sayHello(); // 输出 'Hello, my name is Tom'

在上面的代码中，我们定义了一个Person函数和一个Student函数。使用Object.create()来创建一个新的对象作为Student.prototype，这个新的对象的原型为Person.prototype。这样，Student函数就可以继承Person函数的属性和方法。

使用call()函数来继承Person的属性和方法：Person.call(this, name, age)，这里的this表示的是Student函数创建的对象。

最后，将Student.prototype的constructor属性指向Student函数本身，这样我们在使用new关键字创建新的Student对象时，就可以调用Student自身的构造函数。

2. ES6中的继承

在ES6中，我们可以使用class关键字来定义类。class关键字封装了function和prototype两个部分，让我们更方便地定义类。

下面是一个使用ES6定义继承的例子：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log('Hello, my name is ' + this.name);
  }
}

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age);
    this.grade = grade;
  }
}

let student = new Student('Tom', 18, 3);
student.sayHello(); // 输出 'Hello, my name is Tom'

在上面的代码中，我们使用class关键字来定义Person和Student两个类。使用extends关键字来实现继承。

使用super关键字调用父类的构造函数和方法。在Student的构造函数中，使用super(name, age)来调用Person的构造函数，实现了对父类成员属性的继承。使用super关键字调用父类的方法：super.sayHello()rrreee

Fonction

En JavaScript, une fonction est un type particulier d'objet. Nous pouvons utiliser des fonctions pour créer des objets, encapsuler des opérations et définir des classes. Voici un exemple d'utilisation d'une fonction pour créer un objet :

rrreee🎜 Dans le code ci-dessus, nous définissons une fonction Person pour créer un objet contenant name et age L'objet de la propriété. Le mot-clé this est utilisé ici pour représenter l'objet actuel. Créez un nouvel objet Person via l'instruction new Person('Tom', 18). 🎜🎜2. L'héritage🎜🎜L'héritage est un moyen de réutiliser le code. En JavaScript, nous pouvons utiliser la chaîne de prototypes pour implémenter l'héritage. 🎜🎜🎜Prototype Chain🎜🎜🎜Un objet en JavaScript a un pointeur vers son objet prototype. Nous pouvons implémenter l'héritage via des objets prototypes, c'est-à-dire que les objets enfants héritent des propriétés et des méthodes des objets parents. 🎜rrreee🎜Dans le code ci-dessus, nous définissons une fonction Person et une fonction Étudiant. Utilisez Object.create() pour créer un nouvel objet en tant que Student.prototype. Le prototype de ce nouvel objet est Person.prototype. De cette façon, la fonction Étudiant peut hériter des propriétés et méthodes de la fonction Personne. 🎜🎜Utilisez la fonction call() pour hériter des propriétés et méthodes de Person : Person.call(this, name, age), où this représente l'objet créé par la fonction Etudiant. 🎜🎜Enfin, pointez l'attribut constructor de Student.prototype vers la fonction Student elle-même, afin que nous utilisions le new clé code> Lors de la création d'un nouvel objet <code>Student, vous pouvez appeler le constructeur de Student lui-même. 🎜
🎜Héritage dans ES6🎜🎜🎜Dans ES6, nous pouvons utiliser le mot-clé class pour définir des classes. Le mot-clé class encapsule les parties fonction et prototype, nous permettant de définir les classes plus facilement. 🎜🎜Ce qui suit est un exemple d'utilisation d'ES6 pour définir l'héritage : 🎜rrreee🎜Dans le code ci-dessus, nous utilisons le mot-clé class pour définir Person et Student<.>Deux classes. Utilisez le mot-clé <code>extends pour implémenter l'héritage. 🎜🎜Utilisez le mot-clé super pour appeler le constructeur et les méthodes de la classe parent. Dans le constructeur de Student, utilisez super(name, age) pour appeler le constructeur de Person afin de réaliser la modification des attributs des membres de la classe parent .hériter. Utilisez le mot-clé super pour appeler la méthode de la classe parent : super.sayHello(), réalisant l'héritage de la méthode de la classe parent. 🎜🎜3. Résumé🎜🎜Dans cet article, nous avons présenté la programmation orientée objet et l'héritage en JavaScript. Implémentez la programmation orientée objet en utilisant des objets et des fonctions, et implémentez l'héritage à l'aide de chaînes de prototypes et de l'héritage ES6. J'espère qu'il sera utile à tout le monde de comprendre la programmation 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!