Pada tutorial ini kita akan membahas tentang keyword this di JavaScript. Bagaimana penggunaan this dan contoh penggunaannya.
this berhubungan dengan class dan object. Menggunakan this di java akan me-refer current class atau object dan refer ini akan menghindari kesalahan pemanggilan parameter yang ada dalam sebuah class atau object.
Di JavaScipt this yang berada dalam scope object akan mengacu kepada object. Sementara this yang berdiri sendiri (diluar object) mengacu kepada global object (object window).
this default (Global Scope)
refer to Window
let x = this;
alert('this ini adalah '+ x);
Output
this ini adalah [object Window]
this di dalam object JavaScript
refer to object
let x = {
showData: function () {
return this
}
}
alert('this ini adalah ' + x.showData());
output
this ini adalah [object Object]
Itulah bentuk this yang akan kita pelajari.
Sebelumnya kita telah belajar bahwa object dan variabel di JavaScript sama sama digunakan untuk menampung data. hal yang membedakan keduanya adalah object menampung data pair key : value sedangkan variabel dapat menampung berbabagai tipe data melalui penggunaan var let dan const.
Tujuan digunakan this JavaScript
Class adalah blueprint dari object, (ini dipelajari pada konsep oop). Dengan adanya blueprint kita bisa membuat object1,object2 dan object 3.
Di JavaScript object = variabel.
Variabel dapat dicopy, di-overwrite dan sebagainya, karena di javascript object sama dengan variabel tentunya perihal copy dan lain-lain juga berlaku untuk object JavaScript. Sehingga saat mengcopy object1 menjadi object2 maka sesuatu yang dimiliki (seperti parameter/method) di object1 juga akan dimiliki object2.
Dalam praktiknya kondisi seperti ini memerlukan this:
Contoh object siswa
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar this JavaScript</title>
</head>
<body>
<script>
let siswa = {
name: "Albert",
umur : 25,
showData : function () {
alert("Data Siswa \nNama : "+ siswa.name + "\nUmur : " +siswa.umur);
}
}
siswa.showData();
</script>
</body>
</html>
output
Data Siswa
Nama : Albert
Umur : 25
Copy siswa menjadi siswa1
let siswa1 = siswa;
Agar siswa1 menjadi sesuatu yang berbeda dari siswa serta parameter dan method siswa bisa digunakan tanpa menimbulkan kebingungan maka pada method showSiswa() dilakukan perubahan dari
showData : function () {
alert("Data Siswa \nNama : "+ siswa.name + "\nUmur : " +siswa.umur);
}
menjadi
showData : function () {
alert("Data Siswa \nNama : "+ this.name + "\nUmur : " +this.umur);
}
this akan membuat name dan umur merujuk ke object yang lebih general. dalam artian pada kasus di atas this mewakili siswa.nama dan siswa1.nama , siswa.umur dan siswa1.umur.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar this JavaScript</title>
</head>
<body>
<script>
let siswa = {
name: "Albert",
umur : 25,
showData : function () {
alert("Data Siswa \nNama : "+ siswa.name + "\nUmur : " +siswa.umur);
}
}
siswa.showData();
let siswa1 = siswa; //copy siswa object ke siswa1
siswa = null; //overwrite null, diperlukan agar parameter dan function null
//assignment nilai parameter
siswa1.name = "Brian";
siswa1.umur = 30;
//pemanggilan fungsi showData untuk object siswa1
siswa1.showData();
</script>
</body>
</html>
contoh this pada object siswa dan siswa1 pada script di atas adalah salah satu dari fungsi this.
saat deklasrasi let siswa1 = siswa; berarti program mengalokasikan memory untuk menyimpan parameter dan method yang dimiliki oleh siswa:
Parameter dan method tersebut selanjutnya diisi dengan nilai object siswa1 siswa1.name = "Brian"; dan siswa1.umur = 30;
Contoh Penggunaan this dalam Method Object
contoh this di dalam function memberi warna ke 2 object
function beriWarna(shape) {
shape.jenisWarna = function () {
document.getElementById(this.block).style.backgroundColor = this.warna;
}
}
selanjutnya kita buat object shape 1 dan shape 2 yang akan diberi warna
const shape1 ={
warna : 'red',
block : 'myblock'
}
const shape2 = {
warna: 'green',
block: 'myblock2'
}
output yang diinginkan dari object di atas adalah dalam bentuk 2 buah object (shape1 dan shape2) dan setiap object memiliki warna sesuai dengan value warna yang dimikinya seperti gambar di bawah ini:
script lengkap contoh this untuk meberi warna object melalui function / constructor di atas adalah sebagai berikut :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Belajar this JavaScript</title>
</head>
<body>
<b>Contoh this function JavaScript </b>
<div id="myblock">
<p>shape 1</p>
</div>
<div id="myblock2">
<p>shape 2</p>
</div>
<script>
function beriWarna(shape) {
shape.jenisWarna = function () {
document.getElementById(this.block).style.backgroundColor = this.warna;
}
}
const shape1 ={
warna : 'red',
block : 'myblock'
}
const shape2 = {
warna: 'green',
block: 'myblock2'
}
beriWarna(shape1);
shape1.jenisWarna();
beriWarna(shape2);
shape2.jenisWarna();
</script>
</body>
</html>
contoh script di atas kita membuat sebuah function beriWarna sebuah shape. Ketika diberi warna shape bisa mendapatkan warna sesuai dengan ketentuan yang dimiliki object. Seperti object 1 memiliki parameter warna : ‘red’ dan block : ‘myblock2’. maka method beri warna akan menjalankan tugasnya sesuai dengan ikatannya dengan object 1.
Demikian pembahasan tentang this, selanjutnya untuk pembelajaran lanjutan kunjungi juga artikel di bawah ini: