Kata Kunci this di JavaScript: Aturan Binding dan Jebakannya

this ditentukan saat pemanggilan

Sebagian besar kebingungan soal this berasal dari satu asumsi keliru: bahwa this bergantung pada tempat fungsi didefinisikan. Tidak. this bergantung pada cara fungsi itu dipanggil.

Lihat fungsi yang sama dipanggil dengan dua cara:

function whoAmI() {
    return this;
}

const user = { name: "Ada", whoAmI };

console.log(user.whoAmI() === user);   // true
console.log(whoAmI());                  // undefined (in strict mode)

Fungsinya sama, this-nya berbeda. Pemanggilan pertama punya user di kiri titik, jadi this adalah user. Pemanggilan kedua tidak punya apa-apa di kiri, jadi this bernilai undefined. Fungsinya sendiri tidak berubah; tempat pemanggilannyalah yang berubah.

Ingat ide itu: untuk mengetahui this, lihat pemanggilannya, bukan definisinya.

Empat aturan binding

Ada empat cara this diatur. Hampir setiap pertanyaan seputar this yang akan kamu punya terjawab dengan mengetahui aturan mana yang berlaku.

1. Pemanggilan method: obj.fn()

Saat sebuah fungsi dipanggil sebagai property dari sebuah object, this adalah object itu:

const counter = {
    count: 0,
    increment() {
        this.count += 1;
        return this.count;
    },
};

console.log(counter.increment());   // 1
console.log(counter.increment());   // 2

Apa yang ada di kiri titik menjadi this. Sesederhana itu.

2. Pemanggilan biasa: fn()

Kalau dipanggil tanpa object di depannya, this bernilai undefined di strict mode (yang otomatis menyala di module dan class) atau object global di sloppy mode:

"use strict";

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

show();   // undefined

Dari sinilah error "this is undefined" berasal. Melepas method dari object-nya mengubah pemanggilan method menjadi pemanggilan biasa:

"use strict";

const counter = {
    count: 0,
    increment() { this.count += 1; },
};

const fn = counter.increment;
// fn();   // TypeError: Cannot read properties of undefined

Tidak ada counter. sebelum pemanggilan, tidak ada binding. Fungsinya tidak ingat dari object mana ia berasal.

3. Binding eksplisit: .call(), .apply(), .bind()

Kamu bisa memaksa this menjadi apa pun yang kamu mau:

function greet(greeting) {
    return `${greeting}, ${this.name}`;
}

const ada = { name: "Ada" };

console.log(greet.call(ada, "Hello"));       // Hello, Ada
console.log(greet.apply(ada, ["Hi"]));       // Hi, Ada

const greetAda = greet.bind(ada);
console.log(greetAda("Hey"));                // Hey, Ada

.call dan .apply langsung memanggil fungsinya; bedanya hanya pada cara argumen dikirim. .bind mengembalikan fungsi baru dengan this yang terkunci permanen, berguna untuk callback.

4. Pemanggilan dengan new: new Fn()

Memanggil fungsi dengan new membuat object baru dan mengikatnya ke this:

function User(name) {
    this.name = name;
}

const ada = new User("Ada");
console.log(ada.name);   // Ada

Class memakai mekanisme ini di balik layar. Kita akan bertemu class di bab berikutnya.

Arrow function tidak punya this sendiri

Arrow function melanggar aturan-aturan di atas, dengan sengaja. Ia sama sekali tidak mengikat this: ia mewarisinya dari scope di sekitarnya, dibekukan pada saat arrow itu didefinisikan:

const user = {
    name: "Ada",
    regular: function () { return this; },
    arrow: () => this,
};

console.log(user.regular() === user);   // true
console.log(user.arrow());              // undefined (or window/globalThis)

Arrow di tingkat teratas module menangkap this milik module, yaitu undefined. Walaupun ia dipanggil sebagai user.arrow(), arrow menolak diikat ulang.

Kedengarannya seperti bug, tapi justru itulah intinya. Arrow function unggul di dalam method, saat kamu ingin mempertahankan this dari luar:

const timer = {
    seconds: 0,
    start() {
        setInterval(() => {
            this.seconds += 1;
            console.log(this.seconds);
        }, 1000);
    },
};

// timer.start();   // logs 1, 2, 3, ...

Arrow di dalam setInterval mewarisi this dari start, yang dipanggil sebagai timer.start(). Jadi this.seconds berfungsi. function biasa di situ akan mendapat this miliknya sendiri (apa pun yang dikirim setInterval) dan rusak.

Patokannya: pakai arrow function untuk callback di dalam method. Pakai fungsi biasa untuk method itu sendiri.

Jebakan callback klasik

Inilah cara paling umum this jadi kacau. Kamu mengirim sebuah method sebagai callback, dan ia kehilangan binding-nya:

class Counter {
    count = 0;
    increment() {
        this.count += 1;
        console.log(this.count);
    }
}

const c = new Counter();
c.increment();   // 1

// setTimeout(c.increment, 100);   // TypeError: this is undefined

setTimeout memanggil fungsinya sebagai pemanggilan biasa, bukan sebagai c.increment(). Ada tiga cara memperbaikinya:

class Counter {
    count = 0;
    increment() {
        this.count += 1;
        console.log(this.count);
    }
}

const c = new Counter();

// 1. Arrow wrapper - call it as a method inside the arrow
setTimeout(() => c.increment(), 0);

// 2. .bind - lock this to c
setTimeout(c.increment.bind(c), 0);

// 3. Class field with arrow - auto-bound per instance
class Counter2 {
    count = 0;
    increment = () => {
        this.count += 1;
        console.log(this.count);
    };
}
setTimeout(new Counter2().increment, 0);

Ketiganya berhasil. Pembungkus arrow biasanya yang paling jelas.

this di tingkat teratas

this di tingkat teratas bergantung pada tempat kodemu berjalan:

• Script browser (bukan module): this adalah window.
• ES module (termasuk sebagian besar kode modern hasil bundling): this bernilai undefined.
• Module CommonJS Node.js: this adalah module.exports.

Untuk rujukan yang andal ke object global di semua lingkungan, pakai globalThis:

console.log(typeof globalThis);   // object
globalThis.appVersion = "1.0.0";
console.log(globalThis.appVersion);

Dalam praktiknya, sebaiknya kamu tidak mengandalkan this di tingkat teratas. Pakai globalThis saat kamu memang butuh object global, dan selebihnya kirim nilai secara eksplisit.

Pohon keputusan singkat

Saat kamu melihat this dan tidak yakin nilainya apa, telusuri daftar ini:

1. Apakah fungsinya arrow function? Kalau ya, this adalah apa pun nilainya di scope yang membungkusnya. Abaikan tempat pemanggilan sepenuhnya.
2. Apakah dipanggil dengan new? Kalau ya, this adalah object baru itu.
3. Apakah dipanggil dengan .call, .apply, atau fungsi hasil bind? Kalau ya, this adalah apa yang dikirim.
4. Apakah dipanggil sebagai obj.method()? Kalau ya, this adalah obj.
5. Apakah dipanggil sebagai fn() biasa? Kalau ya, this bernilai undefined di strict mode.

Tangga itu, dengan urutan itu, menentukan setiap kasus.

Berikutnya: higher-order function

Sekarang this bukan lagi misteri, kamu siap untuk pola yang membuat JavaScript begitu ekspresif: mengoper fungsi sebagai nilai. Selanjutnya kita akan melihat higher-order function, yaitu fungsi yang menerima atau mengembalikan fungsi lain, dan bagaimana fungsi itu menggerakkan method array, event handler, dan sebagian besar kode JavaScript di dunia nyata.