Heim > Web-Frontend > js-Tutorial > Hauptteil

Objekte und Prototypen in JavaScript (1)

黄舟
Freigeben: 2016-12-23 15:25:33
Original
1066 Leute haben es durchsucht

Fabrikmuster

Wir wissen, dass wir zum Erstellen eines Objekts den folgenden Code verwenden können:

var user = new Object(); //使用new运算符创建一个对象
user.name = '念在三角湖畔'; //给对象添加属性
user.age = 22;
user.address = '湖北武汉';
alert(user.name + " " +user.age);//返回 '念在三角湖畔 湖北武汉'
Nach dem Login kopieren

Das Erstellen von Objekten auf diese Weise ist relativ einfach und intuitiv, und das auch ist auch ein JavaScript-Typ. Die einfachste Möglichkeit, Objekte zu erstellen. Dabei gibt es jedoch ein Problem. Wenn wir mehrere Objekte erstellen müssen, muss ich viel wiederholten Code schreiben. Wenn wir beispielsweise ein weiteres Objekt user1 erstellen möchten, müssen wir den obigen Code neu schreiben. Dies ist im tatsächlichen Entwicklungsprozess nicht angemessen. Wenn zu viele Objekte vorhanden sind, wird die Codemenge erheblich erhöht.

Um dieses Problem zu lösen, können wir eine Methode namens Factory-Muster verwenden. Diese Methode soll das Problem der Instanziierung von Objekten lösen, die viel doppelten Code generiert.

function create(name, age) {
  var obj = new Object(); 
  obj.name = name; 
  obj.age = age;
  obj.run = function () {
    return this.name +' '+ this.age;
  };
  return obj;
}
var obj1= create('ZXC', 10); //第一个实例
var obj2= create('CXZ', 20); //第二个实例
alert(obj1.run());
alert(obj1.run());
Nach dem Login kopieren

Aus dem obigen Code können wir ersehen, dass das Fabrikmuster das Problem einer großen Anzahl von Codeduplikationen während der Instanziierung löst, aber es entsteht ein anderes Problem, nämlich das Identifikationsproblem, das wir einfach nicht herausfinden können was sie sind. Welches Objekt ist die Instanz? Beispiel:

alert(typeof obj1); //Object
alert(obj1 instanceof Object); //true
Nach dem Login kopieren

Der obige Code zeigt an, dass box1 ein Objekt ist, wir können jedoch nicht wissen, welches Objekt erstellt wurde.

2. Konstruktor (Konstruktormethode)

Um das obige Problem zu lösen, können wir die Konstruktormethode zum Erstellen von Objekten verwenden. Der einzige Unterschied zwischen einem Konstruktor und einer gewöhnlichen Funktion besteht in der Art und Weise, wie er aufgerufen wird. Konstruktoren sind jedoch auch Funktionen.

function User(name, age) { //构造函数模式
  this.name = name;
  this.age = age;
  this.run = function () {
    return this.name + ' '+this.age;   };
}
Nach dem Login kopieren

Verwenden Sie beim Erstellen eines Objekts einfach den neuen Operator:

var user1= new User('ZXC', 25);
var user2= new User('CXZ', 22);
Nach dem Login kopieren

Jetzt können wir erkennen, ob Benutzer1 oder Benutzer2 zu Benutzer gehört.

alert(user1 instanceof User);//true 
Nach dem Login kopieren

Es ist ersichtlich, dass die Verwendung der Konstruktormethode nicht nur das Problem der wiederholten Instanziierung, sondern auch das Problem der Objekterkennung löst .

Der Prozess bei Verwendung des Konstruktors ist wie folgt:

1. Wenn der neue Konstruktor () ausgeführt wird, wird new Object() im Hintergrund ausgeführt

 2. Geben Sie dem neuen Objekt den Gültigkeitsbereich des Konstruktors.

 3. Führen Sie den Code im Konstruktor aus

 4. Geben Sie das neue Objekt direkt im Hintergrund zurück.

Als nächstes schauen wir uns die Funktionsprobleme innerhalb des Konstruktors an. Wenn wir die folgende Anweisung ausführen:

alert(user1.run==user2.run);//结果返回的是false
Nach dem Login kopieren

, ist das Ergebnis falsch, was bedeutet, dass die Methode tatsächlich eine Referenzadresse ist. Wenn wir wiederholt mehrere Objekte erstellen, eröffnen die Methoden in jedem Objekt neuen Platz im Speicher, wodurch mehr Platz verschwendet wird. Um dieses Problem zu lösen, müssen wir die gemeinsame Nutzung von Instanzattributen oder -methoden verwenden. Wir werden die Lösung dieses Problems im nächsten Artikel weiter diskutieren.

Das Obige ist der Inhalt von Objekten und Prototypen in JavaScript (1). Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage