const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
Kokeile itse →
<!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>
JavaScriptissä tämä
-avainsana viittaa objektiin.
Mikä objekti riippuu siitä, miten tätä
kutsutaan (käytetään tai kutsutaan).
Avainsana tämä
viittaa erilaisiin objekteihin sen käyttötavan mukaan:
Objektimenetelmässä tämä
viittaa objektiin.
Yksin tämä
viittaa globaaliin objektiin.
Funktiossa tämä
viittaa globaaliin objektiin.
Funktion tiukassa tilassa tämä
on määrittämätön
.
Tapahtumassa tämä
viittaa elementtiin, joka vastaanotti tapahtuman.
Menetelmät, kuten call()
, apply()
ja bind()
voi viitata tähän
mihin tahansa objektiin.
tämä
ei ole muuttuja. Se on avainsana. Et voi muuttaa tämän
arvoa.
Objektimenetelmässä käytettynä tämä
viittaa objektiin.
Tämän sivun yläosassa olevassa esimerkissä tämä
viittaa person-objektiin.
Koska fullName-metodi on person-objektin menetelmä.
fullName : function() {
return this.firstName + " " + this.lastName;
}
Kokeile itse →
<!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>
Yksin käytettynä tämä
viittaa globaaliin objektiin.
Koska tämä
on käynnissä maailmanlaajuisesti.
Selainikkunassa yleinen objekti on [objektiikkuna]
:
let x = this;
Kokeile itse →
<!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>
tiukassa tilassa, kun sitä käytetään yksinään, tämä
viittaa myös globaaliin objektiin:
"use strict";
let x = this;
Kokeile itse →
<!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>
Funktiossa yleinen objekti on tämän
oletussidonta.
Selainikkunassa yleinen objekti on [objektiikkuna]
:
function myFunction() {
return this;
}
Kokeile itse →
<!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>
JavaScriptin tiukka tila ei salli oletussidontaa.
Joten kun sitä käytetään funktiossa tiukassa tilassa, tämä
on määrittämätön
.
"use strict";
function myFunction() {
return this;
}
Kokeile itse →
<!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>
HTML-tapahtumakäsittelijöissä tämä
viittaa HTML-elementtiin, joka sai tapahtuma:
<button onclick="this.style.display='none'">
Click to
Remove Me!
</button>
Kokeile itse →
<!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>
Näissä esimerkeissä tämä
on person-objekti:
const person = {
firstName : "John",
lastName : "Doe",
id : 5566,
myFunction : function() {
return this;
}
};
Kokeile itse →
<!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>
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " +
this.lastName;
}
};
Kokeile itse →
<!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>
eli this.firstName on tämän (henkilöobjektin) firstName-ominaisuus.
Menetelmät call()
ja apply()
ovat ennalta määritettyjä JavaScript-menetelmiä.
Niitä molempia voidaan käyttää objektimetodin kutsumiseen toisen objektin argumenttina.
Function call() -menetelmä
Function apply() -menetelmä
Funktio bind() -menetelmä
Alla olevassa esimerkissä henkilö1.fullName kutsuu henkilö2:ta argumenttina, tämä viittaa henkilö2:een, vaikka fullName on henkilö1:n metodi:
const person1 = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
const person2 = {
firstName:"John",
lastName: "Doe",
}
// Return "John Doe":
person1.fullName.call(person2);
Kokeile itse →
<!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>
bind()
-menetelmällä objekti voi lainata menetelmän toiselta objektilta.
Tämä esimerkki luo 2 objektia (henkilö ja jäsen).
Jäsenobjekti lainaa fullname-metodin henkilöobjektista:
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);
Kokeile itse →
<!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>
Määrittääksesi mihin objektiin tämä
viittaa; käytä seuraavaa järjestysjärjestystä.
Esine
sitoa()
hakea() ja soita()
Objektimenetelmä
Globaali ulottuvuus
Onko tämä
funktiossa, jota kutsutaan bind()-funktiolla?
Onko tämä
funktiossa, jota kutsutaan komennolla apply()?
Onko tämä
funktiossa, jota kutsutaan call()-komennolla?
Onko tämä
objektifunktiossa (menetelmässä)? <p>Onko tämä
globaalissa funktiossa.