05. Κατασκευαστές (constructors) αντικειμένων JavaScript

Object Constructors


Παράδειγμα

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

Δοκιμάστε τον εαυτό σας »

Θεωρείται καλή πρακτική να ονομάζουμε τις συναρτήσεις του κατασκευαστή με ένα κεφαλαίο πρώτο γράμμα.


Τύποι αντικειμένων (Blueprints) (Classes)

Τα παραδείγματα από τα προηγούμενα κεφάλαια είναι περιορισμένα. Δημιουργούν μόνο μεμονωμένα αντικείμενα.

Μερικές φορές χρειαζόμαστε ένα “blueprint” για τη δημιουργία πολλών αντικειμένων του ίδιου τύπου.

Ο τρόπος δημιουργίας ενός “τύπου αντικειμένου” γίνεται με την χρήση της συνάρτησης κατασκευής αντικειμένων (object constractor function) .

Στο παραπάνω παράδειγμα, η function Person() είναι μια function κατασκευής αντικειμένου.

Αντικείμενα του ίδιου τύπου δημιουργούνται καλώντας τη function του κατασκευαστή με τη λέξη-κλειδί new:

var myFather = new Person("John", "Doe", 50, "blue");
var myMother = new Person("Sally", "Rally", 48, "green");

Δοκιμάστε τον εαυτό σας »


Η λέξη-κλειδί this

Στη JavaScript, αυτό που ονομάζεται this είναι το αντικείμενο που “κατέχει” τον κώδικα.

Η τιμή του this, όταν χρησιμοποιείται σε ένα αντικείμενο, είναι το ίδιο το αντικείμενο.

Σε μια συνάρτηση κατασκευαστή το this δεν έχει τιμή. Είναι ένα υποκατάστατο για το νέο αντικείμενο. Η τιμή του this θα γίνει το νέο αντικείμενο όταν θα δημιουργηθεί ένα νέο αντικείμενο.

Σημειώστε ότι το this δεν είναι μεταβλητή. Είναι μια λέξη-κλειδί. Δεν μπορείτε να αλλάξετε την τιμή του this.


Προσθήκη ιδιότητας σε αντικείμενο

Η προσθήκη μιας νέας ιδιότητας σε ένα υπάρχον αντικείμενο είναι εύκολη:

Παράδειγμα

myFather.nationality = "English";

Δοκιμάστε τον εαυτό σας »

Η ιδιότητα θα προστεθεί στο myFather. Όχι στο myMother. (Όχι σε αντικείμενα του person).


Προσθήκη μιας μεθόδου σε ένα αντικείμενο

Η προσθήκη μιας νέας μεθόδου σε ένα υπάρχον αντικείμενο είναι εύκολη:

Παράδειγμα

myFather.name = function () {
  return this.firstName + " " + this.lastName;
};

Δοκιμάστε τον εαυτό σας »

Η μέθοδος θα προστεθεί στο myFather. Όχι στο myMother. (Όχι σε άλλα person αντικείμενα).


Προσθήκη ιδιότητας σε κατασκευαστή

Δεν μπορείτε να προσθέσετε μια νέα ιδιότητα σε έναν κατασκευαστή αντικειμένου με τον ίδιο τρόπο που προσθέτετε μια νέα ιδιότητα σε ένα υπάρχον αντικείμενο:

Παράδειγμα

Person.nationality = "English";

Δοκιμάστε τον εαυτό σας »

Για να προσθέσετε μια νέα ιδιότητα σε έναν κατασκευαστή, πρέπει να την προσθέσετε στη συνάρτηση της κατασκευής:

Παράδειγμα

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
  this.nationality = "English";
}

Δοκιμάστε τον εαυτό σας »

Με αυτόν τον τρόπο οι ιδιότητες αντικειμένου μπορούν να έχουν προεπιλεγμένες τιμές.


Προσθήκη μιας μεθόδου σε έναν κατασκευαστή

Η συνάρτηση του κατασκευαστή μπορεί επίσης να ορίσει μεθόδους:

Παράδειγμα

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
  this.name = function() {return this.firstName + " " + this.lastName;};
}

Δοκιμάστε τον εαυτό σας »

Δεν μπορείτε να προσθέσετε μια νέα μέθοδο σε έναν κατασκευαστή αντικειμένου με τον ίδιο τρόπο που προσθέτετε μια νέα μέθοδο σε ένα υπάρχον αντικείμενο.

Η προσθήκη μεθόδων σε έναν κατασκευαστή αντικειμένου πρέπει να γίνει μέσα στη συνάρτηση του κατασκευαστή:

Παράδειγμα

function Person(firstName, lastName, age, eyeColor) {
  this.firstName = firstName; 
  this.lastName = lastName;
  this.age = age;
  this.eyeColor = eyeColor;
  this.changeName = function (name) {
    this.lastName = name;
  };
}

Η συνάρτηση changeName() εκχωρεί την τιμή του name στην ιδιότητα lastName του person.

Τώρα μπορείτε να δοκιμάσετε:

myMother.changeName("Doe");

Δοκιμάστε τον εαυτό σας »

Η JavaScript γνωρίζει σε ποιο πρόσωπο μιλάτε για “υποκαθιστώντας” to this με το myMother.


Ενσωματωμένοι κατασκευαστές JavaScript

Το JavaScript έχει ενσωματωμένους κατασκευαστές για εγγενή (native) αντικείμενα:

Παράδειγμα

var x1 = new Object();    // A new Object object
var x2 = new String();    // A new String object
var x3 = new Number();    // A new Number object
var x4 = new Boolean();   // A new Boolean object
var x5 = new Array();     // A new Array object
var x6 = new RegExp();    // A new RegExp object
var x7 = new Function();  // A new Function object
var x8 = new Date();      // A new Date object

Δοκιμάστε τον εαυτό σας »

Το Math() αντικείμενο δεν βρίσκεται στη λίστα. Το Math είναι ένα global αντικείμενο. Η new λέξη-κλειδί δεν μπορεί να χρησιμοποιηθεί στο Math.


Το ήξερες;

Όπως μπορείτε να δείτε παραπάνω, η JavaScript έχει εκδοχές αντικειμένου για τους πρωταρχικούς τύπους δεδομένων StringNumberκαι Boolean. Αλλά δεν υπάρχει κανένας λόγος για τη δημιουργία σύνθετων αντικειμένων. Οι πρωταρχικές τιμές είναι πολύ πιο γρήγορες.

ΕΠΙΣΗΣ:

Χρησιμοποιήστε literals αντικειμένου { }αντί για new Object().

Χρησιμοποιήστε literals συμβολοσειράς ""αντί για new String().

Χρησιμοποιήστε literals αριθμών 12345 αντί για new Number().

Χρησιμοποιήστε boolean literals true / falseαντί για new Boolean().

Χρησιμοποιήστε literals πινάκων [ ]αντί για new Array().

Χρησιμοποιήστε τα πρότυπα literals /()/αντί για new RegExp().

Χρησιμοποιήστε εκφράσεις function () {}αντί για new Function().

Παράδειγμα

var x1 = {};            // new object
var x2 = "";            // new primitive string
var x3 = 0;             // new primitive number
var x4 = false;         // new primitive boolean
var x5 = [];            // new array object
var x6 = /()/           // new regexp object
var x7 = function(){};  // new function object

Δοκιμάστε τον εαυτό σας »


Αντικείμενα συμβολοσειρών

Κανονικά, οι συμβολοσειρές δημιουργούνται ως primitives: var firstName = "John"

Αλλά οι συμβολοσειρές μπορούν επίσης να δημιουργηθούν ως αντικείμενα που χρησιμοποιούν τη λέξη-κλειδί new:var firstName = new String("John")

Μάθετε γιατί οι συμβολοσειρές δεν πρέπει να δημιουργούνται ως αντικείμενα στο κεφάλαιο Συμβολοσειρές JavaScript.


Αντικείμενα αριθμών

Κανονικά, οι αριθμοί δημιουργούνται ως primitives: var x = 123

Αλλά οι αριθμοί μπορούν επίσης να δημιουργηθούν ως αντικείμενα που χρησιμοποιούν τη newλέξη-κλειδί:var x = new Number(123)

Μάθετε γιατί οι αριθμοί δεν πρέπει να δημιουργούνται ως αντικείμενα στο κεφάλαιο Αριθμοί JavaScript.


Boolean αντικείμενα

Κανονικά, τα booleans δημιουργούνται ως primitives: var x = false

Μπορούν επίσης να δημιουργηθούν booleans ως αντικείμενα που χρησιμοποιούν τη newλέξη-κλειδί:var x = new Boolean(false)

Μάθετε γιατί τα booleans δεν πρέπει να δημιουργούνται ως αντικείμενο στο κεφάλαιο JS Booleans .


Days
Hours
Minutes

05. Κατασκευαστές (constructors) αντικειμένων JavaScript

Κοινοποίηση

Share on facebook
Share on twitter

Ακολουθήστε μας

Αρέσει σε %d bloggers: