14. Αντικείμενα (objects) JavaScript

JS Objects


Αντικείμενα πραγματικής ζωής, ιδιότητες και μέθοδοι

Στην πραγματική ζωή, ένα αυτοκίνητο είναι ένα αντικείμενο .

Ένα αυτοκίνητο έχει ιδιότητες όπως το βάρος και το χρώμα, και μεθόδους όπως η εκκίνηση και το σταμάτημα:

ΑντικείμενοΙδιότητεςΜέθοδοι

car.name = Smart

car.model = fortwo

car.weight = 740kg

car.color = πορτοκαλί – μαύρο

car.start ()

car.drive ()

car.brake ()

car.stop ()

Όλα τα αυτοκίνητα έχουν τις ίδιες ιδιότητες , αλλά οι τιμές των ιδιοτήτων τους διαφέρουν από το αυτοκίνητο στο αυτοκίνητο.

Όλα τα αυτοκίνητα έχουν τις ίδιες μεθόδους , αλλά οι μέθοδοι εκτελούνται σε διαφορετικούς χρόνους .


Αντικείμενα JavaScript

Έχετε ήδη μάθει ότι οι μεταβλητές JavaScript είναι δοχεία για τιμές δεδομένων.

Αυτός ο κώδικας εκχωρεί μια απλή τιμή (Smart) σε μια μεταβλητή που ονομάζεται αυτοκίνητο:

var car = "Smart";

Δοκιμάστε το »

Τα αντικείμενα είναι επίσης μεταβλητές. Αλλά τα αντικείμενα μπορούν να περιέχουν πολλές τιμές.

Αυτός ο κώδικας εκχωρεί πολλές τιμές (Smart, fortwo, πορτοκαλί – μαύρο) σε μια μεταβλητή που ονομάζεται car:

var car = {type:"Smart", model:"fortwo", color:"πορτοκαλί - μαύρο"};

Δοκιμάστε το »

Οι τιμές γράφονται ως ζεύγη όνομα:τιμή (όνομα και τιμή που χωρίζονται από πάνω-κάτω τελεία).

Τα αντικείμενα JavaScript είναι δοχεία για ονοματισμένες τιμές που ονομάζονται ιδιότητες ή μέθοδοι.


Ορισμός αντικειμένου

Ορίζετε (και δημιουργείτε) ένα αντικείμενο JavaScript με ένα αντικείμενο σταθερών τιμών:

Παράδειγμα

var person = {firstName:"Γιάννης", lastName:"Ιωάννου", age:50, eyeColor:"μπλε"};

Δοκιμάστε το »

Τα διαστήματα και οι αλλαγές γραμμής δεν είναι σημαντικά. Ο ορισμός αντικειμένου μπορεί να εκτείνεται σε πολλές γραμμές:

Παράδειγμα

var person = {
  firstName: "Γιάννης",
  lastName: "Ιωάννου",
  age: 50,
  eyeColor: "μπλε"
};

Δοκιμάστε το »


Ιδιότητες αντικειμένου

Τα ζεύγη όνομα:τιμή στα αντικείμενα JavaScript ονομάζονται ιδιότητες :

ΙδιότηταΤιμή ιδιότητας
firstNameΓιάννης
lastNameΙωάννου
age50
eyeColorμπλε

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

Μπορούμε να έχουμε πρόσβαση σε ιδιότητες αντικειμένου με δύο τρόπους:

objectName.propertyName

ή

objectName["propertyName"]

Παράδειγμα1

person.lastName;

Δοκιμάστε το »

Παράδειγμα2

person["lastName"];

Δοκιμάστε το »


Μέθοδοι αντικειμένων

Τα αντικείμενα μπορούν επίσης να έχουν μεθόδους .

Οι μέθοδοι είναι ενέργειες που μπορούν να εκτελεστούν σε αντικείμενα.

Οι μέθοδοι αποθηκεύονται στις ιδιότητες ως ορισμοί συναρτήσεων.

ΙδιοκτησίαΑξία περιουσίας
firstnameΓιάννης
lastNameΙωάννου
age50
eyeColorμπλε
fullNamefunction() {return this.firstName + ” ” + this.lastName;}

Μια μέθοδος είναι μια συνάρτηση αποθηκευμένη ως ιδιότητα.


Παράδειγμα

var person = {
  firstName: "Γιάννης",
  lastName : "Ιωάννου",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

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

Σε έναν ορισμό συνάρτησης, το thisαναφέρεται στον “ιδιοκτήτη” της συνάρτησης.

Στο παραπάνω παράδειγμα, το thisείναι το αντικείμενο person που “κατέχει” τη fullName function.

Με άλλα λόγια, this.firstName σημαίνει την firstNameιδιότητα αυτού του αντικειμένου (this object).

Διαβάστε περισσότερα σχετικά με τη λέξη-κλειδί this στο JavaScript λέξη-κλειδί this.


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

Μπορούμε να προσπελάσουμε μια μέθοδο αντικειμένου με την ακόλουθη σύνταξη:

objectName.methodName()

Παράδειγμα

name = person.fullName();

Δοκιμάστε το »

Αν έχετε πρόσβαση σε μια μέθοδο χωρίς τις () παρενθέσεις, θα επιστρέψει τον ορισμό της συνάρτησης:

Παράδειγμα

name = person.fullName;

Δοκιμάστε το »


Μη δηλώνετε συμβολοσειρές, αριθμούς και booleans ως αντικείμενα!

Όταν δηλώνεται μια μεταβλητή JavaScript με τη λέξη-κλειδί “new“, η μεταβλητή δημιουργείται ως αντικείμενο:

var x = new String();        // Declares x as a String object
var y = new Number();        // Declares y as a Number object
var z = new Boolean();       // Declares z as a Boolean object

Αποφύγετε τα StringNumber και  Boolean αντικείμενα. Περιπλέκουν τον κώδικα σας και επιβραδύνουν την ταχύτητα εκτέλεσης.

Θα μάθετε περισσότερα σχετικά με αντικείμενα αργότερα σε αυτό το σεμινάριο.


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

Ασκηση:

Ειδοποίηση "John"εξάγοντας πληροφορίες από το personαντικείμενο.

var person = {
  Όνομα: "John",
  lastName: "Doe"
},

συναγερμός() ·

Υποβολή απάντησης “

Ξεκινήστε την Άσκηση


Days
Hours
Minutes

14. Αντικείμενα (objects) JavaScript

Κοινοποίηση

Share on facebook
Share on twitter

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

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