Dalam bahasa pemrograman JavaScript, terdapat kata kunci this yang digunakan untuk merujuk pada objek saat ini. Penggunaan this sangat berguna ketika kita ingin mengakses properti atau metode dari objek yang sedang aktif.
Berikut adalah contoh penggunaan this keyword dalam JavaScript:
const person = {
name: 'John',
age: 30,
greet: function() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
};
person.greet(); // Output: Hello, my name is John and I am 30 years old.
Dalam contoh di atas, kita memiliki objek person yang memiliki properti name dan age, serta metode greet. Ketika metode greet dipanggil menggunakan person.greet(), kita menggunakan this.name dan this.age untuk merujuk pada properti name dan age dari objek person itu sendiri.
Selain itu, this juga dapat digunakan di dalam fungsi konstruktor atau metode objek untuk merujuk pada objek yang sedang dibuat atau digunakan. Berikut adalah contoh penggunaan this dalam fungsi konstruktor:
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.greet = function() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};
const person1 = new Person('John', 30);
person1.greet(); // Output: Hello, my name is John and I am 30 years old.Dalam contoh di atas, kita menggunakan this.name dan this.age dalam fungsi konstruktor Person untuk mengatur nilai properti name dan age dari objek yang sedang dibuat.
Sekarang, mari kita lihat bagaimana kita dapat mengaplikasikan penggunaan this dalam HTML. Dalam HTML, kita dapat menggunakan JavaScript untuk memanipulasi elemen-elemen HTML dan mengakses properti atau metode dari elemen tersebut.
Berikut adalah contoh penggunaan this dalam HTML:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Penggunaan this dalam HTML</title>
<script>
function changeColor() {
this.style.color = 'red';
}
</script>
<style>
.my-element {
font-size: 24px;
cursor: pointer;
}
</style>
</head>
<body>
<h1 class="my-element" onclick="changeColor.call(this)">Klik Saya</h1>
</body>
</html>Output:
See the Pen Contoh this Keyword dalam JavaScript by WebbizID (@De-Orchids) on CodePen.
Dalam contoh di atas, kita memiliki elemen <h1> dengan kelas my-element. Ketika elemen tersebut diklik, fungsi changeColor dipanggil menggunakan onclick="changeColor.call(this)". Dalam fungsi changeColor, kita menggunakan this.style.color untuk mengubah warna teks elemen tersebut menjadi merah.
Dengan menggunakan this dalam JavaScript dan mengaplikasikannya dengan HTML, kita dapat dengan mudah mengakses dan memanipulasi properti atau metode dari objek atau elemen yang sedang aktif.
Sekian penjelasan mengenai penggunaan this dalam JavaScript dan pengaplikasiannya dengan HTML. Semoga bermanfaat!
Leave a Reply