Analyse der Kapselung in der objektorientierten JS-Programmierung

Dieser Artikel stellt Ihnen die Analyse der Kapselung in der objektorientierten JS-Programmierung vor. Er hat einen gewissen Referenzwert. Ich hoffe, er wird für Sie hilfreich sein.

Die uns bekannten objektorientierten Sprachen wie C++ und Java haben alle das Konzept von Klassen. Beispielsweise stellt Student den Typ des Schülers dar und stellt keinen bestimmten Schüler dar, und die Instanz ist ein bestimmtes Objekt, das auf diesem Typ basiert, z. B. zhangsan, lisi Das von der Klasse generierte Objekt verkörpert den Prozess der abstrakten Vorlage zur Konkretheit namens klassenbasierte objektorientierte Methode , während JavaScript nicht über das Konzept einer Klasse verfügt, ist die objektorientierte Methode, die auf dem Prototyp basiert (obwohl Es6 class hinzugefügt hat). , was im Wesentlichen eine Kapselung der Prototyp-Methode ist). Zusammenfassend sind die folgenden zwei Punkte:

• Beim klassenbasierten objektorientierten Ansatz werden Objekte durch Klassen generiert.

• Beim prototypbasierten objektorientierten Ansatz werden Objekte mithilfe von Konstruktoren und Prototypen konstruiert.

Das erste Merkmal der objektorientierten Sprache ist zweifellos die Kapselung. In JS besteht der Prozess der Kapselung darin, einige Eigenschaften und Methoden in Objekte zu „verpacken“. Methoden oder wie man Objekte erstellt (im Folgenden werden wir über die Erstellung von Objekten sprechen)? Das Folgende wird Schritt für Schritt erklärt:

Objektliteral--> Prototyp-Konstruktor--> 🎜>

Objektliteral

Es gibt zwei einfache Möglichkeiten, Objekte in JS zu erstellen:

Objektliteral

• var  person = {
      name: "leon",
      age: "20",
  
      greeting: function() {
        alert('Hi!');
      }
  }

Attributmethoden zu
• Instanzen hinzufügen

  Object

  var person = new Object();
  person.name = "leon";
  person.age = "20";
  
  person.greeting = function() {
    alert('Hi!');
  };

Vorteile: Einfacher Code
Nachteile: Durch das Erstellen mehrerer Objekte wird viel Code generiert, der mühsam zu schreiben ist, und es gibt kein Konzept für Instanzen und Prototypen.
Lösung: Werksmodus.
Factory-Muster

Factory-Muster ist ein bekanntes Entwurfsmuster im Programmierbereich, das den Prozess der Erstellung spezifischer Objekte abstrahiert. Erstellen Sie eine Funktion in JS und fügen Sie den Prozess zum Erstellen neuer Objekte, zum Hinzufügen von Objektattributen und zum Zurückgeben von Objekten in diese Funktion ein. Benutzer müssen nur die Funktion aufrufen, um Objekte zu generieren, ohne auf die Details der Objekterstellung zu achten Muster:

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

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

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

Vorteile: Das Fabrikmuster löst das Problem der Duplizierung von Objektcode, der durch Objektliterale erstellt wird, und dieselbe API kann zum Erstellen ähnlicher Objekte verwendet werden.
Nachteil: Da das Objekt durch den Aufruf einer Funktion erstellt wird, kann der Typ des Objekts nicht identifiziert werden.
Lösung: Konstruktor
Konstruktor

Der einzige Unterschied zwischen dem Konstruktor und anderen Funktionen in JS besteht darin, wie er funktioniert heißt, ist anders. Jede Funktion kann als Konstruktor verwendet werden, solange sie über den Operator

aufgerufen wird. Schauen Sie sich das folgende Beispiel an:

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

newEine Instanz durchläuft vier Schritte durch den Konstruktor:

new

Erstellen Sie ein neues Objekt; 🎜>
1. Binden Sie das

   im Konstruktor an das neue Objekt

2. Fügen Sie Eigenschaften und Methoden zum neuen Objekt hinzu; > Gibt ein neues Objekt zurück (die JS-Engine fügt standardmäßig this hinzu).

3. Die über den Konstruktor erstellten Objekte verfügen über ein

   -Attribut, das einen Zeiger auf den Konstruktor selbst darstellt, sodass der Typ des Objekts erkannt werden kann. :

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

4. Aber es gibt immer noch ein Problem:

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

   return this; ist im selben Konstruktor definiert, aber Funktionen mit demselben Namen auf verschiedenen Instanzen sind nicht gleich, was bedeutet, dass die beiden dasselbe haben Name Der Speicherplatz der Funktion ist inkonsistent, das heißt, die Methode im Konstruktor muss bei jeder Instanz neu erstellt werden. Dies ist offensichtlich nicht kosteneffektiv.

Vorteile: Löst das Problem der Erstellung ähnlicher Objekte und kann Objekttypen erkennen. constructor

Nachteil: Die Konstruktormethode muss für jede Instanz einmal erstellt werden.

greeting()

Lösung: Prototypenmodus.
Prototypmuster

• Schließlich haben wir über das Prototypmuster gesprochen. Jeder Konstruktor in JS hat ein

  -Attribut. Dieses Attribut ist ein Zeiger, der auf das Prototypobjekt zeigt. Dieses Prototypobjekt enthält die Eigenschaften und Methoden, die von allen Instanzen dieses Konstruktors gemeinsam genutzt werden. Es gibt ein
-Attribut im Instanzobjekt, das auf das Prototypobjekt verweist, nämlich
• , sodass das Objekt die Eigenschaften und Methoden im Prototypobjekt erhalten kann. Gleichzeitig gibt es in allen Objekten ein

  -Attribut, und das

  des Prototypobjekts zeigt auf den entsprechenden Konstruktor.

使用原型，就意味着我们可以把希望实例共享的属性和方法放到原型对象中去，而不是放在构造函数中，这样每一次通过构造函数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

• 优点：与单纯使用构造函数不一样，原型对象中的方法不会在实例中重新创建一次，节约内存。

• 缺点：使用空构造函数，实例 person1 和 person2 的 name都一样了，我们显然不希望所有实例属性方法都一样，它们还是要有自己独有的属性方法。

• 解决办法：构造函数+原型模式组合使用。

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

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

Object.getPrototypeOf(person1);

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

Person.prototype.isPrototypeOf(person1);

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

person1.hasOwnProperty("name");

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

"name" in person1;

构造函数+原型模式

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

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

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

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

相关文章推荐：

jQuery自调用匿名函数是如何调用的？

JavaScript是否使用var定义变量的区别，举例说明

Das obige ist der detaillierte Inhalt vonAnalyse der Kapselung in der objektorientierten JS-Programmierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!