Επίκληση συνάρτησης JavaScript

Πίνακας περιεχομένων

Ο κώδικας μέσα σε μια συνάρτηση JavaScript θα εκτελεστεί όταν "κάτι" τον καλεί.

Επίκληση μιας συνάρτησης JavaScript

Ο κώδικας μέσα σε μια συνάρτηση δεν εκτελείται όταν η συνάρτηση είναι ορισμένη.

Ο κώδικας μέσα σε μια συνάρτηση εκτελείται όταν η συνάρτηση κληθεί.

Είναι σύνηθες να χρησιμοποιείται ο όρος "κλήση συνάρτησης" αντί για "επίκληση μια συνάρτηση».

Είναι επίσης σύνηθες να λέμε "call upon a function", "start a function" ή "εκτελέστε μια λειτουργία".

Σε αυτό το σεμινάριο, θα χρησιμοποιήσουμε επίκληση, επειδή α Η συνάρτηση JavaScript μπορεί να κληθεί χωρίς να γίνει κλήση.

Επίκληση μιας συνάρτησης ως συνάρτησης

Παράδειγμα

function myFunction(a, b) {
  
  return a * b;
}
myFunction(10, 2);           // 
  Will return 20

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>

<p>The global function (myFunction) returns the product of the arguments (a ,b):</p>

<p id="demo"></p>

<script>
function myFunction(a, b) {
  return a * b;
}
document.getElementById("demo").innerHTML = myFunction(10, 2); 
</script>

</body>
</html>

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

Στην HTML το προεπιλεγμένο καθολικό αντικείμενο είναι η ίδια η σελίδα HTML, επομένως η παραπάνω συνάρτηση "ανήκει" στο σελίδα HTML.

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

Σημείωση

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

Η myFunction() και η window.myFunction() είναι η ίδια συνάρτηση:

Παράδειγμα

function myFunction(a, b) {
    return a * b;
}
window.myFunction(10, 2);     // Will also return 20

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>

<p>Global functions automatically become window methods. Invoking myFunction() is the same as invoking window.myFunction().</p>

<p id="demo"></p>

<script>
function myFunction(a, b) {
  return a * b;
}
document.getElementById("demo").innerHTML = window.myFunction(10, 2); 
</script>

</body>
</html>

Τι είναι αυτό;

Στο JavaScript, η λέξη-κλειδί αυτή αναφέρεται σε ένα αντικείμενο.

Ποιο αντικείμενο εξαρτάται από τον τρόπο κλήσης (χρησιμοποίησης ή κλήσης) αυτό.

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

Σε μια μέθοδο αντικειμένου, αυτό αναφέρεται στο αντικείμενο.
Μόνο, αυτό αναφέρεται στο καθολικό αντικείμενο.
Σε μια συνάρτηση, αυτό αναφέρεται στο καθολικό αντικείμενο.
Σε μια συνάρτηση, σε αυστηρή λειτουργία, αυτό είναι ακαθορισμένο.
Σε ένα συμβάν, αυτό αναφέρεται στο στοιχείο που έλαβε το συμβάν.
Μέθοδοι όπως call(), apply() και bind() μπορεί να παραπέμψει αυτό σε οποιοδήποτε αντικείμενο.

Σημείωση

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

Δείτε επίσης:

Ο οδηγός JavaScript αυτό

Το Παγκόσμιο Αντικείμενο

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

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

Αυτό το παράδειγμα επιστρέφει το αντικείμενο παραθύρου ως τιμή αυτό:

Παράδειγμα

let x = myFunction();
           // x will be the window object

function myFunction() {
  return this;
}

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>

<p>In HTML the value of <b>this</b>, in a global function, is the window object.</p>

<p id="demo"></p>

<script>
let x = myFunction();
function myFunction() {
  return this;
}
document.getElementById("demo").innerHTML = x; 
</script>

</body>
</html>

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

Επίκληση μιας συνάρτησης ως μέθοδος

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

Το παρακάτω παράδειγμα δημιουργεί ένα αντικείμενο (myObject), με δύο ιδιότητες (firstName και lastName), και ένα μέθοδος (πλήρες όνομα):

Παράδειγμα

const myObject = {
  firstName:"John",
    lastName: "Doe",
    fullName: function () {
    return this.firstName + " " + this.lastName;
    }
}
myObject.fullName();         // Will return "John Doe"

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>

<p>myObject.fullName() will return John Doe:</p>

<p id="demo"></p>

<script>
const myObject = {
  firstName:"John",
  lastName: "Doe",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
document.getElementById("demo").innerHTML = myObject.fullName(); 
</script>

</body>
</html>

Η μέθοδος fullName είναι μια συνάρτηση. Η συνάρτηση ανήκει στο το αντικείμενο. Το myObject είναι ο κάτοχος της συνάρτησης.

Το πράγμα που ονομάζεται αυτό, είναι το αντικείμενο που "κατέχει" τον κώδικα JavaScript. Σε αυτήν την περίπτωση, η τιμή του αυτό είναι το myObject.

Δοκιμασε το! Αλλάξτε τη μέθοδο fullName για να επιστρέψετε την τιμή αυτό:

Παράδειγμα

const myObject = {
  firstName:"John",
    lastName: "Doe",
    fullName: function () {
      return this;
    }
}

// This will return [object Object] (the owner object)
myObject.fullName();

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>

<p>The value of <b>this</b>, in an object method, is the owner object.</p>

<p id="demo"></p>

<script>
const myObject = {
  firstName:"John",
  lastName: "Doe",
  fullName: function() {
    return this;
  }
}
document.getElementById("demo").innerHTML = myObject.fullName();
</script>

</body>
</html>

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

Επίκληση μιας συνάρτησης με έναν κατασκευαστή συναρτήσεων

Εάν προηγείται μια κλήση συνάρτησης με τη λέξη-κλειδί νέα, είναι μια επίκληση κατασκευαστή.

Φαίνεται ότι δημιουργείτε μια νέα συνάρτηση, αλλά επειδή οι συναρτήσεις JavaScript είναι αντικείμενα δημιουργείτε πραγματικά ένα νέο αντικείμενο:

Παράδειγμα

// This is a function constructor:
function myFunction(arg1, arg2) {
    this.firstName = arg1;
  this.lastName  = arg2;
}

// This creates a new object
const myObj = new myFunction("John", "Doe");

// This will return "John"
myObj.firstName;

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>
<p>In this example, myFunction is a function constructor:</p>

<p id="demo"></p>

<script>
function myFunction(arg1, arg2) {
  this.firstName = arg1;
  this.lastName  = arg2;
}

const myObj = new myFunction("John","Doe")
document.getElementById("demo").innerHTML = myObj.firstName; 
</script>

</body>
</html>

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

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