2016-01-14 22 views
9

In einer meiner Fragen bekam ich den folgenden Code als eine der Antworten. Mein Verständnis der Sprache ist gekommen ist jetzt viel besser gekommen, habe nur eine kleine Frage.Konstruktor Konzept in Javascript

var person = function() { 
    this.firstName = ""; 
    this.lastName = ""; 
} 

person.prototype.showFullName = function() { 
    console.log(this.firstName + " " + this.lastName); 
} 

var perObj = new person(); 
perObj.firstName = "Penelope"; 
perObj.lastName = "Barrymore"; 
perObj.showFullName(); 

Betrachtet man das Objekt,

var person = function() { 
    this.firstName = ""; 
    this.lastName = ""; 
} 

und wenn ich dieses Objekt aufrufen verwenden,

var perObj = new person(); 

Ist das ähnlich wie Konstruktor Art der Sache?

der Moment, wo ein Code

var perObj = new person(); 

aufgerufen wird, werden die folgenden zwei Zeilen automatisch ausgeführt werden?

this.firstName = ""; 
this.lastName = ""; 

Und auch in einem der Blogs, die ich studierte, wenn der Dateiname Samplescript.js ist und wenn eine Funktion innerhalb dieses wie var Samplescript=function(){} den gleichen Namen geschrieben wird, verwendet wird, wird diese Funktion ein Konstruktor in Betracht gezogen werden? Bitte klären Sie mich dies.

Ich bekomme keine befriedigende Antwort in Bezug auf Konstruktor praktisch obwohl theoretisch die Dinge klar sind, in diesem Beispiel macht die Art, wie es geschrieben wird, viel klares Verständnis.

+0

http: // Javascript .info/tutorial/constructor das könnte dir helfen –

+0

Was meinst du mit "ähnlich"? Ja, 'Person' * ist * ein Konstruktor. – Bergi

Antwort

13

Zunächst ist die eine normale JavaScript-Funktion. Wenn Sie es anrufen, werden natürlich Zeilen:

this.firstName = ""; 
this.lastName = ""; 

ausgeführt. Konstruktor-Funktion ist eher ein Konzept als etwas, das wirklich in der JS-Sprache existiert. Sie benötigen Konstruktoren, um neue ähnliche Objekte zu erstellen, indem Sie new MyCtr() aufrufen. Gleichzeitig benötigen Sie regelmäßige Funktionen, um die Logik zu kapseln und sie an verschiedenen Stellen wieder verwendbar zu machen, ohne den Code kopieren oder einfügen zu müssen.

Sie können alle Funktionen in JavaScript als Konstruktor verwenden. Fügen Sie einfach das Schlüsselwort new vor dem Aufruf des Funktionsaufrufs hinzu. Diese Sache ändert den Kontext der Ausführung der Funktion. Ohne new wird die Funktion gegen global Objekt (window in einem Browser) ausgeführt. Und this Variable innerhalb der Funktion bezieht sich auf den Kontext.

Nicht jede Funktion ist bereit, ein Konstruktor zu sein. Normalerweise Konstruktor Funktionen machen etwas mit this Variable, die eine Referenz auf ein Objekt ist, das während new MyCtr() Aufruf erstellt wird. Auch Konstruktorfunktionen geben nie einen Wert zurück.

Lets auf einige Beispiele sehen (Sie können es direkt in den Browser-Konsole ausführen kann):

function foo() { 
    this.a = 1; 
} 

foo(); // using function as a regular function. Ctx is window. 
console.log(window.a); // prints "1" 
foo.call(window); // explicitly specify execution ctx. The same as just foo() call 

var instance = new foo(); // using foo as a constructor 
console.log(instance.a); // prints "1" 

// actually you can do it without new keyword 
var instance = {}; // manually create new object 
foo.call(instance); // manually call foo against this object 
console.log(instance.a); // prints "1" 

// However, the code above is not strictly equivalent to the code using new. 
// It omits the concept of prototype, but it's enough for our current task. 

In Bezug auf Funktionen und Dateien. Es gibt in der Sprache nicht so etwas wie in Java, dass jede Klasse in der separaten Datei platziert werden muss. Sie können alle Ihre Funktionen in eine Datei einfügen und sie dann als Konstruktoren verwenden oder nicht.Die beste Vorgehensweise besteht jedoch darin, eine Konstruktorfunktion (gelesen als Klasse) pro Datei (Modul genannt) zu speichern.

+3

"* Sie können alle Funktionen in JavaScript als Konstruktor verwenden. *" - nicht wahr. Es gibt konstruierbare Objekte und aufrufbare Objekte, und nicht alle sind beides. (Die mit dem 'function'-Schlüsselwort erzeugten sind jedoch) – Bergi

+0

@Bergi, meinen Sie das http://stackoverflow.com/questions/32928810/function-prototype-is-a-function#32929083? (bitte, schauen Sie auf das Ende der Antwort) –

+0

Ja, ES6 Pfeile und Methoden und andere. – Bergi

3

Es scheint einige Lücken in Ihrem Verständnis zu geben. Hoffentlich kann ich helfen.

Zuerst wird die traditionelle herkömmliche Syntax für eine Konstruktorfunktion ist function CapitalisedFunctionName()

function Person() { 
    this.firstName = ""; 
    this.lastName = ""; 
} 

Hinweis: diese kein Objekt ist. Von deiner Frage ist das nicht klar, du verstehst das.

An dieser Stelle können Sie dem Prototyp hinzufügen, von dem alle neuen Objekte, die von diesem Konstruktor erstellt werden, erben werden. Diese modifizierte Methode aus Ihrem Beispiel wird für alle neuen Objekte verfügbar sein.

Person.prototype.fullname = function() { 
    return this.firstName + " " + this.lastName; 
} 

Nun wird der Konstruktor-Funktion ermöglicht es Ihnen, neue Objektinstanzen zu erstellen. Also, wenn Sie schreiben:

var perObj = new person(); 

Sie sind Aufruf der Konstruktor Funktion, eine neue Objektinstanz zu schaffen und Zuweisen dieses Exemplar an die perObj Variable.

Wenn Sie eine neue Objektinstanz erstellen das Objekt enthält die firstName und lastName Eigenschaften, die wie so zugegriffen werden kann:

perObj.firstName; 
perObj.lastName; 

Hinweis im Moment diese nur leere Zeichenfolgen, die ihnen zugewiesen.

Und Sie können auch diese Methode aufrufen:

perObj.fullname(); 

Aber noch einmal, an dieser Stelle, perObj.fullname(); werden Sie nichts geben, weil firstName und lastName leere Strings sind.

können Sie entweder definieren sie wie Sie in Ihrem Beispiel haben: `perObj.lastName =‚Jones‘, oder man könnte sogar die Art und Weise ändern, die Sie das Objekt in erster Linie erstellen die oft die bevorzugte Methode ist:

diese

Bedenken Sie:

function Person(first, last) { 
    this.firstName = first; 
    this.lastName = last; 
} 

var perObj = new Person('Dave', 'Jones'); 

Jetzt haben perObj diese Eigenschaften vorbelegt:

perObj.firstName // Dave 
perObj.lastName // Jones 
perObj.fullname() // Dave Jones 
+1

Um genau zu sein, ist die "Person" Objekt selbst. Ich stimme jedoch zu, dass es für diese Erklärung nicht so wichtig ist. –

8

Jede Funktion in JavaScript kann als Konstruktor fungieren, wenn die Funktion mit dem neuen Operator aufgerufen wird.

Nun, was macht ein Konstruktor? erstellt/instanziiert ein Objekt aus der Konstruktorfunktion. wie es in der Abbildung gezeigt wird.

enter image description here

LINK, ist es sehr klar die Grundlagen erklären.

was ist this?

Wenn diese Konstruktorfunktion mit neuen, this Punkten für das neue Objekt aufgerufen wird, das bei diesem Aufruf erstellt wurde. und in diesem Objekt setzen wir firtName und lastName (es ist die Initialisierung des neuen Objekts erstellt). Jetzt

wenn wir hinzufügen, Methoden zum Prototyp des Konstrukteurs, dass zwischen allen Objekten gemeinsam genutzt wird erstellt der Konstruktor-Funktion (Bild erklärt es etwas mehr leuchtet)

und in Bezug auf Ihre letzte Abfrage " Und auch in einem der Blogs, die ich untersuchte, wenn der Dateiname Samplescript.js ist und wenn eine Funktion geschrieben wird, die den gleichen Namen wie var Samplescript = function() {} verwendet, wird diese Funktion als Konstruktor betrachtet? Ich das "

jede Funktion in JavaScript kann als ein Konstrukt fungieren oder wenn die Funktion mit einem neuen Operator aufgerufen wird, und es ist nicht die Art, wie der Blog sagt.

so stoppen Sie bitte, dass Blog zu lesen, die Verbindung i vorgesehen ist ein sehr guter Ausgangspunkt

+0

Upvoted. Danke für den Link. Obwohl ich jetzt keine Zeit habe, es durchzugehen, scheint es sehr informativ und wertvoll zu sein. – LiweiZ

1

Jede Funktion, die mit new Operator fungiert als Konstruktor aufgerufen wird, so wird this auf das neue Objekt und Punkte zugewiesen werden es. Außerdem wird der Code innerhalb des Konstruktors ausgeführt und das neue Objekt (perObj) erhält Eigenschaften.

1

Es gibt einige Möglichkeiten, Javascript-Klassen zu definieren und sie mit einem Konstruktor aufzurufen. Aber denken Sie daran, dass JavaScript eigentlich klassenlos ist.

  1. verwenden, um eine Funktion
  2. Die Verwendung von Objektliterale
  3. A Singleton eine Funktion

Ein exzellenter Artikel darüber finden Sie hier: 3 ways to define a Javascript class