Vyvolání funkce JavaScript

Obsah

Zobrazit obsah

Kód uvnitř funkce JavaScriptu se spustí, když jej „něco“ vyvolá.

Vyvolání funkce JavaScriptu

Kód uvnitř funkce se nespustí, když je funkce definována.

Kód uvnitř funkce se spustí, když je funkce vyvolána.

Je běžné používat výraz „volání funkce“ namísto „vyvolat funkci“.

Běžné je také říkat „zavolat funkci“, „spustit funkci“, popř "vykonat funkci".

V tomto tutoriálu použijeme invoke, protože a Funkci JavaScript lze vyvolat bez volání.

Vyvolání funkce jako funkce

Příklad

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

Zkuste to sami →

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

Výše uvedená funkce nepatří žádnému objektu. Ale v JavaScriptu tam je vždy výchozí globální objekt.

V HTML je výchozím globálním objektem samotná stránka HTML, takže funkce výše „patří“ do HTML stránku.

V prohlížeči je objektem stránky okno prohlížeče. Funkce výše automaticky se stane funkcí okna.

Poznámka

Toto je běžný způsob vyvolání funkce JavaScriptu, ale není to příliš dobrý postup.
Globální proměnné, metody nebo funkce mohou snadno vytvářet konflikty názvů a chyby v globálním objektu.

myFunction() a window.myFunction() je stejná funkce:

Příklad

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

Zkuste to sami →

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

Co je toto?

V JavaScriptu odkazuje klíčové slovo toto na objekt.

Který objekt závisí na tom, jak je tento vyvolán (použit nebo zavolán).

Klíčové slovo toto odkazuje na různé objekty v závislosti na tom, jak se používá:

V objektové metodě toto odkazuje na objekt.
Samotné toto odkazuje na globální objekt.
Ve funkci toto odkazuje na globální objekt.
Ve funkci je v přísném režimu toto nedefinováno.
V události toto odkazuje na prvek, který přijal událost.
Metody jako call(), apply() a bind() může odkazovat toto na jakýkoli objekt.

Poznámka

toto není proměnná. Je to klíčové slovo. Hodnotu toto nelze změnit.

Viz také:

Výukový tento JavaScript

Globální objekt

Když je funkce volána bez objektu vlastníka, hodnota toto se stane globálním objektem.

Ve webovém prohlížeči je globálním objektem okno prohlížeče.

Tento příklad vrátí objekt okna jako hodnotu toto:

Příklad

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

function myFunction() {
  return this;
}

Zkuste to sami →

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

Vyvolání funkce jako globální funkce způsobí, že hodnota this bude globálním objektem.
Použití objektu okna jako proměnné může snadno spadnout váš program.

Vyvolání funkce jako metody

V JavaScriptu můžete definovat funkce jako objektové metody.

Následující příklad vytvoří objekt (myObject) se dvěma vlastnosti (jméno a příjmení) a a metoda (fullName):

Příklad

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

Zkuste to sami →

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

Metoda fullName je funkce. Funkce patří do objekt. myObject je vlastníkem funkce.

Věc zvaná toto je objekt, který „vlastní“ kód JavaScript. V tomto případě hodnota toto je můjObjekt.

Otestujte to! Změňte metodu fullName tak, aby vracela hodnotu toto:

Příklad

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

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

Zkuste to sami →

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

Vyvolání funkce jako objektové metody způsobí hodnotu toto být objektem samotným.

Vyvolání funkce pomocí konstruktoru funkcí

Pokud vyvolání funkce předchází klíčové slovo new, je to vyvolání konstruktoru.

Vypadá to, že vytvoříte novou funkci, ale protože funkce JavaScriptu jsou objekty ve skutečnosti vytvoříte nový objekt:

Příklad

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

Zkuste to sami →

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

Vyvolání konstruktoru vytvoří nový objekt. Nový objekt zdědí vlastnosti a metody od jeho konstruktoru.

Klíčové slovo toto v konstruktoru nemá hodnotu.
Hodnota toto bude nový objekt vytvořený při vyvolání funkce.