Aufruf einer JavaScript-Funktion

Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

Der Code in einer JavaScript-Funktion wird ausgeführt, wenn „etwas“ ihn aufruft.

Aufrufen einer JavaScript-Funktion

Der Code innerhalb einer Funktion wird nicht ausgeführt, wenn die Funktion definiert ist.

Der Code innerhalb einer Funktion wird ausgeführt, wenn die Funktion aufgerufen wird.

Es ist üblich, den Begriff „eine Funktion aufrufen“ anstelle von „aufrufen“ zu verwenden eine Funktion".

Es ist auch üblich, „eine Funktion aufrufen“ oder „eine Funktion starten“ zu sagen „Eine Funktion ausführen“.

In diesem Tutorial verwenden wir invoke, weil a Eine JavaScript-Funktion kann aufgerufen werden, ohne aufgerufen zu werden.

Aufrufen einer Funktion als Funktion

Beispiel

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

Probieren Sie es selbst aus →

<!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>

Die obige Funktion gehört zu keinem Objekt. Aber in JavaScript gibt es ist immer ein globales Standardobjekt.

In HTML ist das globale Standardobjekt die HTML-Seite selbst, daher „gehört“ die obige Funktion zu HTML-Seite.

In einem Browser ist das Seitenobjekt das Browserfenster. Die Funktion oben wird automatisch zu einer Fensterfunktion.

Notiz

Dies ist eine gängige Methode zum Aufrufen einer JavaScript-Funktion, aber keine sehr gute Vorgehensweise.
Globale Variablen, Methoden oder Funktionen können leicht zu Namenskonflikten und Fehlern im globalen Objekt führen.

myFunction() und window.myFunction() ist die gleiche Funktion:

Beispiel

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

Probieren Sie es selbst aus →

<!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>

Was ist das?

In JavaScript bezieht sich das Schlüsselwort this auf ein Objekt.

Welches Objekt hängt davon ab, wie dies aufgerufen (verwendet oder aufgerufen) wird?

Das Schlüsselwort this bezieht sich je nach Verwendung auf unterschiedliche Objekte:

  • In einer Objektmethode bezieht sich this auf das Objekt.

  • Allein dies bezieht sich auf das globale Objekt.

  • In einer Funktion bezieht sich this auf das globale Objekt.

  • In einer Funktion ist im strikten Modus dies undefiniert.

  • In einem Ereignis bezieht sich this auf das Element, das das Ereignis empfangen hat.

  • Methoden wie call(), apply() und bind() kann dies auf jedes Objekt verweisen.

Notiz

dies ist keine Variable. Es ist ein Schlüsselwort. Sie können den Wert von this nicht ändern.

Siehe auch:

Das JavaScript dieses Tutorial

Das globale Objekt

Wenn eine Funktion ohne Besitzerobjekt aufgerufen wird, wird der Wert von diesem angezeigt wird zum globalen Objekt.

In einem Webbrowser ist das globale Objekt das Browserfenster.

Dieses Beispiel gibt das Fensterobjekt als Wert von this zurück:

Beispiel

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

function myFunction() {
  return this;
}

Probieren Sie es selbst aus →

<!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>

Wenn Sie eine Funktion als globale Funktion aufrufen, wird der Wert von this zum globalen Objekt.
Die Verwendung des Fensterobjekts als Variable kann Ihr Programm leicht zum Absturz bringen.

Aufrufen einer Funktion als Methode

In JavaScript können Sie Funktionen als Objektmethoden definieren.

Das folgende Beispiel erstellt ein Objekt (myObject) mit zwei Eigenschaften (Vorname und Nachname) und a Methode (fullName):

Beispiel

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

Probieren Sie es selbst aus →

<!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>

Die Methode fullName ist eine Funktion. Die Funktion gehört zu das Objekt. myObject ist der Eigentümer der Funktion.

Das Ding namens this ist das Objekt, das „besitzt“ den JavaScript-Code. In diesem Fall der Wert von this ist myObject.

Probier es aus! Ändern Sie die Methode fullName, um den Wert von this zurückzugeben:

Beispiel

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

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

Probieren Sie es selbst aus →

<!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>

Der Aufruf einer Funktion als Objektmethode bewirkt den Wert von diesem das Objekt selbst sein.

Aufrufen einer Funktion mit einem Funktionskonstruktor

Wenn einem Funktionsaufruf das Schlüsselwort new vorangestellt ist, es handelt sich um einen Konstruktoraufruf.

Es sieht so aus, als ob Sie eine neue Funktion erstellen, aber da JavaScript-Funktionen dies tun, ist dies der Fall Objekte erstellen Sie tatsächlich ein neues Objekt:

Beispiel

// 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;

Probieren Sie es selbst aus →

<!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>

Ein Konstruktoraufruf erstellt ein neues Objekt. Das neue Objekt erbt das Eigenschaften und Methoden von seinem Konstruktor.

Das Schlüsselwort this im Konstruktor hat keinen Wert.
Der Wert von this ist das neue Objekt, das beim Aufruf der Funktion erstellt wird.