Maîtriser la programmation orientée objet et l'héritage en JavaScript-js tutoriel-php.cn

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

王林

Libérer： 2023-11-03 09:16:04

original

856 Les gens l'ont consulté

Maîtriser la programmation orientée objet et lhé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.

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);
  }
};

Copier après la connexion

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'

Copier après la connexion

函数

在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'

Copier après la connexion

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

二、继承

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

原型链

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'

Copier après la connexion

在上面的代码中，我们定义了一个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自身的构造函数。

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'

Copier après la connexion

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

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

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 :

Person

name

age

this

Person

new Person('Tom', 18)

Person

Étudiant

Object.create()

Student.prototype

Person.prototype

Étudiant