Pada artikel ini, kita akan berbicara tentang topik yang menarik dan agak membingungkan. Ini adalah kata kunci ‘ini’ dalam bahasa pemrograman Javascript.

Singkatnya, Dalam JavaScript, kata kunci ini mengacu pada suatu objek. Objek mana yang bergantung pada bagaimana ini dipanggil (digunakan atau dipanggil). Dengan kata lain, this mereferensikan objek yang sedang memanggil fungsi.

misalkan Anda memiliki objek bernama ‘penghitung’ yang memiliki satu metode bernama next() , saat Anda mengakses metode next() , ia mengembalikan nilai berikutnya dari nilai saat ini menggunakan objek this .

let counter = {   
    count: 0,   
    next: function () {     
        return ++this.count;   
    }, 
};

Di dalam metode next(), kata kunci ini mereferensikan objek hitungan. Cara kerjanya adalah dengan mendapatkan nilai objek hitungan saat ini menggunakan this , dan mengembalikan nilai berikutnya. Dan lihat kode berikut untuk memanggil metode tersebut:

counter.next()

Untuk contoh lebih lanjut, lihat kode di bawah ini:

const test = {
  prop: 42,
  func: function() {
    return this.prop;
  },
};

Menurut Anda apa yang akan dikembalikan kode jika saya memanggil metode func?

Bagi yang menjawab 42, Anda benar. Karena metode func mengembalikan nilai objek prop dan dengan itu, Anda mendapatkan 42 sebagai hasilnya.

Sekarang Anda mungkin bertanya, “lalu mengapa saya harus membuat metode baru hanya untuk memanggil objek, mengapa tidak memanggil objek itu sendiri saja?”

Nah, dalam pemrograman ada istilah yang menjelaskan bahwa kita hanya bisa membuat sesuatu sesuai kegunaannya. Mungkin untuk contoh di atas, agak berlebihan untuk menerapkan istilah ini, tetapi untuk kode yang lebih canggih dan kompleks, Anda perlu menerapkan istilah ini.

2 kode di atas adalah contoh penggunaan kata kunci ini dalam sebuah objek.

Global Context

In the global execution context (outside of any function), this refers to the global object.

// In web browsers, the window object is also the global object:
console.log(this === window); // true

a = 37;
console.log(window.a); // 37

this.b = "MDN";
console.log(window.b)  // "MDN"
console.log(b)         // "MDN"

Function Context

Dalam konteks eksekusi global (di luar fungsi apa pun), ini mengacu pada objek global.

function f1() {
  return this;
}

// In a browser:
f1() === window; // true

// In Node:
f1() === globalThis; // true

Class Context

Perilaku ini di kelas dan fungsi serupa, karena kelas adalah fungsi di bawah tenda. Tetapi ada beberapa perbedaan dan peringatan.

Di dalam konstruktor kelas, ini adalah objek biasa. Semua metode non-statis di dalam kelas ditambahkan ke prototipe ini:

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }  age() {
    let date = new Date();
    return date.getFullYear() - this.year;
  }}

Dengan kode di atas, Anda dapat mengakses nama dan tahun saat ini (bergantung pada instance yang dipanggil) dari metode. Dengannya, kita bisa lebih leluasa dalam membuat dan memanggil konstruktor di kelas karena dengan ini membuat penulisan lebih mudah dipahami dan tidak membingungkan.

Itu saja untuk artikel ini, semoga Anda mendapatkan sesuatu untuk dipelajari. Terima kasih!!