JavaScript toto

Obsah

    Zobrazit 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.

toto v metodě

Při použití v metodě objektu toto odkazuje na objekt.

V příkladu v horní části této stránky toto odkazuje na objekt person.

Protože metoda fullName je metodou objektu person.

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>

toto sám

Při samostatném použití toto odkazuje na globální objekt.

Protože toto běží v globálním rozsahu.

V okně prohlížeče je globální objekt [okno objektu]:

Příklad

let x = this;

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 window object:</p>

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

<script>
let x = this;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

V přísném režimu, když se použije samostatně, toto také odkazuje na globální objekt:

Příklad

 "use strict";
let x = this;

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 window object:</p>
<p id="demo"></p>

<script>
"use strict";
let x = this;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

toto ve funkci (výchozí)

Ve funkci je globální objekt výchozí vazbou pro toto.

V okně prohlížeče je globální objekt [okno objektu]:

Příklad

function myFunction() {
    return this;
}

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 the window object:</p>
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = myFunction();

function myFunction() {
  return this;
}
</script>

</body>
</html>

toto ve funkci (přísné)

Přísný režim JavaScriptu neumožňuje výchozí vazbu.

Při použití ve funkci v přísném režimu je toto nedefinováno.

Příklad

"use strict";
function myFunction() {
    return this;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>

<p>In a function, by default, <b>this</b> refers to the global object.</p>

<p>Strict mode does not allow default binding, so <b>this</b> is:</p>
<p id="demo"></p>

<script>
"use strict";
document.getElementById("demo").innerHTML = myFunction();

function myFunction() {
  return this;
}
</script>

</body>
</html>

toto v obslužných rutinách událostí

V obslužných programech událostí HTML toto odkazuje na prvek HTML, který obdržel událost:

Příklad

 <button onclick="this.style.display='none'">
  Click to 
  Remove Me!
</button>

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>

<button onclick="this.style.display='none'">Click to Remove Me!</button>

</body>
</html>

Vazba objektové metody

V těchto příkladech je toto objekt osoby:

Příklad

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

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 object</b>.</p>

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

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

// Display data from the object:
document.getElementById("demo").innerHTML = person.myFunction();
</script>

</body>
</html>

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>

tj. this.firstName je vlastnost firstName this (objekt osoba).

Explicitní funkce vazby

Metody call() a apply() jsou předdefinované metody JavaScriptu.

Oba mohou být použity k volání objektové metody s jiným objektem jako argumentem.

Viz také:

Metoda volání funkce().

Metoda Function apply()

Metoda funkce bind().

Níže uvedený příklad volá person1.fullName s person2 jako argument, toto odkazuje na person2, i když je fullName metodou osoby1:

Příklad

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

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

// Return "John Doe":
person1.fullName.call(person2);

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In this example <strong>this</strong> refers to person2, even if it is a method of person1:</p>

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

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

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

let x = person1.fullName.call(person2); 
document.getElementById("demo").innerHTML = x; 
</script>

</body>
</html>

Funkce Půjčka

Pomocí metody bind() si může objekt vypůjčit metodu od jiného objektu.

Tento příklad vytvoří 2 objekty (osoba a člen).

Členský objekt si vypůjčí metodu celého jména z objektu person:

Příklad

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

const member = {
  firstName:"Hege",
  lastName: "Nilsen",
}

let fullName = person.fullName.bind(member);

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Function bind()</h1>

<p>This example creates 2 objects (person and member).</p>
<p>The member object borrows the fullname method from person:</p> 

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

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

const member = {
  firstName:"Hege",
  lastName: "Nilsen",
}

let fullName = person.fullName.bind(member);

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

</body>
</html>

Toto přednost

Chcete-li zjistit, na který objekt se toto vztahuje; použijte následující pořadí pořadí.

Precedence

Objekt

1

svázat()

2

apply() a call()

3

Objektová metoda

4

Globální rozsah

Je toto ve funkci volané pomocí bind()?

Je toto ve funkci volané pomocí apply()?

Je toto ve funkci volané pomocí call()?

Je toto v objektové funkci (metodě)? <p>Je toto ve funkci v globálním rozsahu.