بیت های سریع جاوا اسکریپت: روش های محاسبه شده

احتمالاً در مورد کلیدهای محاسبه شده در اشیا می دانید، اما آیا متوجه شده اید که می توانید از کلیدهای محاسبه شده با روش کوتاه نویسی استفاده کنید؟ احتمالاً هرگز نمی خواهید این کار را انجام دهید، اما شما می توانید.

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!'

درس تاریخ

در نسخه های اولیه جاوا اسکریپت، توابع همه در محدوده جهانی تعریف شده بودند. حتی در آن زمان می‌توانستید از براکت‌ها برای دریافت یا تنظیم مقادیر محاسبه‌شده استفاده کنید، اما بیشتر قابلیت‌هایی که ما فکر می‌کنیم در دسترس نبودند.

ECMAScript 3

ECMAScript 3 عبارات تابع و متدهای شی را برای ما آورده است. شما می توانید از نماد براکت برای تنظیم ویژگی ها یا روش ها استفاده کنید.

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

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

myObj[computedKey] = 'It worked!';

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

در صورت تمایل می‌توان نام متدهای پویا را داشت، اما آنها باید پس از ایجاد شی تعریف می‌شدند.

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

ECMAScript 2015

ECMAScript 2015 هم مختصر روش شی و هم خصوصیات محاسبه شده را معرفی کرد.

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

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

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

اگرچه مقاله MDN به طور خاص به آن اشاره نمی کند، می توانید همان طور که در ابتدای مقاله نشان داده شده است، خلاصه روش را با نام ویژگی های محاسبه شده ترکیب کنید.

مشکلات

ممکن است موارد لبه ای وجود داشته باشد که انجام این کار منطقی باشد، اما به طور کلی باید از این تکنیک اجتناب کنیم. هنگام تلاش برای درک کد، مکان یابی روش ها را بسیار دشوار می کند و کارایی پشتیبانی ویرایشگر کد مانند IntelliSense و اطلاعات نوع را کاهش می دهد.

جایگزین ها

هش ها یا پراکسی ها می توانند جایگزین های خوبی برای نام روش های محاسبه شده باشند. به برخی از راه‌هایی که می‌توانیم این کار را انجام دهیم نگاهی بیندازید و به من بگویید که کدام یک برای شما بهتر کار می‌کنند!

کد مشترک

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

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

نقشه برداری ساده

یک نقشه ساده از رشته‌ها برای تطبیق نام روش‌ها به تنظیمات بسیار کمی نیاز دارد، اما فراخوانی متدها را کمی سخت‌تر می‌کند.

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

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

نقشه برداری محدود

استفاده از یک شی با متدهای متصل به شی اصلی نیاز به تنظیمات بیشتری دارد اما کد را برای مصرف کننده ساده می کند.

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

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

پروکسی پایه

یک شی پراکسی بیشتر پیچیدگی ها را از بین می برد، زیرا می توانید مستقیماً با پروکسی تعامل داشته باشید. این از یک بررسی استاتیک در گیرنده برای یافتن ویژگی محاسبه شده ما استفاده می کند.

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

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

نقشه پروکسی پلاس

با استفاده از نقشه نام ویژگی a در مثال Plain Mapping، می‌توانیم از هر تعداد نگاشت متد پشتیبانی کنیم. اگر بخواهیم کمی ریسک حلقه های بی نهایت را بپذیریم، در واقع می توانیم از چندین غیر مستقیم پشتیبانی کنیم!

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!'

نتیجه گیری

امیدوارم از این سرگردانی کوتاه در مورد برخی از قابلیت های غیرمنتظره و (امیدوارم) استفاده نشده جاوا اسکریپت لذت برده باشید!