معالجة خطأ عند إستعمال this في الجافا سكريبت.

هذا الخطأ معناه أن السكريبت لم يتعرف على العنصر والذي أشرت اليه ب this ، بحيث منطقيا لا يمكننا أن نتلاعب بعنصر غير موجود . 

لذلك عليك أن تمرر قيمة كوسيط للدالة :

const btn1 = document.querySelector(".btn1")

btn1.addEventListener('click', (e)=>{
    test(e)
})

const test = (e) => {
  // نأخذ العنصر كـ target 
    target = e.target;
    return target.style.display='none'
}

الدوال السهمية في جافاسكربت لا تمتلك اي ارتباطات مع this او arguments ولا يجب ابدا استعمالها كتوابع او ضمن سياق الكائنات.

يفترض ان تستقبل الوظيفة test العنصر المستهدف الممرر اليها في تصريحها ولا مشكلة ان تتجاوز تنسيقاته آنها:

const test = (e) => {
    return e.style.display='none'
}

ايضا للاشارة الى العنصر button المستهدف في اسنادك للوظيفة استعمل تصريحا عاديا regular function:

btn1.addEventListener('click', function() {
    test(this)
})

يفترض ان يصلح هذا المشكل الخاص بك.

إن التوابع السهمية لا تملك خاصية ربط للمؤشر this لوحدها، حيث أنها تأخذ ذلك من المحيط التي هي فيه على شكل closure.

أي في حال قمنا بوضعها ضمن class فإنها ستأخذ ال this الخاص بهذا ال class بشكل دقيق سوف تأخذ ال this كغرض من هذا ال class في حال كانت الطريقة عادية أو ستكون this تدل على ال class نفسه في حال كانت الطريقة static و لكن بما أنها تقوم بذلك على شكل closure فإن ذلك سيكون غير قابل للتعديل، أي أنه في حال أخذنا التابع من هذا الصف فإن this ستظل مرتبطة به، لفهم هذه الخاصية هذا مثال يوضح ذلك:

class C {
  a = 1;
  autoBoundMethod = () => {
    console.log(this.a);
  }
}

const c = new C();
c.autoBoundMethod(); // 1
const { autoBoundMethod } = c;
autoBoundMethod(); // 1
// If it were a normal method, it should be undefined in this case

بتاريخ 1 ساعة قال Kais Hasan:

إن التوابع السهمية لا تملك خاصية ربط للمؤشر this لوحدها، حيث أنها تأخذ ذلك من المحيط التي هي فيه على شكل closure.

أي في حال قمنا بوضعها ضمن class فإنها ستأخذ ال this الخاص بهذا ال class بشكل دقيق سوف تأخذ ال this كغرض من هذا ال class في حال كانت الطريقة عادية أو ستكون this تدل على ال class نفسه في حال كانت الطريقة static و لكن بما أنها تقوم بذلك على شكل closure فإن ذلك سيكون غير قابل للتعديل، أي أنه في حال أخذنا التابع من هذا الصف فإن this ستظل مرتبطة به، لفهم هذه الخاصية هذا مثال يوضح ذلك:

class C {
  a = 1;
  autoBoundMethod = () => {
    console.log(this.a);
  }
}

const c = new C();
c.autoBoundMethod(); // 1
const { autoBoundMethod } = c;
autoBoundMethod(); // 1
// If it were a normal method, it should be undefined in this case

 

شكرا.

this في arrow function تأتي من المحتوى التي هي ضمنه. لذلك لم يقع التعرف على this.

وبالتالي يصبح الحل:

const btn1 = document.querySelector(".btn1")

btn1.addEventListener('click', test)

function test(){
    this.style.display = 'none'
}