kaedah &#this', call(), apply() dan bind() dalam JavaScript - dijelaskan secara ringkas

Mempelajari kaedah call(), apply(), dan bind() adalah penting kerana kaedah ini membolehkan anda mengawal konteks ini dalam JavaScript. Dalam situasi di mana kelakuan lalai ini tidak berfungsi seperti yang dijangkakan, seperti semasa meminjam kaedah daripada satu objek ke objek lain atau mengekalkan konteks yang betul dalam panggilan balik, kaedah ini memberikan fleksibiliti dan kawalan. Dengan menguasainya, anda boleh menulis fungsi yang lebih cekap, boleh digunakan semula dan peka konteks, yang amat berguna dalam aplikasi yang kompleks.

sebelum kita memasuki kaedah call(), apply() dan bind(), mari kita fahami kata kunci 'ini' dan mekanismenya.

Kata kunci 'ini'

Mari kita fahami bila dan perkara yang dirujuk oleh kata kunci ini dengan titik tumpu berikut di sini:

• Dalam kaedah objek, ini merujuk kepada objek. Di dalam kaedah yang ditakrifkan dalam objek, ini akan menunjukkan kepada objek yang memiliki kaedah tersebut.

• Dalam fungsi biasa, ini merujuk kepada objek global. Dalam mod tidak ketat, jika fungsi digunakan dalam konteks global (bukan sebagai kaedah objek), ini merujuk kepada objek global (tetingkap dalam penyemak imbas).

• Dalam fungsi mod ketat, ini tidak ditentukan. Jika fungsi itu bukan kaedah objek dan tidak terikat pada konteks tertentu (melalui panggilan, gunakan atau ikat), ini tidak akan ditentukan dalam mod ketat.

• Dalam pengendali acara, ini merujuk kepada elemen yang menerima acara. Apabila peristiwa dicetuskan, ini merujuk kepada elemen HTML yang menggunakan acara tersebut.
  

  <button onclick="this.style.display='none'">
    Click to Remove Me!
  </button>
  

  Dalam kes ini, ini merujuk kepada elemen butang itu sendiri yang menerima acara onclick.

Dalam fungsi anak panah, ini berkelakuan berbeza. Fungsi anak panah tidak mempunyai konteks ini sendiri. Sebaliknya, ini diwarisi secara leksikal daripada skop sekeliling pada masa fungsi anak panah dicipta. Ini bermakna ini di dalam fungsi anak panah akan merujuk kepada nilai ini bagi fungsi atau konteks lampirannya.

const person = {
  name: "Alice",
  greet: function() {
    setTimeout(() => {
      console.log(`Hi, I'm ${this.name}`);
    }, 1000);
  }
};

person.greet(); // Output: Hi, I'm Alice

Dalam kes ini, fungsi anak panah di dalam setTimeout mewarisi ini daripada kaedah salam, yang menunjuk kepada objek orang.

kaedah panggilan().

Kaedah call() membolehkan anda "meminjam" fungsi atau kaedah daripada satu objek dan menggunakannya dengan objek lain dengan menghantar objek lain sebagai hujah pertama. Argumen pertama menjadi nilai ini di dalam fungsi dan argumen tambahan menyusuli selepasnya.

Kaedah call() tidak mencipta fungsi baharu; ia menjalankan fungsi sedia ada dengan konteks dan hujah yang disediakan.

const person = {
  fullName: function(city, country) {
    console.log(this.firstName + " " + this.lastName + " is going to " + city + ", " + country + ".");
  }
}

const person1 = {
  firstName: "John",
  lastName: "Doe"
}

person.fullName.call(person1, "Oslo", "Norway");
// Output: John Doe is going to Oslo, Norway.

Dalam contoh ini, call() digunakan untuk melaksanakan kaedah Nama penuh orang dengan data person1 (Nama depan dan Nama akhir), dan hujah tambahan ialah "Oslo" dan "Norway".

apply() Kaedah

Kaedah apply() sangat serupa dengan kaedah call(). Perbezaan utama terletak pada cara hujah dihantar ke fungsi. Dengan apply(), anda menghantar argumen sebagai tatasusunan (atau objek seperti tatasusunan), bukannya secara individu.

Seperti call(), kaedah apply() tidak mencipta fungsi baharu. Ia segera melaksanakan fungsi dengan konteks yang disediakan (nilai ini) dan argumen.

const person = {
  fullName: function(city, country) {
    console.log(this.firstName + " " + this.lastName + " is going to " + city + ", " + country + ".");
  }
}

const person1 = {
  firstName: "John",
  lastName: "Doe"
}

person.fullName.apply(person1, ["Oslo", "Norway"]);
// Output: John Doe is going to Oslo, Norway.

Dalam contoh ini, apply() digunakan untuk memanggil kaedah Nama penuh objek orang, tetapi dengan konteks (ini) orang1. Argumen "Oslo" dan "Norway" dihantar sebagai tatasusunan.

bind() Kaedah

Kaedah bind() dalam JavaScript membolehkan anda menetapkan konteks (nilai ini) untuk fungsi atau kaedah, sama seperti call() dan apply(). Walau bagaimanapun, tidak seperti call() dan apply(), kaedah bind() tidak menggunakan fungsi tersebut dengan serta-merta. Sebaliknya, ia mengembalikan fungsi baharu dengan set nilai ini kepada objek yang anda tentukan.

const person = {
  fullName: function(city, country) {
    console.log(this.firstName + " " + this.lastName + " is going to " + city + ", " + country + ".");
  }
}

const person1 = {
  firstName: "John",
  lastName: "Doe"
}

const func = person.fullName.bind(person1);
func("Oslo", "Norway");
// Output: John Doe is going to Oslo, Norway.

Dalam contoh ini, bind() mencipta fungsi fungsi baharu dengan nilai ini ditetapkan kepada person1. Fungsi ini tidak dipanggil serta-merta, tetapi anda boleh memanggilnya kemudian, menghantar argumen "Oslo" dan "Norway".

Contoh: Logger Berpusat dengan Pelbagai Konteks

Berikut ialah contoh aplikasi yang kecil tetapi kompleks di mana menggunakan call(), apply(), atau bind() membawa kecekapan—terutamanya dalam pengendalian aplikasi separa fungsi untuk tujuan pengelogan:

Katakan anda mempunyai fungsi pengelogan berpusat yang merekodkan maklumat tentang pengguna yang berbeza yang melakukan tindakan. Menggunakan bind() membolehkan anda menetapkan konteks ini kepada pengguna yang berbeza dengan cekap, mengelakkan kod berulang.

const logger = {
  logAction: function(action) {
    console.log(`${this.name} (ID: ${this.id}) performed: ${action}`);
  }
};

const user1 = { name: "Alice", id: 101 };
const user2 = { name: "Bob", id: 202 };

// Create new logger functions for different users
const logForUser1 = logger.logAction.bind(user1);
const logForUser2 = logger.logAction.bind(user2);

// Perform actions without manually passing user context
logForUser1("login");
// Output: Alice (ID: 101) performed: login

logForUser2("purchase");
// Output: Bob (ID: 202) performed: purchase

Mengapa Ia Cekap:

Penggunaan Semula Konteks: Anda tidak perlu melepasi konteks pengguna secara manual setiap kali anda melog tindakan. Konteks (ini) diikat sekali, dan pembalakan menjadi boleh diguna semula dan bersih.

Modulariti: Jika anda perlu menambah lebih ramai pengguna atau tindakan, anda boleh mengikat mereka dengan cepat pada pembalak tanpa mengubah fungsi itu sendiri, memastikan kod anda KERING (Jangan Ulangi Sendiri).

Atas ialah kandungan terperinci kaedah &#this', call(), apply() dan bind() dalam JavaScript - dijelaskan secara ringkas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!