وأوضح إغلاق جافا سكريبت

مقدمة لطيفة لموضوع الإغلاق ، مفتاح لفهم كيفية عمل وظائف JavaScript

إذا سبق لك كتابة ملفوظيفةفي JavaScript ، قمت بالفعل باستخدامالإغلاق.

إنه موضوع رئيسي يجب فهمه ، وله آثار على الأشياء التي يمكنك القيام بها.

عندما يتم تشغيل وظيفة ، يتم تنفيذهابالنطاق الذي كان موجودًا عندما تم تحديده، وليسمع الحالة القائمة عندما تكونأعدم.

النطاق أساسًا هو مجموعة المتغيرات المرئية.

وظيفة تتذكرالنطاق المعجمي، ويمكنه الوصول إلى المتغيرات التي تم تحديدها في النطاق الأصلي.

باختصار ، تحتوي الوظيفة على مجموعة كاملة من المتغيرات التي يمكنها الوصول إليها.

اسمحوا لي على الفور أن أعطي مثالا لتوضيح ذلك.

const bark = dog => {
  const say = `${dog} barked!`
  ;(() => console.log(say))()
}

bark(Roger)

هذا يسجل إلى وحدة التحكمRoger barked!، كما هو متوقع.

ماذا لو كنت تريد إرجاع الإجراء بدلاً من ذلك:

const prepareBark = dog => {
  const say = `${dog} barked!`
  return () => console.log(say)
}

const bark = prepareBark(Roger)

bark()

يسجل هذا المقتطف أيضًا في وحدة التحكمRoger barked!.

لنجعل مثالًا أخيرًا يعيد استخدامهprepareBarkلكلبين مختلفين:

const prepareBark = dog => {
  const say = `${dog} barked!`
  return () => {
    console.log(say)
  }
}

const rogerBark = prepareBark(Roger) const sydBark = prepareBark(Syd)

rogerBark() sydBark()

هذا يطبع

Roger barked!
Syd barked!

As you can see, the state of the variable say is linked to the function that’s returned from prepareBark().

Also notice that we redefine a new say variable the second time we call prepareBark(), but that does not affect the state of the first prepareBark() scope.

This is how a closure works: the function that’s returned keeps the original state in its scope.


More js tutorials: