Objekt gegen Klasse gegen Funktion

73

Ich habe mich gefragt - was ist der Unterschied zwischen JavaScript-Objekten, Klassen und Funktionen? Habe ich Recht, wenn ich denke, dass Klassen und Funktionen Arten von Objekten sind?

Und was unterscheidet eine Klasse von einer Funktion? Oder sind sie wirklich dasselbe, nur der Begriff für sie ändert sich je nachdem, wie sie verwendet werden?

function func() { alert('foo'); } // a function
func(); // call the function - alerts 'foo'
var func2 = function () { alert('hello'); } // acts the same way as 'func' surely?
func2(); // alerts 'hello'

var Class = function() { alert('bar'); }; // a class
var c = new Class(); // an istance of a class - alerts 'bar'

Sicher, Klassen haben Methoden und Eigenschaften und können instanziiert werden - aber dann könnte ich dasselbe mit jeder alten Funktion tun - oder nicht?

Sean Bone
quelle
11
Klassen wurden in ECMA 6 in letzter Zeit eingeführt: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
MathuSum Mut
5
Klassen sind jetzt in vielen Javascript-Bibliotheken von post node.js usw. üblich. Es ist nicht mehr richtig zu sagen, dass es in Javascript keine Klassen gibt . Es gibt jetzt Klassen, diese werden (noch) nicht gut von Browser-Implementierungen unterstützt, aber im Zeitalter von NPM und Node.js sind Klassen ein Kernkonzept der zukünftigen Sprache (dies ist alles nur eine FYI, die ich zu dieser Zeit schätze den ersten Kommentar hier zu schreiben war richtig).
Liam

Antworten:

66

Wie Sie bereits wissen müssen, gibt es in JavaScript keine Klassen. Stattdessen können Funktionen in JavaScript so eingestellt werden, dass sie sich wie Konstruktoren verhalten, indem einem Funktionsaufruf das newSchlüsselwort vorangestellt wird . Dies ist als Konstruktormuster bekannt .

In JavaScript ist alles ein Objekt mit Ausnahme der primitiven Datentypen (Boolescher Wert, Zahl und Zeichenfolge) und undefined. Auf der anderen Seite nullhandelt es sich tatsächlich um eine Objektreferenz, obwohl Sie zunächst vielleicht etwas anderes glauben. Dies ist der Grund, warum typeof nullzurückkehrt "object".

Funktionen in JavaScript ähneln Funktionen in Lua (dh sie sind aufrufbare Objekte). Daher kann eine Funktion anstelle eines Objekts verwendet werden. In ähnlicher Weise sind Arrays auch Objekte in JavaScript. Andererseits können Objekte als assoziative Arrays betrachtet werden.

Der wichtigste Punkt ist jedoch, dass es in JavaScript keine Klassen gibt, da JavaScript eine prototypische objektorientierte Sprache ist. Dies bedeutet, dass Objekte in JavaScript direkt von anderen Objekten erben. Daher brauchen wir keinen Unterricht. Wir brauchen nur eine Möglichkeit, Objekte zu erstellen und zu erweitern.

Lesen Sie den folgenden Thread, um mehr über die prototypische Vererbung in JavaScript zu erfahren: Vorteile der prototypischen Vererbung gegenüber der klassischen?

Aadit M Shah
quelle
1
Ich danke Ihnen sehr für Ihre Antwort! Ich habe das Thema gelesen und glaube, ich verstehe es jetzt. Sie raten also, das prototypische Muster gegenüber dem Konstruktormuster zu verwenden?
Sean Bone
1
@ SeanBone: Ich empfehle, das prototypische Muster vor dem Erlernen des Konstruktormusters zu lernen, da dies das Verständnis der prototypischen Vererbung erleichtert. Das Konstruktormuster ist jedoch schneller als das prototypische Muster in JavaScript. Wenn Sie also leistungskritischen Code schreiben möchten, ist die Verwendung des Konstruktormusters sinnvoller. Trotzdem ist das prototypische Muster immer noch ziemlich schnell und Sie können sicher sein, dass Sie kaum einen zusätzlichen Leistungsschub benötigen werden. JavaScript-Interpreter optimieren Code hervorragend. Daher sollten Sie sich die meiste Zeit an das prototypische Muster halten.
Aadit M Shah
1
@bits Ich fürchte, du liegst falsch. Sie sehen, dass es in JavaScript zwei Arten von Booleschen Werten gibt: Zahlen und Zeichenfolgen - Grundelemente und umschlossene Objekte. Literalwerte in JavaScript werden als Grundelemente behandelt. Zum Beispiel der Literale true, 3.14und "Hello World!"sind alle primitiven Datentypen. Wenn Sie typeofauf sie sie zurückkommen "boolean", "number"und "string"jeweils. Mit JavaScript können Sie sie jedoch als Objekte verwenden und bei Bedarf zu Objekten zwingen. Daher können Sie Dinge wie tun "abc".slice(-1). Aus diesem Grund haben wir den valueOfOperator in JavaScript.
Aadit M Shah
8
Diese Antwort ist jetzt veraltet
Liam
1
Ja @DhavalJardosh
Liam
41

Update 2015

Es gibt Klassen in Javascript, die in älteren Browsern einfach nicht verwendet werden. Geben Sie hier die Bildbeschreibung ein

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

Es hat Konstruktoren, Erweiterungen und dergleichen.

class Cat { 
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

class Lion extends Cat {
  speak() {
    super.speak();
    console.log(this.name + ' roars.');
  }
}
Neoaptt
quelle
6
Ich denke, es ist wichtig, nicht, dass die neuen Klassenkonstruktoren Teil des neuesten JavaScript sind, also nur als solche unterstützt werden und nur eine neue Syntax sind. Sie sind tatsächlich Funktionen, die nur als syntaktischer Zucker konzipiert sind, um den Code besser zu organisieren, den sie nicht verwenden funktionieren nicht anders als die Funktionskonstruktoren.
Binvention
2
Dies sind immer noch keine "Klassen" im Sinne der klassischen Vererbung, sondern lediglich syntaktischer Zucker, der verwendet wird, um mit anderen Objekten verknüpfte Objekte (OLOO) so zu verkabeln, dass das Verhalten der klassischen Vererbung angenähert wird. Es gibt keine Klassen in JavaScript, obwohl das Schlüsselwort Ihnen diese Illusion gibt.
Andy Fusniak
18

Eine Klasse in JS:

function Animal(){  

    // Private property
    var alive=true;

    // Private method
    function fight(){ //... }   

    // Public method which can access private variables
    this.isAlive = function() { return alive; } 

    // Public property
    this.name = "Joe";
}

// Public method
Animal.prototype.play = function() { alert("Bow wow!"); }

// .. and so on

Jetzt, wenn Sie es Objekt erstellen

var obj = new Animal();

Sie können von diesem Objekt alles erwarten, was Sie von Objekten in einer anderen Sprache erwarten würden. Nur die Bemühungen, dies zu erreichen, waren etwas anders. Sie sollten sich auch mit der Vererbung in JS befassen .


Wenn ich auch auf Ihre Frage zurückkomme, werde ich sie wie folgt umformulieren:

Class  : A representation of a set with common properties.
object : One from the set with the same properties.


var Class = function() {alert('bar');}; // A set of function which alert 'bar'
var object = new Class();               // One of the functions who alert's 'bar'.
loxxy
quelle
3
Prototypbasierte Programmierung ist kein "Weg, um objektorientierte Praktiken zu emulieren". Es ist eine Möglichkeit der objektorientierten Programmierung, die lange vor JavaScript erfunden wurde, und eine Alternative zur klassenbasierten Programmierung.
ein besserer Oliver
8

JavaScript hat keine Klassen und Funktionen sind tatsächlich Objekte in JavaScript (erstklassige Bürger). Der einzige Unterschied, den Funktionsobjekte haben, besteht darin, dass sie aufrufbar sind .

function func() { alert('foo'); } // a function - Richtig

func(); // call the function - alerts 'foo' - Richtig

var func2 = function () { alert('foo'); } // same as 'func' surely?- Nein, func2ist ein anderes Objekt, das anscheinend dasselbe tut, wenn es aufgerufen wird.

var Class = function() { alert('bar'); };- Es ist eine Funktion ohne Namen in der Variablen gespeichert Class.

var c = new Class();- Ruft die Funktion auf, die beim ClassBereitstellen eines neuen leeren Objekts als thisund beim Zurückgeben dieses Objekts gespeichert ist . Von as aufgerufene Funktionen new functionA()sollen als Konstruktoren fungieren und ein neu erstelltes Objekt vorbereiten ( this). In Ihrem Fall macht der Konstruktor nichts mit dem Objekt und gibt nur Warnungen aus bar.

Mischik
quelle
3
Sie sollten den letzten Satz klarstellen.
Adrianp
3

Es gibt keine Klassen in Javascript. Es gibt jedoch Möglichkeiten, eine Funktion so zu gestalten, dass sie sich wie eine Klasse in anderen Sprachen verhält.

Eine sehr gute Erklärung wird hier gegeben , um eine Klasse in js zu definieren

Außerdem wurde in Javascript eine sehr gute Referenz für OOP gefunden

Tala
quelle
Ab ECMAScript 2015 gibt es Klassen in Javascript
Liam
@ Liam Es ist syntaktischer Zucker. Es ist immer noch eine Funktion unter der Haube.
Nikita Shahov
1
@NikitaShahov - so werden Klassen in Javascript implementiert und das bedeutet nicht, dass es keine Klassen gibt. Sogar private Mitglieder werden jetzt eine Sache. (Es ist ein Vorschlag der Stufe 3: github.com/tc39/proposal-private-methods )
Faust
3

Objekt ist der Basistyp in JavaScript, dh alle benutzerdefinierten Datentypen erben auf die eine oder andere Weise von Objekt. Wenn Sie also eine Funktion oder eine Klasse definieren [Anmerkung: JS unterstützt derzeit kein Klassenkonstrukt, wird jedoch in ECMAScript Version 6 vorgeschlagen], erbt es implizit vom Objekttyp.

Klassen werden wirklich zum Einkapseln logischer Funktionen und Eigenschaften in einen Typ / eine Entität verwendet, und Sie können sie mithilfe der Konstruktorsyntax 'neu' erstellen. Wenn Sie also eine Kundenklasse definieren, können Sie sie mehrmals instanziieren und jede Instanz / jedes Objekt kann unterschiedliche Werte haben. Sie können die Werte sogar gemeinsam nutzen, wenn Sie den Wert auf Klassenebene mithilfe eines Prototyps definieren.

Da JS das Klassenkonstrukt derzeit nicht unterstützt, können Funktionen sowohl als einzelne Methode als auch als Container für andere Funktionen oder Typen fungieren.

Ich hoffe, dass wir mit ECMAScript 6 eine klare Trennung zwischen diesen Konstrukten haben, ähnlich wie in anderen Sprachen wie C #, Java usw.

Prasad Honrao
quelle
3

Sie erhalten auch Klassen in ES6, die so aussehen:

//class
class Cat {
    //constructor
    constructor() {
        this.name = 'Snowball';
    }

    //method
    meow() {
        console.log('Hello, nyah! My name is ' + this.name + ' nyah!~');
    }
};
ShanaSkydancer
quelle
Diese Methode braucht eine "Funktion", nicht wahr?
Sorak
Völlig irrelevant, aber hallo Neko Atsume!
Isa