Bit Pantas JavaScript: Kaedah Dikira

Anda mungkin tahu tentang kunci terkira dalam objek, tetapi adakah anda sedar bahawa anda boleh menggunakan kunci terkira dengan kaedah trengkas? Anda mungkin tidak pernah mahu melakukan ini, tetapi anda boleh.

const methodName = 'myMethod';
const computedKey = 'computed';

const myObj = {
  // Computed Property
  [computedKey]: 'It worked!',

  // ? Is this a good idea? Probably not, no.
  // Computed property + Method shorthand
  [methodName]() {
    return this.computed;
  },
};

myObj.myMethod();
// 'It worked!'

Pelajaran Sejarah

Dalam versi JavaScript yang terawal, semua fungsi ditakrifkan dalam skop global. Pada masa itu anda boleh menggunakan kurungan untuk mendapatkan atau menetapkan nilai yang dikira, tetapi kebanyakan keupayaan yang kami fikirkan tidak tersedia.

ECMAScript 3

ECMAScript 3 membawakan kami ungkapan fungsi dan kaedah objek. Anda boleh menggunakan notasi kurungan untuk menetapkan sifat atau kaedah.

// Old JavaScript.
var computedKey = 'computed';

var myObj = {
  // Key and function separately.
  myMethod: function () {
    return this.computed;
  },
};

myObj[computedKey] = 'It worked!';

myObj.myMethod();
// 'It worked!'

Adalah kemungkinan untuk mempunyai nama kaedah dinamik jika anda mahu tetapi ia perlu ditakrifkan selepas objek dibuat.

myObj = {};
myObj[methodName] = function() {
  return this.computed;
};

ECMAScript 2015

ECMAScript 2015 memperkenalkan kedua-dua kaedah objek trengkas dan sifat dikira.

// Exciting new JavaScript!
const computedKey = 'computed';

const myObj = {
  // Method shorthand
  myMethod() {
    return this.computed;
  },
  // Computed Property
  [computedKey]: 'It worked!',
};

myObj.myMethod();
// 'It worked!'

Walaupun artikel MDN tidak menyebutnya secara khusus, anda boleh menggabungkan trengkas kaedah dengan nama sifat yang dikira, seperti yang ditunjukkan pada permulaan artikel.

Masalah

Mungkin terdapat beberapa kes kelebihan yang masuk akal untuk melakukan ini, tetapi secara umum kita harus mengelakkan teknik ini. Ia menjadikannya sangat sukar untuk mencari kaedah apabila cuba memahami kod dan mengurangkan keberkesanan sokongan editor kod seperti IntelliSense dan maklumat taip.

Alternatif

Cincang atau proksi boleh menjadi alternatif yang baik kepada nama kaedah yang dikira. Lihat beberapa cara kami boleh membuat ini berfungsi dan beritahu saya yang mana yang anda rasa paling sesuai untuk anda!

Kod Biasa

const methodName = 'myMethod';
const computedKey = 'computed';

const myObj = {
  getComputed() {
    return this.computed;
  },
  [computedKey]: 'It worked!',
};

Pemetaan Biasa

Peta rentetan ringkas untuk memadankan nama kaedah memerlukan persediaan yang sangat sedikit tetapi menjadikannya lebih sukar untuk memanggil kaedah.

const methodMap = {
  [methodName]: 'getComputed',
};

myObj[methodMap.myMethod]();
// 'It worked!';

Pemetaan Terikat

Menggunakan objek dengan kaedah terikat pada objek asal memerlukan lebih banyak persediaan tetapi memudahkan kod untuk pengguna.

const methodMapBound = {
  [methodName]: myObj.getComputed.bind(myObj),
};

methodMapBound.myMethod();
// 'It worked!'

Proksi Asas

Objek Proksi menghapuskan kebanyakan komplikasi, kerana anda boleh berinteraksi secara langsung dengan proksi. Ini menggunakan semakan statik dalam pengambil untuk mencari harta pengiraan kami.

const basicProxy = new Proxy(myObj, {
  get(target, prop, receiver) {
    if (prop === methodName) {
      return myObj.getComputed;
    }
    return Reflect.get(...arguments);
  },
});

basicProxy.myMethod();
// 'It worked!'

Peta Proksi Plus

Menggunakan peta nama sifat a dalam contoh Pemetaan Biasa, kami boleh menyokong sebarang bilangan pemetaan kaedah. Jika kami bersedia menerima sedikit risiko gelung tak terhingga, kami sebenarnya boleh menyokong pelbagai arah!

const methodMap = {
  [methodName]: 'getComputed',
  'thisIsWild': methodName,
};

const methodProxy = new Proxy(myObj, {
  get(target, prop, receiver) {
    if (methodMap[prop]) {
      // Using receiver allows multiple indirection
      return receiver[methodMap[prop]];
    }
    return Reflect.get(...arguments);
  },
});

methodProxy.myMethod();
// 'It worked!'

methodProxy.thisIsWild();
// 'It worked!'

Kesimpulan

Saya harap anda menikmati pengembaraan ringkas ini ke beberapa keupayaan JavaScript yang tidak dijangka dan (mudah-mudahan) yang tidak digunakan!

Atas ialah kandungan terperinci Bit Pantas JavaScript: Kaedah Dikira. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!