JavaScript - this Keyword (ID)

Hai teman-teman pengembang JavaScript yang bersemangat! Hari ini, kita akan memulai sebuah perjalanan menarik ke dunia kata kunci this. Sebagai guru ilmu komputer yang ramah di lingkungan Anda, saya di sini untuk mengarahkan Anda melalui konsep yang kadang-kadang sulit, tapi selalu menarik ini. Jadi, ambil minuman favorit Anda, duduk nyaman, dan mari kita masuk ke dalam!

Apa itu kata kunci 'this'?

Bayangkan Anda di sebuah pesta, dan seseorang menjerit, "Hey, kamu!" Siapa yang akan memutar badan? Semua orang, kan? Tetapi jika mereka mengatakan, "Hey, Sarah!" hanya Sarah yang akan merespon. Dalam JavaScript, kata kunci this seperti mengatakan "Hey, kamu!" kepada sebuah objek. Itu adalah cara untuk merujuk ke objek saat ini dalam konteks.

Kata kunci this adalah penanda khusus yang secara otomatis didefinisikan dalam skop setiap fungsi. Tetapi ada tangga - nilainya ditentukan oleh bagaimana fungsi itu dipanggil. Nature dinamis this ini adalah yang membuatnya sia-sia dan kadang-kadang membingungkan.

Objek mana yang 'this' merujuk ke?

Sekarang, ini adalah tempat hal-hal menjadi menarik. Objek yang this merujuk ke dapat berubah tergantung pada bagaimana dan di mana itu digunakan. Itu seperti seekor kameleon, mengubah warnanya berdasarkan lingkungannya. mari kita lihat beberapa scenario:

Sintaks

Sebelum kita masuk lebih dalam, mari kita lihat secara cepat bagaimana kita menggunakan this:

console.log(this);

Simple, kan? Tetapi jangan biarkan ke simpelannya menipu Anda. Magic (atau kesia-siaan) terjadi saat kita gunakan itu dalam konteks yang berbeda.

JavaScript 'this' dalam Skop Global

Ketika digunakan dalam skop global (di luar semua fungsi), this merujuk ke objek global. Dalam browser, itu biasanya objek window.

console.log(this === window); // true

this.myGlobalVar = "Saya global!";
console.log(window.myGlobalVar); // "Saya global!"

Di sini, this seperti kartu VIP yang memberikan Anda akses ke seluruh pesta (skop global).

JavaScript 'this' dalam Fungsi

Ketika this digunakan dalam fungsi biasa, nilainya tergantung pada bagaimana fungsi itu dipanggil.

function showThis() {
console.log(this);
}

showThis(); // window (dalam mode non-strict)

Dalam kasus ini, this seperti seekor anjing yang hilang, menempel pada apa pun yang ada di sekitarnya - yang dalam mode non-strict adalah objek global.

'this' dalam Fungsi dalam Mode Strict

Mode strict seperti guru yang ketat yang tidak membiarkan Anda melarikan diri. Dalam mode strict, this dalam fungsi adalah undefined kecuali ditetapkan secara eksplisit.

"use strict";
function strictThis() {
console.log(this);
}

strictThis(); // undefined

'this' dalam Fungsi Konstruktor

Ketika sebuah fungsi digunakan sebagai konstruktor (dengan kata kunci new), this merujuk ke objek yang baru diciptakan.

function Person(name) {
this.name = name;
this.greet = function() {
console.log("Halo, saya " + this.name);
};
}

const john = new Person("John");
john.greet(); // "Halo, saya John"

Di sini, this seperti surat kelahiran, menetapkan identitas objek yang baru lahir.

'this' dalam Fungsi Arrow

Fungsi arrow adalah seperti rebel di dunia JavaScript. Mereka tidak mengikat this mereka sendiri tapi mewarisi itu dari skop yang mengelilingi.

const obj = {
name: "Alice",
sayHello: () => {
console.log("Halo, " + this.name);
}
};

obj.sayHello(); // "Halo, undefined"

Dalam kasus ini, this dalam fungsi arrow tidak merujuk ke obj, tapi ke skop sekitarnya (mungkin skop global).

'this' dalam Metode Objek

Ketika this digunakan dalam metode (sebuah fungsi yang merupakan properti dari objek), itu merujuk ke objek yang metode itu dipanggil.

const car = {
brand: "Toyota",
getBrand: function() {
return this.brand;
}
};

console.log(car.getBrand()); // "Toyota"

Di sini, this seperti butler yang setia, selalu merujuk ke tuannya (objek).

'this' dalam Fungsi Anak dari Metode Objek

Ini adalah tempat hal-hal bisa menjadi sulit. Dalam fungsi dalam metode, this tidak lagi merujuk ke objek.

const restaurant = {
name: "Tasty Treats",
getMenu: function() {
function displayName() {
console.log(this.name);
}
displayName();
}
};

restaurant.getMenu(); // undefined

Dalam kasus ini, this dalam displayName() merujuk ke objek global, bukan restaurant.

JavaScript 'this' dalam Penangan Event

Dalam penangan event, this biasanya merujuk ke elemen yang menerima event.

<button id="myButton">Klik saya!</button>

<script>
document.getElementById("myButton").addEventListener("click", function() {
console.log(this); // <button id="myButton">Klik saya!</button>
});
</script>

Di sini, this seperti lampu sorot, fokus pada bintang pertunjukan - elemen yang diklik.

Pengikatan Fungsi Eksplisit dalam JavaScript

Kadang-kadang, kita ingin menjadi bos dan katakan kepada this betapa ia seharusnya. Kita bisa melakukan ini menggunakan call(), apply(), atau bind().

const person1 = { name: "Alice" };
const person2 = { name: "Bob" };

function sayHello() {
console.log("Halo, " + this.name);
}

sayHello.call(person1); // "Halo, Alice"
sayHello.apply(person2); // "Halo, Bob"

const boundHello = sayHello.bind(person1);
boundHello(); // "Halo, Alice"

Metode-metode ini seperti seorang sutradara, memberitahu this betapa perannya harus dimainkan.

Precedence 'this' JavaScript

Sekarang, mari kita rangkum precedence pengikatan this:

Aturan	Precedence
Kata kunci new	1 (Teratas)
Pengikatan eksplisit (call, apply, bind)	2
Panggilan metode	3
Panggilan fungsi	4 (Terendah)

Ingat, fungsi arrow adalah khusus dan selalu mewarisi this dari skop sekitarnya.

Dan itu adalah nya, teman-teman! Kita telah menjelajahi negeri this, mengexplorekan berbagai wajah dan keunikan nya. Ingat, memahami this seperti belajar menunggang sepeda - mungkin saja wobble di awal, tapi dengan latihan, Anda akan berjalan cepat dalam waktu singkat. Tetap coding, tetap menjelajahi, dan yang paling penting, tetap bersenang-senang dengan JavaScript!

Credits: Image by storyset