Rumah  >  Artikel  >  hujung hadapan web  >  Cara Memanjangkan Fungsi dalam Kelas ES6: Menavigasi \'ini\' dan Teknik Penutupan

Cara Memanjangkan Fungsi dalam Kelas ES6: Menavigasi \'ini\' dan Teknik Penutupan

Barbara Streisand
Barbara Streisandasal
2024-10-21 06:02:30814semak imbas

How to Extend Functions in ES6 Classes: Navigating 'this' and Closure Techniques

Memperluas Fungsi dengan Kelas ES6: Memahami 'ini' dan Trik Penutupan

Melanjutkan objek khas dalam ES6 membolehkan warisan daripada fungsi, membolehkannya untuk dipanggil sebagai fungsi. Walau bagaimanapun, melaksanakan logik untuk panggilan sedemikian memerlukan pertimbangan yang teliti terhadap rujukan 'ini'.

Secara lalai, apabila kaedah dipanggil pada contoh kelas, 'ini' menunjuk kepada kejadian itu sendiri. Walau bagaimanapun, apabila fungsi dipanggil terus, 'ini' merujuk kepada objek global (cth., tetingkap). Untuk menangani perkara ini, kami mempunyai dua pilihan:

1. Data Pengekodan Keras dalam Pembina:

Panggilan 'super' boleh menggunakan pembina Fungsi, mengharapkan rentetan kod. Untuk mengakses data contoh, kami boleh mengekodkannya:

class Smth extends Function {
  constructor(x) {
    super("return " + JSON.stringify(x) + ";");
  }
}

2. Penutupan dan Pembalut Penutupan:

Untuk penyelesaian yang lebih fleksibel, kami perlu membuat penutupan yang memberikan data contoh kepada fungsi yang dikembalikan:

class Smth extends Function {
  constructor(x) {
    function smth() { return x; }
    Object.setPrototypeOf(smth, Smth.prototype);
    return smth;
  }
}

Untuk mengabstrakkan fungsi ini, kami boleh memperkenalkan kelas 'ExtensibleFunction':

class ExtensibleFunction extends Function {
  constructor(f) {
    return Object.setPrototypeOf(f, new.target.prototype);
  }
}

Subkelas kemudiannya boleh mewarisi daripada ExtensibleFunction:

class Smth extends ExtensibleFunction {
  constructor(x) {
    super(function() { return x; });
  }
}

Menggunakan fungsi anak panah atau fungsi bernama juga boleh menyediakan pendekatan alternatif, walaupun ia mungkin berbeza dalam tingkah laku warisan mereka.

Atas ialah kandungan terperinci Cara Memanjangkan Fungsi dalam Kelas ES6: Menavigasi \'ini\' dan Teknik Penutupan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn