Metody JavaScriptu

Obsah

Příklad

const person = {
    firstName: "John",
  lastName: "Doe",
  id: 5566,
  fullName: function() {
    return this.firstName + " " + 
this.lastName;
  }
};

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In this example, <b>this</b> refers to the <b>person</b> object.</p>
<p>Because <b>fullName</b> is a method of the person object.</p>

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

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</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

Metody JavaScriptu

Metody JavaScriptu jsou akce, které lze provádět s objekty.

Metoda JavaScriptu je vlastnost obsahující funkci definice.

firstName: John
lastName: Srna
age: 50
eyeColor: modrý
fullName: function() {return this.firstName + " " + this.lastName;}

Metody jsou funkce uložené jako vlastnosti objektu.

Přístup k objektovým metodám

K metodě objektu přistupujete s následující syntaxí:

objectName.methodName()

Obvykle popíšete fullName() jako metodu objektu person a celé jméno jako vlastnost.

Vlastnost fullName se spustí (jako funkce), když je vyvolána pomocí().

Tento příklad přistupuje k metodě fullName() objektu osoby:

Příklad

name = person.fullName();

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating and using an object method.</p>
<p>A method is actually a function definition stored as a property value.</p>

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

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

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

Pokud přistupujete k vlastnosti fullName bez(), je vrátí definici funkce:

Příklad

name = person.fullName;

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>An object method is a function definition stored as a property value.</p>
<p>If you access it without (), it will return the function definition:</p>

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

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

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

Přidání metody k objektu

Přidání nové metody k objektu je snadné:

Příklad

 person.name = function () {
  return this.firstName + " " + this.lastName;
};

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p id="demo"></p>

<script>
const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
};
person.name = function() {
  return this.firstName + " " + this.lastName;
};

document.getElementById("demo").innerHTML =
"My father is " + person.name(); 
</script>

</body>
</html>

Použití vestavěných metod

Tento příklad používá metodu toUpperCase() objektu String k převodu textu na velká písmena:

let message = "Hello world!";
let x = message.toUpperCase();

Hodnota x po provedení výše uvedeného kódu bude:

HELLO WORLD!

Příklad

person.name = function () {
  return (this.firstName + " " + this.lastName).toUpperCase();
};

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p id="demo"></p>

<script>
const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
};
person.name = function() {
  return (this.firstName + " " + this.lastName).toUpperCase();
};

document.getElementById("demo").innerHTML =
"My father is " + person.name(); 
</script>

</body>
</html>