Analyse de l'encapsulation dans la programmation orientée objet JS-js tutoriel-php.cn

Cet article vous présente l'analyse de l'encapsulation dans la programmation orientée objet JS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Les langages orientés objet que nous connaissons comme C++ et Java ont tous le concept de classes. Les classes sont des modèles de type d'instances. Par exemple, Student représente le type d'étudiant. et ne représente aucun élève spécifique, et l'instance est un objet spécifique créé sur la base de ce type, tel que zhangsan, lisi L'objet généré par la classe incarne le processus de modèle abstrait jusqu'au concret. appelée orientée objet basée sur une classe La méthode , bien que JavaScript n'ait pas le concept de classe, est la méthode orientée objet basée sur le prototype (bien qu'Es6 ait ajouté class , qui est essentiellement une encapsulation de la méthode prototype). Pour résumer, les deux points suivants sont :

Dans l'approche orientée objet basée sur les classes, les objets sont générés par les classes.
Dans l'approche orientée objet basée sur les prototypes, les objets sont construits en s'appuyant sur des constructeurs et des prototypes.

La première fonctionnalité du langage orienté objet est sans aucun doute l'encapsulation. En JS, le processus d'encapsulation consiste à "envelopper" certaines propriétés et méthodes dans des objets, puis nous comment encapsuler les propriétés et. méthodes, ou comment créer des objets (ci-après, nous parlerons de la création d'objets) ? Ce qui suit est expliqué étape par étape :

Littéral d'objet--> Modèle d'usine--> Constructeur--> 🎜>

Objet littéral

Il existe deux manières primitives de créer des objets en JS :

var  person = {
    name: "leon",
    age: "20",

    greeting: function() {
      alert('Hi!');
    }
}

Copier après la connexion

instances
Object

var person = new Object();
person.name = "leon";
person.age = "20";

person.greeting = function() {
  alert('Hi!');
};

Copier après la connexion

Le modèle d'usine est un modèle de conception bien connu dans le domaine de la programmation, qui résume le processus de création d'objets spécifiques. Créez une fonction dans JS et placez le processus de création de nouveaux objets, d'ajout d'attributs d'objet et de renvoi d'objets dans cette fonction. Les utilisateurs n'ont qu'à appeler la fonction pour générer des objets sans prêter attention aux détails de la création d'objets. pattern :

function createPerson(name, age) {
  var person = new Object();
  person.name = name;
  person.age = age;

  person.greeting = function() {
    alert('Hi!');
  };
}

var person1 = createPerson("leon", "20");

Copier après la connexion

La seule différence entre le constructeur et les autres fonctions dans JS est que la façon dont il s'appelle est différent. N'importe quelle fonction peut être utilisée comme constructeur à condition qu'elle soit appelée via l'opérateur

. Regardons l'exemple suivant :

new

Une instance passe par quatre étapes à travers le constructeur

function Person(name, age) {
  this.name = name;
  this.age = age;
  
  this.greeting = function() {
    alert('Hi!');
  };
  // return this;
}

var person1 = new Person("leon", "20");
var person2 = new Person("jack", "21");

Copier après la connexion

new

Liez le
this
Ajoutez des propriétés et des méthodes au nouvel objet
Renvoie un nouvel objet (le moteur JS ajoutera
par défaut).
return this;Les objets créés via le constructeur ont un attribut
, qui est un pointeur vers le constructeur lui-même, afin que le type de l'objet puisse être détecté. :

Mais il y a toujours un problème : constructor

alert(person1.constructor === Person) //true
alert(person1 instanceof Person) // true

Copier après la connexion

est défini dans le même constructeur, mais les fonctions portant le même nom sur différentes instances ne sont pas égales, ce qui signifie Les espaces mémoire de ces deux fonctions du même nom sont incohérentes, c'est-à-dire que les méthodes du constructeur doivent être recréées sur chaque instance. Ce n’est évidemment pas rentable.

alert(person1.greeting == person2.greeting) //false

Copier après la connexion

greeting()Avantages : Résolvez le problème de la création d'objets similaires et pouvez détecter les types d'objets.

Inconvénient : La méthode constructeur doit être créée une fois sur chaque instance.
Solution : Mode prototype.
Modèle de prototype

Cet attribut est un pointeur pointant vers l'objet prototype. Cet objet prototype contient les propriétés et méthodes partagées par toutes les instances de ce constructeur. Il y a un attribut

dans l'objet instance, qui pointe vers l'objet prototype, c'est-à-dire

, afin que l'objet puisse obtenir les propriétés et les méthodes de l'objet prototype. En même temps, tous les objets ont un attribut

et le prototype de l'objet prototype pointe vers son constructeur correspondant. <em>proto</em>

使用原型，就意味着我们可以把希望实例共享的属性和方法放到原型对象中去，而不是放在构造函数中，这样每一次通过构造函数new一个实例，原型对象中定义的方法都不会重新创建一次。来看下面的例子：

function Person() {
}

Person.prototype.name = "leon";
Person.prototype.age = "20";
Person.prototype.greeting = function() {
  alert('Hi!');
};

var person1 = new Person();
var person2 = new Person();
alert(person1.name); //"leon"
alert(person2.name); //"leon"
alert(person1.greeting == person2.greeting); //true

Copier après la connexion

优点：与单纯使用构造函数不一样，原型对象中的方法不会在实例中重新创建一次，节约内存。
缺点：使用空构造函数，实例 person1 和 person2 的 name都一样了，我们显然不希望所有实例属性方法都一样，它们还是要有自己独有的属性方法。
解决办法：构造函数+原型模式组合使用。

另外 JS 中还定义了一些与原型相关的属性，这里罗列一下：

Object.getPrototypeOf()，取得实例的原型对象。

Object.getPrototypeOf(person1);

Copier après la connexion

isPrototypeOf()，判断是不是一个实例的原型对象。

Person.prototype.isPrototypeOf(person1);

Copier après la connexion

hasOwnProperty()，检测一个属性是否存在于实例中

person1.hasOwnProperty("name");

Copier après la connexion

in，判断一个属性是否存在于实例和原型中。

"name" in person1;

Copier après la connexion

构造函数+原型模式

最后一种方式就是组合使用构造函数和原型模式，构造函数用于定义实例属性，而共享属性和方法定义在原型对象中。这样每个实例都有自己独有的属性，同时又有对共享方法的引用，节省内存。

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

Person.prototype = {
  constructor: Person,
  nationality: "China",
  greeting: function() {
    alert(this.name);
  }
}

var person1 = new Person("leon", "20");
var person2 = new Person("jack", "21");
alert(person1.greeting == person2.greeting) //true

Copier après la connexion

上面代码中用对象字面量的形式重写了原型对象，这样相当于创建了一个新的对象，那么它的constructor属性就会指向Object，这里为了让它继续指向构造函数，显示的写上了constructor: Person

这种构造函数与原型模式混成的模式，是目前在 JS 中使用最为广泛的一种创建对象的方法。