Σε αυτό το σεμινάριο, θα μάθετε για πρωτότυπα σε JavaScript με τη βοήθεια παραδειγμάτων.
Πριν μάθετε τα πρωτότυπα, φροντίστε να ελέγξετε αυτά τα μαθήματα:
- Αντικείμενα JavaScript
- Λειτουργία κατασκευαστή JavaScript
Όπως γνωρίζετε, μπορείτε να δημιουργήσετε ένα αντικείμενο σε JavaScript χρησιμοποιώντας μια συνάρτηση κατασκευαστή αντικειμένων. Για παράδειγμα,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person();
Στο παραπάνω παράδειγμα, function Person()είναι μια συνάρτηση κατασκευαστή αντικειμένων. Έχουμε δημιουργήσει δύο αντικείμενα person1και person2από αυτό.
Πρωτότυπο JavaScript
Σε JavaScript, κάθε λειτουργία και αντικείμενο έχει μια ιδιότητα που ονομάζεται πρωτότυπο από προεπιλογή. Για παράδειγμα,
function Person () ( this.name = 'John', this.age = 23 ) const person = new Person(); // checking the prototype value console.log(Person.prototype); // (… )
Στο παραπάνω παράδειγμα, προσπαθούμε να αποκτήσουμε πρόσβαση στην πρωτότυπη ιδιότητα μιας Personσυνάρτησης κατασκευαστή.
Δεδομένου ότι το πρωτότυπο ιδιοκτησία δεν έχει καμία τιμή αυτήν τη στιγμή, δείχνει ένα κενό αντικείμενο (…).
Πρωτότυπο Κληρονομικότητα
Στο JavaScript, ένα πρωτότυπο μπορεί να χρησιμοποιηθεί για την προσθήκη ιδιοτήτων και μεθόδων σε μια συνάρτηση κατασκευαστή. Και τα αντικείμενα κληρονομούν ιδιότητες και μεθόδους από ένα πρωτότυπο. Για παράδειγμα,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person(); // adding property to constructor function Person.prototype.gender = 'male'; // prototype value of Person console.log(Person.prototype); // inheriting the property from prototype console.log(person1.gender); console.log(person2.gender);
Παραγωγή
(φύλο: "αρσενικό") αρσενικό αρσενικό
Στο παραπάνω πρόγραμμα, έχουμε προσθέσει μια νέα ιδιότητα genderστη Personσυνάρτηση κατασκευαστή χρησιμοποιώντας:
Person.prototype.gender = 'male';
Στη συνέχεια, αντικείμενο person1και person2κληρονομεί την ιδιότητα genderαπό την πρωτότυπη ιδιότητα της Personσυνάρτησης κατασκευαστή.
Ως εκ τούτου, και τα δύο αντικείμενα person1και person2μπορούν να έχουν πρόσβαση στην ιδιότητα φύλου.
Σημείωση: Η σύνταξη για την προσθήκη της ιδιότητας σε μια συνάρτηση κατασκευαστή αντικειμένων είναι:
objectConstructorName.prototype.key = 'value';
Το πρωτότυπο χρησιμοποιείται για την παροχή πρόσθετης ιδιότητας σε όλα τα αντικείμενα που δημιουργούνται από μια συνάρτηση κατασκευαστή.
Προσθέστε μεθόδους σε μια συνάρτηση κατασκευαστή χρησιμοποιώντας πρωτότυπο
Μπορείτε επίσης να προσθέσετε νέες μεθόδους σε μια συνάρτηση κατασκευαστή χρησιμοποιώντας πρωτότυπο. Για παράδειγμα,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person(); // adding a method to the constructor function Person.prototype.greet = function() ( console.log('hello' + ' ' + this.name); ) person1.greet(); // hello John person2.greet(); // hello John
Στο παραπάνω πρόγραμμα, μια νέα μέθοδος greetπροστίθεται στη Personσυνάρτηση κατασκευαστή χρησιμοποιώντας ένα πρωτότυπο.
Αλλαγή πρωτοτύπου
Εάν αλλάξει μια πρωτότυπη τιμή, τότε όλα τα νέα αντικείμενα θα έχουν την αλλαγή ιδιότητας. Όλα τα αντικείμενα που δημιουργήθηκαν προηγουμένως θα έχουν την προηγούμενη τιμή. Για παράδειγμα,
// constructor function function Person() ( this.name = 'John' ) // add a property Person.prototype.age = 20; // creating an object const person1 = new Person(); console.log(person1.age); // 20 // changing the property value of prototype Person.prototype = ( age: 50 ) // creating new object const person3 = new Person(); console.log(person3.age); // 50 console.log(person1.age); // 20
Σημείωση : Δεν πρέπει να τροποποιήσετε τα πρωτότυπα τυπικών ενσωματωμένων αντικειμένων JavaScript όπως χορδές, πίνακες κ.λπ. Θεωρείται κακή πρακτική.
Καθοδήγηση πρωτοτύπου JavaScript
Εάν ένα αντικείμενο προσπαθεί να αποκτήσει πρόσβαση στην ίδια ιδιότητα που βρίσκεται στη συνάρτηση κατασκευαστή και στο πρωτότυπο αντικείμενο, το αντικείμενο αφαιρεί την ιδιότητα από τη συνάρτηση κατασκευαστή. Για παράδειγμα,
function Person() ( this.name = 'John' ) // adding property Person.prototype.name = 'Peter'; Person.prototype.age = 23 const person1 = new Person(); console.log(person1.name); // John console.log(person1.age); // 23
Στο παραπάνω πρόγραμμα, ένα όνομα ιδιότητας δηλώνεται στη συνάρτηση κατασκευαστή και επίσης στην πρωτότυπη ιδιότητα της συνάρτησης κατασκευαστή.
Όταν το πρόγραμμα εκτελείται, person1.nameκοιτάζει στη συνάρτηση του κατασκευαστή για να δει αν υπάρχει μια ιδιότητα name. Δεδομένου ότι η συνάρτηση κατασκευαστή έχει την ιδιότητα ονόματος με τιμή 'John', το αντικείμενο παίρνει αξία από αυτήν την ιδιότητα.
Όταν το πρόγραμμα εκτελείται, person1.ageκοιτάζει στη συνάρτηση του κατασκευαστή για να δει αν υπάρχει μια ιδιότητα age. Δεδομένου ότι η συνάρτηση κατασκευαστή δεν έχει ageιδιότητα, το πρόγραμμα εξετάζει το πρωτότυπο αντικείμενο της συνάρτησης κατασκευαστή και το αντικείμενο κληρονομεί την ιδιότητα από το πρωτότυπο αντικείμενο (εάν υπάρχει).
Σημείωση : Μπορείτε επίσης να αποκτήσετε πρόσβαση στην πρωτότυπη ιδιότητα μιας συνάρτησης κατασκευαστή από ένα αντικείμενο.
function Person () ( this.name = 'John' ) // adding a prototype Person.prototype.age = 24; // creating object const person = new Person(); // accessing prototype property console.log(person.__proto__); // ( age: 24 )
Στο παραπάνω παράδειγμα, ένα personαντικείμενο χρησιμοποιείται για πρόσβαση στην ιδιότητα του πρωτοτύπου χρησιμοποιώντας __proto__. Ωστόσο, __proto__έχει καταργηθεί και θα πρέπει να αποφύγετε τη χρήση του.
