OOJS: Αντικειμενοστρεφής JavaΕκμάθηση σεναρίου με παράδειγμα

Τι περιλαμβάνει το OOPS Concept JavaΓραφή;

Πολλές φορές, οι μεταβλητές ή οι πίνακες δεν επαρκούν για την προσομοίωση πραγματικών καταστάσεων. JavaΤο Script σάς επιτρέπει να δημιουργείτε αντικείμενα που λειτουργούν σαν αντικείμενα της πραγματικής ζωής. Ένας μαθητής ή ένα σπίτι μπορεί να είναι ένα αντικείμενο που έχει πολλά μοναδικά χαρακτηριστικά. Μπορείτε να δημιουργήσετε ιδιότητες και μεθόδους στα αντικείμενά σας για να διευκολύνετε τον προγραμματισμό. Εάν το αντικείμενό σας είναι ένας μαθητής, θα έχει ιδιότητες όπως όνομα, επώνυμο και αναγνωριστικό, καθώς και μεθόδους όπως calculateRank ή changeAddress. Εάν το αντικείμενό σας είναι ένα σπίτι, θα έχει ιδιότητες όπως αριθμός δωματίων, χρώμα βαφής και τοποθεσία, καθώς και μεθόδους όπως calculateArea ή changeOwner.

Αντικειμενοστρεφής προγραμματισμός σε JavaΕπομένως, το σενάριο βασίζεται σε τέσσερις ιδέες που θα συναντήσετε σε αυτήν τη σελίδα: ομάδαping κατάσταση και συμπεριφορά σε ένα αντικείμενο, επαναχρησιμοποιώντας ένα σχέδιο μέσω ενός κατασκευαστή, κοινοποιώντας μεθόδους μέσω του πρωτοτύπου και περιορίζοντας την άμεση πρόσβαση σε εσωτερικά δεδομένα. Εάν είστε νέοι στη γλώσσα, ξεκινήστε με αυτό εισαγωγή στο JavaΓραφή και μετά επιστρέψτε εδώ.

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

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

var objName = new Object();
objName.property1 = value1;
objName.property2 = value2;
objName.method1 = function()
{
  // line of code
}

Ή, χρησιμοποιώντας τη μικρότερη κυριολεκτική μορφή αντικειμένου:

var objName = { property1: value1, property2: value2, method1: function()
{
  // lines of code
} };

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

Μπορείτε να αποκτήσετε πρόσβαση σε μια ιδιότητα ενός αντικειμένου με συμβολισμό κουκκίδων και μπορείτε να καλέσετε μια μέθοδο προσθέτοντας παρενθέσεις:

objectname.propertyname;   // read a property
objectname.methodname();   // call a method
objectname["propertyname"]; // bracket notation, useful for dynamic keys

Δοκιμάστε μόνοι σας αυτό το Παράδειγμα:

<html>
<head>
	<title>Objects!!!</title>
	<script type="text/javascript">
      var student = new Object();
      student.fName = "John";
      student.lName = "Smith";
      student.id = 5;
      student.markE = 76;
      student.markM = 99;
      student.markS = 87;
      student.calculateAverage = function()
      {
      	return (student.markE + student.markM + student.markS)/3;
      };
      student.displayDetails = function()
      {
        document.write("Student Id: " + student.id + "<br />");
        document.write("Name: " + student.fName + " " + student.lName + "<br />");
        var avg = student.calculateAverage();
        document.write("Average Marks: " + avg);
      };
		student.displayDetails();
	</script>
</head>
<body>
</body>
</html>

Παραγωγή:

Student Id: 5
Name: John Smith
Average Marks: 87.33333333333333

Κατασκευαστής OOPS

Η δημιουργία αντικειμένων, ένα κάθε φορά, δεν είναι τόσο χρήσιμη, επειδή θα έπρεπε να επαναλαμβάνετε τον ίδιο κώδικα για κάθε μαθητή. Εδώ μπαίνει στο παιχνίδι ο κατασκευαστής αντικειμένων. Ένας κατασκευαστής είναι μια συνηθισμένη συνάρτηση που καλείται με νέος λέξη-κλειδί; ορίζει έναν τύπο αντικειμένου που μπορεί να επαναχρησιμοποιηθεί για κάθε μεμονωμένη παρουσία.

Μέσα σε έναν κατασκευαστή, αυτό αναφέρεται στο νέο αντικείμενο που κατασκευάζεται, επομένως κάθε στιγμιότυπο λαμβάνει το δικό του αντίγραφο των τιμών που μεταβιβάζονται. Σχετικές τιμές, όπως οι βαθμολογίες, συχνά αποθηκεύονται σε ένα παράταξη ώστε να μπορούν να ολοκληρωθούν με ένα μόνο πέρασμα.

Δοκιμάστε μόνοι σας αυτό το Παράδειγμα:

<html>
<head>
	<script type="text/javascript">
		function Student(first, last, id, english, maths, science)
        {
          this.fName = first;
          this.lName = last;
          this.id = id;
          this.markE = english;
          this.markM = maths;
          this.markS = science;
          this.calculateAverage = function()
          {
         	 return (this.markE + this.markM + this.markS)/3;
          }
		  this.displayDetails = function()
		  {
            document.write("Student Id: " + this.id + "<br />");
            document.write("Name: " + this.fName + " " + this.lName + "<br />");
            var avg = this.calculateAverage();
            document.write("Average Marks: " + avg + "<br /><br />");
		  }
		}
        var st1 = new Student("John", "Smith", 15, 85, 79, 90);
        var st2 = new Student("Hannah", "Turner", 23, 75, 80, 82);
        var st3 = new Student("Kevin", "White", 4, 93, 89, 90);
        var st4 = new Student("Rose", "Taylor", 11, 55, 63, 45);
        st1.displayDetails();
        st2.displayDetails();
        st3.displayDetails();
        st4.displayDetails();
	</script>
</head>
<body>
</body>
</html>

Παραγωγή:

Student Id: 15
Name: John Smith
Average Marks: 84.66666666666667

Student Id: 23
Name: Hannah Turner
Average Marks: 79

Student Id: 4
Name: Kevin White
Average Marks: 90.66666666666667

Student Id: 11
Name: Rose Taylor
Average Marks: 54.333333333333336

Βρόχος μέσω των ιδιοτήτων ενός αντικειμένου

Σύνταξη:

for (variablename in objectname)
{
  // lines of code to be executed
}

Το για/μέσα βρόχος χρησιμοποιείται συνήθως για να περιηγηθείτε στις ιδιότητες ενός αντικειμένου. Μπορείτε να δώσετε οποιοδήποτε όνομα στο μεταβλητή, αλλά το όνομα του αντικειμένου πρέπει να ταιριάζει με ένα αντικείμενο που ήδη υπάρχει. Σε κάθε πέρασμα, η μεταβλητή διατηρεί την ιδιότητα κλειδί ως συμβολοσειρά, επομένως η τιμή διαβάζεται με συμβολισμό παρένθεσης όπως υπάλληλος[x].

Δοκιμάστε μόνοι σας αυτό το Παράδειγμα:

<html>
<head>
	<script type="text/javascript">
		var employee={first:"John", last:"Doe", department:"Accounts"};
        var details = "";
        document.write("<b>Using for/in loops </b><br />");
        for (var x in employee)
        {
          details = x + ": " + employee[x];
          document.write(details + "<br />");
        }
	</script>
</head>
<body>
</body>
</html>

Παραγωγή:

Using for/in loops
first: John
last: Doe
department: Accounts

Δύο σημεία που αξίζει να θυμόμαστε. Ένας βρόχος for/in επισκέπτεται επίσης απαριθμήσιμες ιδιότητες που κληρονομούνται μέσω της αλυσίδας πρωτοτύπων, επομένως ένας φρουρός όπως Object.prototype.hasOwnProperty.call(υπάλληλος, x) προστίθεται συχνά. Για απλά αντικείμενα δεδομένων, Object.keys(υπάλληλος) or Object.entries(employee) είναι συνήθως πιο ξεκάθαρο, επειδή και τα δύο επιστρέφουν μόνο τις ιδιότητες του αντικειμένου.

Ποια είναι η σύνταξη της κλάσης ES6; JavaΓραφή;

Το ECMAScript 2015, που συνήθως ονομάζεται ES6, πρόσθεσε το τάξη λέξη-κλειδί. Μια κλάση είναι συντακτική ζάχαρη πάνω στο πρωτότυπο σύστημα που χρησιμοποιεί ήδη η παραπάνω συνάρτηση κατασκευαστή: δεν εισήχθη κανένα νέο μοντέλο αντικειμένου. Εκτέλεση τύπος μαθητή σε μια κλάση εξακολουθεί να επιστρέφει τη συμβολοσειρά "function" και κάθε μέθοδος που γράφεται στο σώμα της κλάσης εγκαθίσταται σε Φοιτητής.πρωτότυπο, που σημαίνει ότι όλες οι περιπτώσεις μοιράζονται ένα αντίγραφο αυτής της μεθόδου αντί κάθε αντικείμενο να φέρει το δικό του.

Η σύνταξη αφαιρεί επίσης ορισμένες ακατέργαστες ακμές. Τα σώματα κλάσεων εκτελούνται πάντα σε αυστηρή λειτουργία, καλώντας μια κλάση χωρίς νέος δημιουργεί ένα σφάλμα τύπου (TypeError) αντί να μολύνει σιωπηλά το καθολικό αντικείμενο, και οι getters, οι setters και τα στατικά μέλη έχουν ένα ειδικό μέρος για να ζουν. Το αποτέλεσμα είναι μικρότερος κώδικας που εκφράζει την ίδια πρόθεση.

class Student {
  constructor(first, last, id, english, maths, science) {
    this.fName = first;
    this.lName = last;
    this.id = id;
    this.marks = [english, maths, science];
  }

  calculateAverage() {
    const total = this.marks.reduce((sum, m) => sum + m, 0);
    return total / this.marks.length;
  }

  displayDetails() {
    console.log("Student Id: " + this.id);
    console.log("Name: " + this.fName + " " + this.lName);
    console.log("Average Marks: " + this.calculateAverage().toFixed(2));
  }
}

const st1 = new Student("John", "Smith", 15, 85, 79, 90);
st1.displayDetails();
console.log(typeof Student);
console.log(st1.calculateAverage === Student.prototype.calculateAverage);

Παραγωγή:

Student Id: 15
Name: John Smith
Average Marks: 84.67
function
true

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

Συνάρτηση Κατασκευαστή έναντι Κλάσης ES6

Πώς να Υλοποιήσετε την Κληρονομικότητα Χρησιμοποιώντας extends και super

Η κληρονομικότητα επιτρέπει σε έναν εξειδικευμένο τύπο να επαναχρησιμοποιεί τις ιδιότητες και τις μεθόδους ενός πιο γενικού τύπου. Πριν από το ES6, αυτό σήμαινε την καλωδίωση της αλυσίδας πρωτοτύπων χειροκίνητα σε τρία ξεχωριστά βήματα και ήταν εύκολο να ξεχάσει κανείς ένα από αυτά.

function Person(fName, lName) {
  this.fName = fName;
  this.lName = lName;
}

Person.prototype.introduce = function () {
  return "I am " + this.fName + " " + this.lName;
};

function Student(fName, lName, id) {
  Person.call(this, fName, lName);   // 1. borrow the parent constructor
  this.id = id;
}

Student.prototype = Object.create(Person.prototype); // 2. link the chain
Student.prototype.constructor = Student;              // 3. repair constructor

var st = new Student("Kevin", "White", 4);
console.log(st.introduce());
console.log(st instanceof Person);

Παραγωγή:

I am Kevin White
true

The Επεκτείνεται λέξη-κλειδί εκτελεί και τα τρία βήματα για εσάς και μεγάλος παρέχει έναν καθαρό τρόπο επικοινωνίας με τον γονέα. Υπάρχουν δύο ξεχωριστές χρήσεις του μεγάλος:

• σούπερ(…) ως κλήση εκτελεί τον γονικό κατασκευαστή. Ισχύει μόνο μέσα σε έναν παράγωγο κατασκευαστή και πρέπει να εκτελεστεί πριν αγγίξετε αυτό, διαφορετικά προκύπτει ένα ReferenceError.
• super.method() καθώς μια αναζήτηση ιδιότητας καλεί την γονική έκδοση μιας μεθόδου που το παιδί έχει παρακάμψει, και έτσι επεκτείνετε τη συμπεριφορά αντί να την αντικαταστήσετε.

class Person {
  constructor(fName, lName) {
    this.fName = fName;
    this.lName = lName;
  }

  introduce() {
    return "I am " + this.fName + " " + this.lName;
  }
}

class Student extends Person {
  constructor(fName, lName, id) {
    super(fName, lName);   // must run before "this" is used
    this.id = id;
  }

  introduce() {
    return super.introduce() + ", roll number " + this.id;
  }
}

const st = new Student("Hannah", "Turner", 23);
console.log(st.introduce());
console.log(st instanceof Student, st instanceof Person);
console.log(Object.getPrototypeOf(Student.prototype) === Person.prototype);

Παραγωγή:

I am Hannah Turner, roll number 23
true true
true

Η τρίτη γραμμή είναι η σημαντική. Επιβεβαιώνει ότι Επεκτείνεται παρήγαγε ακριβώς τον πρωτότυπο σύνδεσμο η χειροκίνητη έκδοση κατασκευάστηκε χειροκίνητα, επομένως οι κλάσεις δεν αντικατέστησαν την αλυσιδωτή σύνδεση πρωτοτύπων. Απλώς έκρυψαν το στερεότυπο. Όταν μια ιδιότητα διαβάζεται από st, η μηχανή εξετάζει την παρουσία, τότε Φοιτητής.πρωτότυπο, Τότε Πρόσωπο.πρωτότυπο, Τότε Πρωτότυπο αντικειμένου, και σταματά στην πρώτη αντιστοίχιση· αυτή η διαδρομή αναζήτησης είναι η αλυσίδα πρωτοτύπου.

Πώς να επιτύχετε ενθυλάκωση με πεδία ιδιωτικής κλάσης

Η ενθυλάκωση σημαίνει διατήρησηping η εσωτερική κατάσταση είναι απρόσιτη, έτσι ώστε να μπορεί να αλλάξει μόνο μέσω μεθόδων που ελέγχετε. Για χρόνια JavaΟι προγραμματιστές σεναρίων το προσποιήθηκαν με μια υπογράμμιση στην αρχή, αλλά με ένα όνομα όπως _ισορροπία είναι απλώς μια σύμβαση και οποιοσδήποτε κώδικας μπορεί ακόμα να την αντικαταστήσει. Σύγχρονο JavaΤο σενάριο προσφέρει πραγματικό απόρρητο: ένα πεδίο του οποίου το όνομα αρχίζει με # είναι προσβάσιμο μόνο μέσα στο σώμα της κλάσης που το δηλώνει.

Τα ιδιωτικά χωράφια προσφέρουν τρία συγκεκριμένα οφέλη:

• Πρέπει να δηλωθούν στο σώμα της κλάσης πριν από τη χρήση, το οποίο καταγράφει την εσωτερική κατάσταση του τύπου σε ένα μέρος.
• Είναι αόρατοι σε Object.keys, JSON.stringify, και for/in, έτσι ώστε η εσωτερική κατάσταση να μην διαρρεύσει στην σειριοποιημένη έξοδο.
• Το άγγιγμα ενός ιδιωτικού πεδίου εκτός της κλάσης είναι ένα συντακτικό σφάλμα, που εντοπίζεται πριν καν εκτελεστεί ο κώδικας, και όχι ένα σιωπηλό σφάλμα.

class BankAccount {
  #balance = 0;

  constructor(owner, opening) {
    this.owner = owner;
    this.#balance = opening;
  }

  deposit(amount) {
    if (amount <= 0) {
      return "Deposit must be positive";
    }
    this.#balance += amount;
    return this.owner + " balance: " + this.#balance;
  }

  get balance() {
    return this.#balance;
  }
}

const acc = new BankAccount("John", 500);
console.log(acc.deposit(250));
console.log(acc.deposit(-40));
console.log("Read via getter: " + acc.balance);
console.log("Own keys: " + Object.keys(acc));
console.log("JSON: " + JSON.stringify(acc));

Παραγωγή:

John balance: 750
Deposit must be positive
Read via getter: 750
Own keys: owner
JSON: {"owner":"John"}

Η ισορροπία δεν εμφανίζεται ποτέ Object.keys ή στη συμβολοσειρά JSON, και η αρνητική κατάθεση απορρίπτεται από τη μέθοδο αντί να καταστρέφει το πεδίο. λήψη ισορροπίας() Το accessor εκθέτει μια προβολή μόνο για ανάγνωση, η οποία είναι ο συνήθης τρόπος για την ασφαλή δημοσίευση ιδιωτικής κατάστασης.

Τώρα που τα αντικείμενα, τα πρωτότυπα, οι κλάσεις, η κληρονομικότητα και η ενθυλάκωση έχουν νόημα, συνεχίστε να δημιουργείτε. Εξασκηθείτε στις βασικές αρχές με αυτά. πρακτικός JavaΠαραδείγματα κώδικα σεναρίου, επεξεργαστείτε διαδραστικό JavaΑσκήσεις σεναρίου, εφαρμόστε κλάσεις σε αλγόριθμους όπως γρήγορη ταξινόμηση σε JavaΓραφή, τακτοποιήστε την έξοδο χρησιμοποιώντας JavaΜορφοποίηση συμβολοσειράς σεναρίου, και δείτε πόσο στατικό typing αλλάζει το σχεδιασμό αντικειμένων TypeScript.

Συχνές Ερωτήσεις