Heim > Web-Frontend > js-Tutorial > Zusammenfassung gängiger Methoden zum Erstellen von Klassen in JavaScript

Zusammenfassung gängiger Methoden zum Erstellen von Klassen in JavaScript

巴扎黑
Freigeben: 2017-08-16 11:36:58
Original
1149 Leute haben es durchsucht
Die Beispiele in diesem Artikel beschreiben gängige Methoden zum Erstellen von Klassen in JS. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Javascript ist eine objektbasierte Sprache und fast alles, was Ihnen begegnet, ist ein Objekt. Es handelt sich jedoch nicht um eine echte objektorientierte Programmiersprache (OOP), da ihre Syntax keine Klasse enthält. (ES6 führte jedoch das Konzept der Klasse als Vorlage für Objekte ein. Klassen können über das Schlüsselwort class definiert werden. Erste Schritte mit ES6: http://es6.ruanyifeng.com/).
Aber in der Projektentwicklung wird häufig die objektorientierte JS-Entwicklung verwendet, was erfordert, dass wir JS verwenden, um Klassen zu erstellen, um einige Objekte zu instanziieren. Als nächstes stellen wir verschiedene Möglichkeiten zum Erstellen von Klassen in JS vor:
1. Factory-Methode:
//通过工厂方式创建对象,先定义一个工厂方法
function createObj(){
  var obj = new Object();
  obj.name="xxx";
  obj.say=function(){
    alert("我是xxx");
  }
  return obj;
}
//调用工厂方法创建对象:
var obj1 = createObj();
//也可以用这种形式
function createObj(){
  var obj = {}; //这样生成对象
  obj.name="xxx";
  obj.say=function(){
    alert("我是xxx");
  }
  return obj;
}
var obj1 = createObj();
Nach dem Login kopieren

Das Problem bei dieser Methode besteht darin, dass Sie jedes Mal die Factory-Methode durchlaufen Um ein Objekt zu erstellen, müssen beispielsweise der Attributname und die Methode des Objekts neu erstellt werden, was Speicher verschwendet.
2. Konstruktormethode:
//创建一个构造器,构造函数首字母大写
function Obj(){
  this.name="xxx";
  this.say=function(){
    alert("我是xxx");
  };
}
//利用构造器,通过new关键字生成对象
var obj1=new Obj();
Nach dem Login kopieren

Dies ist die grundlegendste Methode, weist aber auch die gleichen Mängel wie die Factory-Methode auf.
3. Prototyp-Methode:
//用空函数创建一个类
function Obj(){
}
//在类的原型链上添加属性和方法
Obj.prototype.name="xxx";
Obj.prototype.say=function(){
  alert("我是xxx");
}
//生成对象
var obj1=new Obj();
Nach dem Login kopieren

Der Nachteil dieser Methode besteht darin, dass bei Vorhandensein von Referenzattributen durch die Änderung des Attributs eines Objekts auch das Attribut anderer Objekte geändert wird . Weil ein Referenzattribut auf denselben Ort verweist.
4. Prototyp/Konstruktor-Kombinationsmethode
//用构造函数定义对象的非函数属性
function Obj(name){
  this.name=name;
  this.arr=new Array('a','b');
}
//用原型方式定义对象的方法
Obj.prototype.say=function(){
  alert("我是xxx");
}
//生成对象
var obj1 = new Obj('xxx');
Nach dem Login kopieren

Dies ist derzeit die am häufigsten verwendete Methode zum Erstellen von Klassen und Objekten, wobei Methoden und Eigenschaften auf unterschiedliche Weise gekapselt werden.
5. Dynamischer Prototypmodus
//动态原型方式和原型/构造混合方式的原理相似,唯一的区别就是赋予对象方法的位置
function Person(name, sex) {
  this.name = name;
  this.sex = sex;
  if (typeof this.say != "function") {
    Person.prototype.say = function () {
      alert(this.name);
    }
  }
}
var man =new Person ("凯撒", "男");
man.say();//凯撒
Nach dem Login kopieren

Der dynamische Prototypmodus kapselt alle Informationen in den Konstruktor, nur wenn sie nicht vorhanden sind, werden sie hinzugefügt der Prototyp. Dieser Code wird nur beim ersten Aufruf ausgeführt.
Es gibt drei Schritte, um das obj-Objekt zu instanziieren:
1. Erstellen Sie das obj-Objekt:
obj=new Object();
Nach dem Login kopieren

2. Richten Sie das interne __proto__ von obj auf den Prototyp der Funktion Obj, die es erstellt Gleichzeitig ist obj.constructor===Obj.prototype.constructor, wodurch obj.constructor.prototype auf Obj.prototype zeigt (obj.constructor.prototype===A.prototype). obj.constructor.prototype und das interne _proto_ sind zwei verschiedene Dinge, wenn ein Objekt instanziiert wird. Obj verfügt über ein internes __proto__, um die Prototypattribute in der Prototypenkette abzurufen . und Prototyping-Methoden.
3. Verwenden Sie obj, um den Konstruktor Obj aufzurufen, um die Mitglieder (d. h. Objekteigenschaften und Objektmethoden) festzulegen und zu initialisieren.
Wenn diese drei Schritte abgeschlossen sind, hat das Obj-Objekt keine Verbindung zum Konstruktor Obj. Selbst wenn der Konstruktor Obj zu diesem Zeitpunkt Mitglieder hinzufügt, hat dies keine Auswirkungen mehr auf das instanziierte Obj-Objekt.

Das obige ist der detaillierte Inhalt vonZusammenfassung gängiger Methoden zum Erstellen von Klassen in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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