Bases de la programmation orientée objet JavaScript_connaissances de base

Re-comprendre l'orienté objet
Afin d'illustrer que JavaScript est un langage entièrement orienté objet, il faut d'abord commencer par la notion d'orienté objet et aborder plusieurs concepts en orienté objet :

1. Tout est objet
2. Les objets ont des fonctionnalités d'encapsulation et d'héritage
3. Les objets utilisent des messages pour communiquer entre eux, et chacun cache des informations

Sur la base de ces trois points, C est un langage semi-orienté objet et semi-procédural, car bien qu'il implémente l'encapsulation de classe, l'héritage et le polymorphisme, il existe des fonctions et variables globales non-objets. Java et C# sont des langages entièrement orientés objet. Ils organisent les fonctions et les variables sous forme de classes afin qu'elles ne puissent exister sans objets. Mais ici, la fonction elle-même est un processus simplement attaché à une certaine classe.

Cependant, l'orientation objet n'est qu'un concept ou une idée de programmation, et son existence ne devrait pas dépendre d'un certain langage. Par exemple, Java utilise la pensée orientée objet pour construire son langage et implémente des mécanismes tels que les classes, l'héritage, la dérivation, le polymorphisme et les interfaces. Cependant, ces mécanismes ne sont qu’un moyen de mettre en œuvre une programmation orientée objet, et ce n’est pas nécessaire. En d’autres termes, un langage peut choisir une manière appropriée d’implémenter l’orientation objet en fonction de ses propres caractéristiques. Par conséquent, puisque la plupart des programmeurs apprennent ou utilisent d'abord des langages compilés de haut niveau tels que Java et C (bien que Java soit semi-compilé et semi-interprété, il est généralement expliqué comme un langage compilé), ils acceptent de manière préconçue le terme « classe ". Méthode d'implémentation orientée objet, donc lors de l'apprentissage des langages de script, il est d'usage d'utiliser les concepts des langages orientés objet basés sur les classes pour juger si le langage est un langage orienté objet ou s'il possède des caractéristiques orientées objet. . C’est également l’une des raisons importantes qui empêchent les programmeurs d’apprendre et de maîtriser JavaScript en profondeur.
En fait, le langage JavaScript implémente la programmation orientée objet via une méthode appelée prototype. Discutons des différences entre les deux méthodes de construction du monde objectif, orientée objet basée sur les classes et orientée objet basée sur des prototypes.
Comparaison entre les approches orientées objet basées sur les classes et les approches orientées objet basées sur les prototypes
Dans l'approche orientée objet basée sur les classes, les objets sont générés en fonction des classes. Dans l’approche orientée objet basée sur les prototypes, les objets sont construits à l’aide de constructeurs et de prototypes. Donnez un exemple tiré du monde objectif pour illustrer la différence entre les deux modes de cognition. Par exemple, lorsqu'une usine construit une voiture, d'une part, les travailleurs doivent se référer à un dessin technique et la conception stipule comment la voiture doit être fabriquée. Les dessins techniques sont ici comme des classes de langage, et les voitures sont fabriquées selon cette classe ; par contre, les ouvriers et les machines (équivalents aux constructeurs) utilisent diverses pièces telles que les moteurs, les pneus, le volant (équivalent à chaque attribut de le prototype) construit la voiture.
En fait, il y a encore un débat pour savoir laquelle des deux méthodes exprime le plus complètement les idées orientées objet. Mais l'auteur estime que le prototype orienté objet est une approche orientée objet plus approfondie pour les raisons suivantes :
Tout d’abord, la création d’objets dans le monde objectif est le résultat de la construction d’autres objets physiques, et les « dessins » abstraits ne peuvent pas produire de « voitures ». En d’autres termes, une classe est un concept abstrait plutôt qu’une entité, et la création d'objets est La création d'une entité
Deuxièmement, selon la règle orientée objet la plus élémentaire selon laquelle tout est un objet, la classe elle-même n'est pas un objet. Cependant, le constructeur et le prototype dans la méthode prototype sont eux-mêmes d'autres objets via la méthode prototype.
Troisièmement, dans un langage orienté objet basé sur les classes, l'état d'un objet est détenu par l'instance d'objet et la méthode de comportement de l'objet est détenue par la classe qui déclare l'objet, et seules la structure et les méthodes peuvent être héritées. ; dans les langages prototypes orientés objet, le comportement et le statut de l'objet appartiennent à l'objet lui-même et peuvent être hérités ensemble (ressources de référence), ce qui est plus proche de la réalité objective.
Enfin, les langages orientés objet basés sur les classes tels que Java permettent de déclarer des propriétés et des méthodes statiques dans les classes afin de compenser l'inconvénient de ne pas pouvoir utiliser de fonctions et de variables globales dans les langages procéduraux. En fait, il n’existe pas de concept dit statique dans le monde objectif, car tout est objet ! Dans un prototype de langage orienté objet, à l'exception des objets intégrés, les objets, méthodes ou propriétés globaux ne sont pas autorisés à exister et il n'y a pas de concept statique. Tous les éléments du langage (primitifs) doivent dépendre d'objets pour leur existence. Cependant, en raison des caractéristiques des langages fonctionnels, les objets dont dépendent les éléments du langage changent avec les changements du contexte d'exécution, ce qui se reflète spécifiquement dans les changements du pointeur this. C’est cette caractéristique qui se rapproche le plus de la vision naturelle selon laquelle « tout appartient à quelque chose et l’univers est le fondement de la survie de toutes choses ».

Connaissances de base orientées objet JavaScript

Bien que JavaScript lui-même n'ait pas le concept de classes, il a toujours des caractéristiques orientées objet, bien qu'il soit différent des langages orientés objet courants.

La manière simple de créer un objet est la suivante :

function myObject() {

};

JavaScript 中创建对象的方法一般来说有两种：函数构造法和字面量法，上面这种属函数构造法。下面是一个字面量法的例子：

var myObject = {

};

Si vous n'avez besoin que d'un seul objet et n'avez pas besoin d'autres instances de l'objet, il est recommandé d'utiliser la méthode littérale. Si plusieurs instances d'un objet sont requises, le constructeur de fonction est recommandé.
Définir les propriétés et les méthodes

Méthode de construction de fonction :

function myObject() {
 this.iAm = 'an object';

 this.whatAmI = function() {
 console.log('I am ' + this.iAm);
 };
};

Méthode littérale :

var myObject = {
 iAm : 'an object',

 whatAmI : function() {
 console.log('I am ' + this.iAm);
 }
};

Les objets créés par les deux méthodes ci-dessus ont une propriété nommée "iAm" et une méthode nommée "whatAmI". Les propriétés sont des variables dans un objet et les méthodes sont des fonctions dans un objet.

Comment obtenir des attributs et des méthodes d'appel :

var w = myObject.iAm;

myObject.whatAmI();

Lorsque vous appelez une méthode, vous devez ajouter des parenthèses après celle-ci. Si vous n'ajoutez pas de parenthèses, elle renverra simplement une référence à la méthode.
La différence entre les deux méthodes de création d'objets

• Lors de la définition des propriétés et des méthodes dans le constructeur de fonction, vous devez utiliser le préfixe this, qui n'est pas requis dans la méthode littérale.
• Le constructeur de fonction utilise = lors de l'attribution de valeurs aux propriétés et aux méthodes, et la méthode littérale utilise : .
• S'il existe plusieurs propriétés ou méthodes, elles doivent être séparées par ; dans le constructeur de fonction et par , dans la méthode littérale.

Pour les objets créés par méthode littérale, vous pouvez appeler directement ses propriétés ou méthodes en utilisant la référence de l'objet :

myObject.whatAmI();

Pour le constructeur de fonction, vous devez créer une instance de l'objet avant de pouvoir appeler ses propriétés ou méthodes :

var myNewObject = new myObject();
myNewObject.whatAmI();

Utiliser le constructeur

Revenons maintenant à la méthode de construction de fonction précédente :

function myObject() {
 this.iAm = 'an object';
 this.whatAmI = function() {
 console.log('I am ' + this.iAm);
 };
};

En fait, cela ressemble à une fonction. Puisqu'il s'agit d'une fonction, puis-je lui passer des paramètres ? Modifiez légèrement le code :

function myObject(what) {
 this.iAm = what;
 this.whatAmI = function(language) {
 console.log('I am ' + this.iAm + ' of the ' + language + ' language');
 };
};

Ensuite instanciez l'objet et passez les paramètres :

var myNewObject = new myObject('an object');
myNewObject.whatAmI('JavaScript');

Le résultat final du programme est que je suis un objet du langage JavaScript.
Il existe deux manières de créer des objets, laquelle dois-je utiliser ?

Pour les méthodes littérales, car elles ne nécessitent pas d'instanciation, si la valeur d'un objet est modifiée, la valeur de l'objet est définitivement modifiée, et tout autre accès sera la valeur modifiée. Pour le constructeur de fonction, lors de la modification de la valeur, la valeur de son instance est modifiée. Il peut instancier N objets, et chaque objet peut avoir sa propre valeur différente sans interférer les uns avec les autres. Comparez les extraits de code suivants.

Regardons d'abord la méthode littérale :

var myObjectLiteral = {
 myProperty : 'this is a property'
};

console.log(myObjectLiteral.myProperty); // log 'this is a property'

myObjectLiteral.myProperty = 'this is a new property';

console.log(myObjectLiteral.myProperty); // log 'this is a new property'

Même si une nouvelle variable est créée pour pointer vers cet objet, le résultat est toujours le même :

var myObjectLiteral = {
 myProperty : 'this is a property'
};

console.log(myObjectLiteral.myProperty); // log 'this is a property'

var sameObject = myObjectLiteral;

myObjectLiteral.myProperty = 'this is a new property';

console.log(sameObject.myProperty); // log 'this is a new property'

Regardez à nouveau la méthode de construction de la fonction :

// 用函数构造法
var myObjectConstructor = function() {
   this.myProperty = 'this is a property'
};

// 实例化一个对象
var constructorOne = new myObjectConstructor();

// 实例化第二个对象
var constructorTwo = new myObjectConstructor();

// 输出
console.log(constructorOne.myProperty); // log 'this is a property'

// 输出
console.log(constructorTwo.myProperty); // log 'this is a property'

和预期一样，两个对象的属性值是一样的。如果修个其中一个对象的值呢？

// 用函数构造法
var myObjectConstructor = function() {
 this.myProperty = 'this is a property';
};

// 实例化一个对象
var constructorOne = new myObjectConstructor();

// 修改对象的属性
constructorOne.myProperty = 'this is a new property';

// 实例化第二个对象
var constructorTwo = new myObjectConstructor();

// 输出
alert(constructorOne.myProperty); // log 'this is a new property'

// 输出
alert(constructorTwo.myProperty); // log 'this is a property'

Comme vous pouvez le constater, les différents objets instanciés à l'aide du constructeur de fonction sont indépendants les uns des autres et peuvent chacun avoir des valeurs différentes. Par conséquent, la méthode à utiliser pour créer des objets dépend de la situation réelle.