JavaScript-funktionen applicera() Metod


Innehållsförteckning

    Visa innehållsförteckning


Metod Återanvändning

Med metoden apply() kan du skriva en metod som kan användas på olika föremål.


JavaScript-metoden apply()

Metoden apply() liknar metoden call() (föregående kapitel).

I det här exemplet fullName-metoden för person tillämpasperson1:

Exempel

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

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

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

Prova själv →

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



Skillnaden mellan call() och apply()

Skillnaden är:

Metoden call() tar argument separat.

Metoden apply() tar argument som en array.

Apply()-metoden är väldigt praktisk om du vill använda en array istället för en argumentlista.


Metoden apply() med argument

Metoden apply() accepterar argument i en array:

Exempel

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"]);

Prova själv →

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


Jämfört med metoden call():

Exempel

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");

Prova själv →

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




Simulera en Max-metod på matriser

Du kan hitta det största numret (i en lista med nummer) med metoden Math.max():

Exempel

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

Prova själv →

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


Eftersom JavaScript-arrayer inte har en max()-metod kan du använda Math.max()-metoden istället.

Exempel

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

Prova själv →

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



Det första argumentet (null) spelar ingen roll. Det används inte i detta exempel.

Dessa exempel ger samma resultat:

Exempel

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

Prova själv →

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



Exempel

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

Prova själv →

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



Exempel

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

Prova själv →

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




JavaScript strikt läge

I strikt JavaScript-läge, om det första argumentet för metoden apply() inte är ett objekt, den blir ägare (objekt) till den anropade funktionen. I "icke-strikt" läge blir det det globala objektet.