Contoh:
<!DOCTYPE html> <html> <body> <h2>JavaScript Keyword <i>this</i></h2> <p>Pada contoh ini, <b>this</b> mewakili object <b>person</b>.</p> <p>Karena object person memiliki method fullName.</p> <p id="demo"></p> <script> // Create an object: var 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>
Section Artikel
Apa itu this?
Pada JavaScript kata kunci this merujuk pada object yang dimiliknya.
this memiliki nilai yang berbeda tergantung di mana itu digunakan:
Dalam suatu method, this mengacu pada object pemilik.
Jika sendiri, this mengacu pada object global.
Dalam suatu fungsi, this mengacu pada object global.
Dalam suatu fungsi, dalam mode strict, this tidak ditentukan.
Dalam sebuah event, this mengacu pada elemen yang menerima event tersebut.
Method seperti call(), dan apply() bisa merujuk this ke object apa pun.
this pada Method
Dalam method, this mengacu pada pemilik method.
Dalam contoh di bagian atas halaman ini, this mengacu pada object person.
Object person adalah pemilik method fullName.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Keyword <i>this</i></h2>
<p>Pada contoh ini, <b>this</b> mewakili object <b>person</b>.</p>
<p>Karena object person memiliki method fullName.</p>
<p id="demo"></p>
<script>
// Create an object:
var 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>
this digunakan sendiri
Saat digunakan sendiri, pemiliknya adalah object Global, jadi this mengacu pada object Global.
Di jendela browser, object Global adalah [Object Window]:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Keyword <i>this</i></h2>
<p>Pada Contoh ini, <b>this</b> merujuk pada window Object:</p>
<p id="demo"></p>
<script>
var x = this;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Dalam mode strict, ketika digunakan sendiri, this juga mengacu pada object Global [object Window]:
Contoh
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Keyword <i>this</i></h2>
<p>Pada Contoh ini, <b>this</b> merujuk pada window Object:</p>
<p id="demo"></p>
<script>
"use strict";
var x = this;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
This dalam sebuah Fungsi (Default)
Dalam fungsi JavaScript, pemilik fungsi adalah pengikat default untuk this.
Jadi, dalam sebuah fungsi, this mengacu pada object Global [object Window].
Contoh
<!DOCTYPE html>
<html>
<body>
<h2>The JavaScript <i>this</i> Keyword</h2>
<p> Dalam contoh ini, <b>this</b> mewakili object yang "memiliki" myFunction: </p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction();
function myFunction() {
return this;
}
</script>
</body>
</html>
this pada Fungsi (Strict)
Mode strict JavaScript tidak mengizinkan pengikatan default.
Jadi, saat digunakan dalam suatu fungsi, dalam mode strict, this tidak ditentukan.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>The JavaScript <i>this</i> Keyword</h2>
<p> Dalam sebuah fungsi, secara default, <b>this</b> merujuk ke object Global. </p>
<p> Dalam mode strict, <b> ini </b> <b>tidak ditentukan</b>, karena mode stirct tidak mengizinkan pengikatan default: </p>
<p id="demo"></p>
<script>
"use strict";
document.getElementById("demo").innerHTML = myFunction();
function myFunction() {
return this;
}
</script>
</body>
</html>
this in Event Handlers
Dalam event handler pada HTML, this mengacu pada elemen HTML yang menerima event:
Contoh:
<!DOCTYPE html> <html> <body> <h2>JavaScript Keyword <i>this</i></h2> <button onclick="this.style.display='none'">Click untuk menghapuku!</button> </body> </html>
Object Method Binding
Dalam contoh berikut, this adalah object person (Object person adalah “pemilik” fungsi):
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>The JavaScript <i>this</i> Keyword</h2>
<p>Dalam contoh berikut, this adalah object person (Object person adalah "pemilik" fungsi).</p>
<p id="demo"></p>
<script>
// Create an object:
var 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>
<!DOCTYPE html>
<html>
<body>
<h2>The JavaScript <i>this</i> Keyword</h2>
<p>Pada contoh berikut <b>this</b> mewakili object <b>person</b>.</p>
<p>Because the person object "owns" the fullName method.</p>
<p id="demo"></p>
<script>
// Create an object:
var 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>
Dengan kata lain: this.firstName berarti properti firstName dari object (person) this.
Pengikatan Fungsi Eksplisit
Method call() dan apply() adalah method JavaScript yang ditentukan sebelumnya.
Keduanya dapat digunakan untuk memanggil method object dengan object lain sebagai argumen.
Dalam contoh di bawah ini, saat memanggil person1.fullName dengan person2 sebagai argumen,this akan merujuk ke person2, meskipun itu adalah method person1.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Keyword <i>this</i></h2>
<p>Dalam contoh ini <strong>this</strong> akan merujuk ke person2, meskipun itu adalah method person1.</p>
<p id="demo"></p>
<script>
var person1 = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
var person2 = {
firstName:"John",
lastName: "Doe",
}
var x = person1.fullName.call(person2);
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
