ترفندهای عملکرد – انجمن DEV

انگیزه

برخی از ویژگی‌های JS در زیر کاپوت پنهان یا تحت برخی عبارات و غیره پنهان شده‌اند.

این مقاله قصد دارد برخی از ویژگی ها یا رویکردهایی را که در ظاهر نیستند روشن کند.

پیش نیازها

دانش JS و بس.

مورد 1

ما یک کد ساده داریم:

function test(a,b){
  return {
    sum: a + b,
    multiplied: a * b
  }
}

این تابع فقط یک شی را با مجموع و چند برابر ارزش های.

ما می توانیم تابعی را به صورت زیر فراخوانی کنیم:

test(1,2) // -> {sum: 3, multiplied: 2}

اما همچنین می توانیم عملکرد خود را به این صورت تغییر دهیم:

function test(a,b){
  this.sum = a + b
  this.multiplied = a * b
}

در این مورد، ما هیچ دستور بازگشتی نداریم، اما در بازگشت فراخوانی به این صورت است:

new test(1,2)

ما همان ساختار را خواهیم داشت، به شکل زیر:

test {
  sum: 3,
  multiplied: 2,
  __proto__: { constructor: ƒ test() }
}

مورد شماره 2

روش معمولی برای فراخوانی تابع:

//....
testFunction(a,b,c)

اما اگر args نداشته باشیم روش دیگری برای فراخوانی داریم (مثلا):

function test(){
  return { message: "Hi there!" }
}

const data = new test

console.log(data.message) // -> "Hi there!"

مورد شماره 3

روش معمولی که می‌توانیم از آن استفاده کنیم، شیء را در دستور return در داخل تابع ارائه می‌کند، اما در صورت نیاز می‌توانیم از آن در خارج استفاده کنیم.

منظم:

function test(){
  return { message: "Hi there!" }
}

console.log(test()) // -> "Hi there!"

عجیب اما ممکن:

function test(){
  return { message: "Hi there!" }
}
test.useTest = function(){
  return this()
}

console.log(test.useTest()) // -> "Hi there!"

به عنوان مثال در React ما می توانیم از این رویکرد برای ترکیب اجزای خود استفاده کنیم.

نتیجه

JS پیچیده است و به آن سادگی که به نظر می رسد نیست.