Heim > Web-Frontend > js-Tutorial > Welche Methoden gibt es zum Definieren von Klassen in js?

Welche Methoden gibt es zum Definieren von Klassen in js?

php中世界最好的语言
Freigeben: 2018-04-23 10:43:38
Original
1838 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Methoden zum Definieren von Klassen in js und die Vorsichtsmaßnahmen zum Definieren von Klassen in js erläutern. Das Folgende ist ein praktischer Fall, werfen wir einen Blick darauf.

ECMAScript6 unterstützt bereits Klassen, frühere Versionen unterstützten jedoch keine Klassen, aber Klassen können durch einige Methoden simuliert werden.

Js-Kurse sind sowohl wichtig als auch schwierig. Oftmals fühlen sie sich mehrdeutig an.

Lassen Sie uns zunächst drei wichtige Wissenspunkte in js hervorheben: Dies, Prototyp und Konstruktor.

Lassen Sie uns mehrere Möglichkeiten zum Definieren (Simulieren) von Klassen zusammenfassen:

1.Fabrikmuster

function createObject(name,age){
  var obj = new Object();
  obj.name = name;
  obj.age = age;
  obj.getName = function(){
    return this.name;
  };
  obj.getAge = function(){
    return this.age;
  }
  return obj;
}
var obj2 = createObject("王五",19);
console.log(obj2.getName());
console.log(obj2.getAge());
console.log(obj2.constructor);
Nach dem Login kopieren

Factory-Modus-MethodeObjekt erstellen Der Factory-Modus kann ein Objekt mit den erforderlichen Informationen basierend auf den akzeptierten Parametern erstellen und jedes Mal ein Objekt zurückgeben enthält 2 Eigenschaften und 2 Methoden. Das Fabrikmuster löst das Problem der Erstellung ähnlicher Objekte, löst jedoch nicht das Problem der Objektidentifizierung, das heißt, es kann die Kategorie eines Objekts nicht bestimmen und es nicht als Objekt vereinheitlichen.

2.KonstruktorMethode

function Person(name,age,job){
  this.name = name;
  this.age = age;
  this.job = job;
}
Person.prototype = {
  constructor:Person,
  getName:function(){
    return this.name;
  },
  getAge:function(){
    return this.age;
  },
  getJob:function(){
    return this.job;
  }
}
var p = new Person("二麻子",18,"worker");
console.log(p.constructor);
console.log(p.getName());
console.log(p.getAge());
console.log(p.getJob());
Nach dem Login kopieren

Obwohl die Konstruktormethode den Besitz des Objekts bestimmt und den Typ des Objekts bestimmen kann, Allerdings müssen die Methoden im Konstruktor in jedem Objekt neu erstellt werden, was zu einigen Leistungsproblemen führt.

3.Prototypmuster

function Person(){
}
Person.prototype = {
  constructor:Person,
  name:"张三",
  age:21,
  job:"teacher",
  getName:function(){
    return this.name;
  },
  getJob:function(){
    return this.job;
  }
}
var p = new Person();
console.log(p.getName()); //张三
console.log(p.getJob()); //teacher
var p2 = new Person();
p2.name = "李四";
console.log(p2.getName()); //李四
Nach dem Login kopieren

Aus dem Beispielcode können wir erkennen, dass Objektinstanzen auf die Werte zugreifen können im Prototyp. Der Wert im Prototyp kann jedoch nicht überschrieben werden. Wenn in der Objektinstanz ein Attribut mit demselben Namen wie der Prototyp definiert ist, maskiert das Attribut das Attribut im Prototyp, wird jedoch nicht überschrieben.

4. Kapselung (nennen wir es jetzt so)

var Dog = {
  createDog:function(){
    var dog = {};
    dog.name = "汪汪";
    dog.sayHello = function(){
      console.log("Hello World!");
    };
    return dog;
  }
};
var dog = Dog.createDog();
dog.sayHello();
Nach dem Login kopieren

Es geht darum, den gesamten Code zu kapseln und zu verwenden Das Instanzobjekt wird als Ganzes zurückgegeben, ähnlich dem Factory-Modus.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erklärung der JQuery-Imitationsschritte für JS

Wie man Zeiteinheiten in JS vergleicht

Das obige ist der detaillierte Inhalt vonWelche Methoden gibt es zum Definieren von Klassen in js?. 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