Explication détaillée de la création d'objets basés sur des compétences JavaScript orientées objet (1)_javascript

Cette fois, nous étudierons en profondeur la technologie JavaScript orientée objet. Avant d'apprendre, il est nécessaire d'expliquer certains termes orientés objet. C’est ce que tous les langages orientés objet ont en commun. Il existe plusieurs termes orientés objet :
1. Objet
ECMA-262 définit un objet comme "une collection non ordonnée d'attributs, chaque attribut stocke une valeur primitive, un objet ou une fonction". À proprement parler, cela signifie qu'un objet est un tableau de valeurs sans ordre particulier. Bien qu'ECMAScript définisse les objets de cette façon, sa définition plus générale est une représentation basée sur le code d'un nom (une personne, un lieu ou une chose).
2. Catégorie
Chaque objet est défini par une classe, qui peut être considérée comme la recette d'un objet. Une classe définit non seulement l'interface de l'objet (les propriétés et les méthodes auxquelles accèdent les développeurs), mais également le fonctionnement interne de l'objet (le code qui fait fonctionner les propriétés et les méthodes). Les compilateurs et les interprètes créent des objets basés sur des spécifications de classe.
3. Exemples
Lorsqu'un programme utilise une classe pour créer un objet, l'objet généré est appelé une instance de la classe. La seule limite au nombre d'objets qu'une classe peut générer vient de la mémoire physique de la machine sur laquelle le code est exécuté. Chaque instance se comporte de la même manière, mais elle gère un ensemble de données indépendant. Le processus de création d'instances d'objet à partir d'une classe est appelé instanciation.
Dans le chapitre précédent, nous avons mentionné qu'ECMAScript n'a pas de classes formelles. En revanche, ECMA-262 décrit les définitions d'objets comme des recettes pour les objets. Il s'agit d'un compromis dans la logique ECMAScript, puisque la définition de l'objet est en réalité l'objet lui-même. Même si une classe n'existe pas vraiment, nous appelons la définition d'objet une classe parce que la plupart des développeurs sont plus familiers avec cette terminologie et parce que les deux sont fonctionnellement équivalentes.
L'utilisation d'objets prédéfinis n'est qu'une partie des capacités d'un langage orienté objet. Sa véritable puissance réside dans la possibilité de créer vos propres objets dédiés. ECMAScript dispose de nombreuses méthodes pour créer des objets.
1.Méthode originale
Étant donné que les propriétés d'un objet peuvent être définies dynamiquement après la création de l'objet, de nombreux développeurs ont écrit du code similaire à celui-ci lors de l'introduction de JavaScript :

var Car = new Object(); 
Car.color = "blue"; 
Car.doors = 4; 
Car.mpg = 25; 
Car.showColor = function() { 
  return this.color; 
}; 
document.write(Car.showColor());//输出：blue 

Dans le code ci-dessus, créez l'objet Car. Donnez-lui ensuite quelques attributs : il est bleu, a quatre portes et obtient 25 miles par gallon. Le dernier attribut est en fait un pointeur vers une fonction, ce qui signifie que l'attribut est une méthode. Après avoir exécuté ce code, l'objet Car peut être utilisé. Cependant, il y a un problème ici, c'est-à-dire que nous devrons peut-être créer plusieurs instances de Car, ce qui nous amènera à répéter beaucoup de code similaire, ce qui sera très gênant.
2. Méthode d'usine
Pour résoudre le problème ci-dessus de plusieurs déclarations d'objets similaires, les développeurs ont créé des usines capables de créer et de renvoyer des objets de types spécifiques. Cette méthode vise à résoudre le problème des grandes quantités de duplication d’objets instanciés.
(1) Méthode usine sans paramètres
Par exemple, la fonction createCar() peut être utilisée pour encapsuler les opérations de création d'un objet Car précédemment listées :

function createCar() { 
var TempCar = new Object(); 
TempCar.color = "blue"; 
TempCar.doors = 4; 
TempCar.mpg = 25; 
TempCar.showColor = function() { 
    return this.color; 
 }; 
 return TempCar; 
}; 
var Car1 = createCar(); 
var Car2 = createCar(); 
document.write(Car1.showColor()+"<br/>");//输出：blue 
document.write(Car2.showColor());//输出：blue 

Ici, tout le code du premier exemple est contenu dans la fonction createCar(). De plus, il existe une ligne de code supplémentaire qui renvoie un objet TempCar comme valeur de fonction. L'appel de cette fonction créera un nouvel objet et lui donnera tous les attributs nécessaires, en copiant l'objet Car que nous avons expliqué plus tôt. Ainsi, avec cette approche, nous pouvons facilement créer deux versions de l'objet Car (Car1 et Car2) avec exactement les mêmes propriétés.
(2) Méthode usine avec paramètres
On peut également modifier la fonction createCar() pour lui passer la valeur par défaut de chaque attribut, au lieu de simplement donner une valeur par défaut à l'attribut :

function createCar(Color,Doors,Mpg) { 
 var TempCar = new Object(); 
 TempCar.color = Color; 
 TempCar.doors = Doors; 
 TempCar.mpg = Mpg; 
 TempCar.showColor = function() { 
    return this.color; 
 }; 
 return TempCar; 
}; 
var Car1 = createCar("red",4,23); 
var Car2 = createCar("blue",3,25); 
document.write(Car1.showColor()+"<br/>");//输出：red 
document.write(Car2.showColor());//输出：blue 

En ajoutant des paramètres à la fonction createCar(), vous pouvez attribuer des valeurs aux attributs couleur, portes et mpg de l'objet Car à créer. Cela fait que deux objets ont les mêmes propriétés, mais des valeurs de propriété différentes.
La méthode factory résout le problème de l'instanciation répétée, mais il y a toujours un problème, c'est-à-dire que dans l'exemple précédent, chaque fois que la fonction createCar() est appelée, une nouvelle fonction showColor() doit être créée, ce qui signifie que chaque objet a sa propre version showColor. En fait, chaque objet partage la même fonction. Certains développeurs définissent la méthode de l'objet en dehors de la fonction factory puis pointent vers la méthode via un attribut pour éviter ce problème :

function showColor() { 
   return this.color; 
}; 
function createCar(Color,Doors,Mpg) { 
 var TempCar = new Object(); 
 TempCar.color = Color; 
 TempCar.doors = Doors; 
 TempCar.mpg = Mpg; 
 TempCar.showColor = showColor; 
 return TempCar; 
}; 
var Car1 = createCar("red",4,23); 
var Car2 = createCar("blue",3,25); 
document.write(Car1.showColor()+"<br/>");//输出：red 
document.write(Car2.showColor());//输出：blue 

       在上面这段重写的代码中，在函数 createCar()之前定义了函数 showColor()。在createCar()内部，赋予对象一个指向已经存在的 showColor() 函数的指针。从功能上讲，这样解决了重复创建函数对象的问题；但是从语义上讲，该函数不太像是对象的方法。所有这些问题都引发了开发者定义的构造函数的出现。
3、构造函数方式
       创建构造函数就像创建工厂方式的函数一样容易。第一步选择构造函数的名字。根据惯例，这个名字的首字母大写，以使它与首字母通常是小写的变量名分开。除了这点不同，构造函数看起来很像工厂方式的函数。请看下面的例子：

function Car(Color,Doors,Mpg) { 
 this.color = Color; 
 this.doors = Doors; 
 this.mpg = Mpg; 
 this.showColor = function() { 
    return this.color; 
 }; 
}; 
var Car1 = new Car("red",4,23); 
var Car2 = new Car("blue",3,25); 
document.write(Car1.showColor()+"<br/>");//输出：red 
document.write(Car2.showColor());//输出：blue 

       下面为您解释上面的代码与工厂方式的差别。首先在构造函数内没有创建对象，而是使用this关键字。使用new运算符构造函数时，在执行第一行代码前先创建一个对象，只有用this才能访问该对象。然后可以直接赋予this属性，默认情况下是构造函数的返回值（不必明确使用 return 运算符）。现在，用new运算符和对象名Car创建对象，就更像 ECMAScript 中一般对象的创建方式了。
      就像工厂方式的函数，构造函数会重复生成函数，为每个对象都创建独立的函数版本。不过，与工厂方式的函数相似，也可以用外部函数重写构造函数，同样地，这么做语义上无任何意义。这正是下面要讲的原型方式的优势所在。在下篇文章中会详细的分析面向对象的原型方式以及其他综合的方式。

以上就是本文的全部内容，希望对大家的学习javascript程序设计有所帮助。