مؤشر جافا سكريبت "هذا" في معضلة الوظائف المتداخلة

في سيناريو تطوير الويب، سلوك المؤشر "هذا" داخل الوظائف المتداخلة يمكن أن يكون محيرا. خذ بعين الاعتبار الكود التالي:

var std_obj = {
  options: {rows: 0, cols: 0},
  activeEffect: "none",
  displayMe: function() {
    // this refers to std_obj
    if (this.activeEffect == "fade") {}

    var doSomeEffects = function() {
      // this surprisingly refers to window object
      if (this.activeEffect == "fade") {}
    }

    doSomeEffects();
  }
};

std_obj.displayMe();

في الكود أعلاه، يشير المؤشر "هذا" داخل الوظيفة المتداخلة "doSomeEffects()" بشكل غير متوقع إلى كائن "النافذة". يتناقض هذا السلوك مع التوقع بأن الوظيفة المتداخلة سوف ترث نطاق الوظيفة الخارجية، حيث يشير "هذا" إلى "std_obj".

فهم استدعاء وظيفة جافا سكريبت ونطاقها

يعتمد سلوك "هذا" في وظائف Javascript على كيفية استدعاء الوظيفة. بشكل عام، هناك ثلاث طرق:

1. استدعاء الأسلوب: someThing.someFunction(arg1, arg2, argN)
2. استدعاء الدالة: someFunction.call(someThing, arg1, arg2, argN)
3. Function.apply Invocation: someFunction.apply(someThing, [arg1, arg2, argN])

في كل هذه الدعوات، "هذا "الكائن سيكون "شيء ما". ومع ذلك، فإن استدعاء دالة بدون كائن أصل بادئ (على سبيل المثال، doSomeEffects() في المثال) سيؤدي بشكل عام إلى تعيين الكائن "هذا" إلى الكائن العام، والذي يكون في معظم المتصفحات كائن "نافذة".

في رمز المثال، يتم استدعاء الوظيفة المتداخلة "doSomeEffects()" بدون كائن أصل، لذلك ترث النطاق العام ويشير مؤشر "هذا" إلى كائن "نافذة". ولهذا السبب لاحظت السلوك غير المتوقع.

للتأكد من أن الوظيفة المتداخلة لديها حق الوصول إلى نطاق "std_obj"، يمكنك استدعاؤها باستخدام طريقة Function.call() مع كائن "std_obj" باعتباره الكائن الوسيطة الأولى:

var doSomeEffects = function() {
  // this now refers to std_obj
  if (this.activeEffect == "fade") {}
}

doSomeEffects.call(std_obj);

يعد فهم الفروق الدقيقة لسلوك المؤشر "هذا" في Javascript أمرًا بالغ الأهمية لبناء تطبيقات قوية وقابلة للصيانة.