JavaScript-Funktion apply()-Methode


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


Methodenwiederverwendung

Mit der Methode apply() können Sie eine Methode schreiben, die auf verschiedenen verwendet werden kann Objekte.


Die JavaScript-Methode apply()

Die Methode apply() ähnelt der Methode call() (vorheriges Kapitel).

In diesem Beispiel wird die fullName-Methode von person auf person1 angewendet:

Beispiel

const person = {
    fullName: function() {
      return this.firstName + " " + this.lastName;
    }
}

const person1 = {
  firstName: "Mary",
  lastName: "Doe"
}

// This will return "Mary Doe":
person.fullName.apply(person1);

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>
<p>In this example the fulllName method of person is <b>applied</b> on person1:</p>

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

<script>
const person = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}

const person1 = {
  firstName:"John",
  lastName: "Doe"
}

document.getElementById("demo").innerHTML = person.fullName.apply(person1); 
</script>

</body>
</html>



Der Unterschied zwischen call() und apply()

Der Unterschied ist:

Die Methode call() akzeptiert Argumente separat.

Die Methode apply() akzeptiert Argumente als Array.

Die Methode apply() ist sehr praktisch, wenn Sie ein Array anstelle einer Argumentliste verwenden möchten.


Die Methode apply() mit Argumenten

Die Methode apply() akzeptiert Argumente in einem Array:

Beispiel

const person = {
    fullName: function(city, country) {
    return this.firstName + " " + this.lastName 
  + "," + city + "," + country;
    }
}

const person1 = {
  firstName:"John",
    lastName: "Doe"
}

person.fullName.apply(person1, ["Oslo", "Norway"]);

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>
<p>In this example the fulllName method of person is <b>applied</b> on person1:</p>

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

<script>
const person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}

const person1 = {
  firstName:"John",
  lastName: "Doe"
}

document.getElementById("demo").innerHTML = person.fullName.apply(person1, ["Oslo", "Norway"]); 
</script>

</body>
</html>


Im Vergleich zur Methode call():

Beispiel

const person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName 
  + "," + city + "," + country;
    }
}

const person1 = {
    firstName:"John",
    lastName: "Doe"
}

person.fullName.call(person1, "Oslo", "Norway");

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>
<p>This example calls the fullName method of person, using it on person1:
</p>

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

<script>
const person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}

const person1 = {
  firstName:"John",
  lastName: "Doe"
}

const person2 = {
  firstName:"Mary",
  lastName: "Doe"
}

document.getElementById("demo").innerHTML = person.fullName.call(person1, "Oslo", "Norway"); 
</script>

</body>
</html>




Simulieren Sie eine Max-Methode für Arrays

Sie können die größte Zahl (in einer Zahlenliste) mit der Methode Math.max() finden:

Beispiel

Math.max(1,2,3);  // Will return 3

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Math.max()</h2>
<p>This example returns the highest number in a list of number arguments:</p>

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

<script>
document.getElementById("demo").innerHTML = Math.max(1,2,3); 
</script>

</body>
</html>


Da JavaScript-Arrays keine max()-Methode haben, können Sie diese anwenden Verwenden Sie stattdessen die Methode Math.max().

Beispiel

Math.max.apply(null, [1,2,3]); // Will also return 3

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript apply()</h2>
<p>This example returns the highest number in an array of numbers:</p>

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

<script>
document.getElementById("demo").innerHTML = Math.max.apply(null, [1,2,3]); 
</script>

</body>
</html>



Das erste Argument (null) spielt keine Rolle. Es wird in diesem Beispiel nicht verwendet.

Diese Beispiele führen zum gleichen Ergebnis:

Beispiel

Math.max.apply(Math, [1,2,3]); // Will also return 3

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript apply()</h2>
<p>This example returns the highest number in an array of numbers:</p>

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

<script>
document.getElementById("demo").innerHTML = Math.max.apply(Math, [1,2,3]); 
</script>

</body>
</html>



Beispiel

Math.max.apply(" ", [1,2,3]); // Will also return 3

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript apply()</h2>
<p>This example returns the highest number in an array of numbers:</p>

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

<script>
document.getElementById("demo").innerHTML = Math.max.apply(" ", [1,2,3]); 
</script>

</body>
</html>



Beispiel

Math.max.apply(0, [1,2,3]); // Will also return 3

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript apply()</h2>
<p>This example returns the highest number in an array of numbers:</p>

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

<script>
document.getElementById("demo").innerHTML = Math.max.apply(0, [1,2,3]); 
</script>

</body>
</html>




Strenger JavaScript-Modus

Wenn im strikten JavaScript-Modus das erste Argument der Methode apply() kein Objekt ist, Es wird zum Eigentümer (Objekt) der aufgerufenen Funktion. Im „nicht strikten“ Modus wird es zum globalen Objekt.