JavaScript Function apply() Method


Sisällysluettelo

    Näytä sisällysluettelo


Menetelmän uudelleenkäyttö

apply()-menetelmällä voit kirjoittaa menetelmän, jota voidaan käyttää eri esineitä.


JavaScriptin apply()-menetelmä

apply()-menetelmä on samanlainen kuin call()-menetelmä (edellinen luku).

Tässä esimerkissä person1-menetelmää fullName sovelletaan kohdassa person1:

Esimerkki

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

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

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

Kokeile itse →

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



Ero call() ja apply() välillä

Ero on:

call()-menetelmä ottaa argumentit erikseen.

Metodi apply() ottaa argumentit taulukkona.

Apply()-menetelmä on erittäin kätevä, jos haluat käyttää taulukkoa argumenttiluettelon sijaan.


apply()-menetelmä argumenteilla

Metodi apply() hyväksyy argumentit taulukossa:

Esimerkki

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

Kokeile itse →

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


Verrattuna call()-menetelmään:

Esimerkki

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

Kokeile itse →

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




Simuloi Max-menetelmää taulukoilla

Löydät suurimman luvun (lukuluettelosta) Math.max()-menetelmällä:

Esimerkki

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

Kokeile itse →

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


Koska JavaScriptin taulukoissa ei ole max()-menetelmää, voit käyttää Math.max()-menetelmän sijaan.

Esimerkki

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

Kokeile itse →

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



Ensimmäisellä argumentilla (nolla) ei ole merkitystä. Sitä ei käytetä tässä esimerkissä.

Nämä esimerkit antavat saman tuloksen:

Esimerkki

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

Kokeile itse →

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



Esimerkki

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

Kokeile itse →

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



Esimerkki

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

Kokeile itse →

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

Jos tiukassa JavaScript-tilassa apply()-menetelmän ensimmäinen argumentti ei ole objekti, siitä tulee vedetyn funktion omistaja (objekti). "Ei-tiukassa" tilassa siitä tulee globaali objekti.