const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
Prova själv →
<!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>
I JavaScript hänvisar nyckelordet detta
till ett objekt.
Vilket objekt beror på hur detta
anropas (används eller anropas).
Nyckelordet detta
hänvisar till olika objekt beroende på hur det används:
I en objektmetod hänvisar detta
till objektet.
Enbart hänvisar detta
till det globala objektet.
I en funktion hänvisar detta
till det globala objektet.
I en funktion, i strikt läge, är detta
odefinierat
.
I en händelse hänvisar detta
till elementet som tog emot händelsen.
Metoder som call()
, apply()
och bind()
kan hänvisa detta
till alla objekt.
detta
är inte en variabel. Det är ett nyckelord. Du kan inte ändra värdet på denna
.
När den används i en objektmetod refererar detta
till objektet.
I exemplet överst på den här sidan hänvisar detta
till person-objektet.
Eftersom metoden fullName är en metod för person-objektet.
fullName : function() {
return this.firstName + " " + this.lastName;
}
Prova själv →
<!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>
När den används ensam hänvisar detta
till det globala objektet.
Eftersom detta
körs i det globala omfånget.
I ett webbläsarfönster är det globala objektet [object Window]
:
let x = this;
Prova själv →
<!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>
I strikt läge, när det används ensamt, hänvisar detta
även till det globala objektet:
"use strict";
let x = this;
Prova själv →
<!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>
I en funktion är det globala objektet standardbindningen för detta
.
I ett webbläsarfönster är det globala objektet [object Window]
:
function myFunction() {
return this;
}
Prova själv →
<!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>
JavaScript strikt läge tillåter inte standardbindning.
Så när den används i en funktion, i strikt läge, är detta
odefinierat
.
"use strict";
function myFunction() {
return this;
}
Prova själv →
<!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>
I HTML-händelsehanterare hänvisar detta
till HTML-elementet som tog emot händelse:
<button onclick="this.style.display='none'">
Click to
Remove Me!
</button>
Prova själv →
<!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>
I dessa exempel är detta
personobjektet:
const person = {
firstName : "John",
lastName : "Doe",
id : 5566,
myFunction : function() {
return this;
}
};
Prova själv →
<!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;
}
};
Prova själv →
<!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>
dvs. this.firstName är egenskapen firstName för this (personobjektet).
Metoderna call()
och apply()
är fördefinierade JavaScript-metoder.
De kan båda användas för att anropa en objektmetod med ett annat objekt som argument.
Funktionen call()-metoden
Funktionen applicera()-metoden
Funktionen bind()-metoden
Exemplet nedan anropar person1.fullName med person2 som argument, detta hänvisar till person2, även om fullName är en metod för person1:
const person1 = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
const person2 = {
firstName:"John",
lastName: "Doe",
}
// Return "John Doe":
person1.fullName.call(person2);
Prova själv →
<!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>
Med metoden bind()
kan ett objekt låna en metod från ett annat objekt.
Detta exempel skapar 2 objekt (person och medlem).
Medlemsobjektet lånar fullnamnsmetoden från personobjektet:
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);
Prova själv →
<!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>
För att avgöra vilket objekt detta
refererar till; använd följande ordningsföreträde.
Objekt
binda()
applicera() och ring()
Objektmetod
Globalt omfång
Är detta
i en funktion som anropas med bind()?
Är detta
i en funktion som anropas med application()?
Är detta
i en funktion som anropas med call()?
Är detta
i en objektfunktion (metod)? <p>Är detta
i en funktion i det globala omfånget.