انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #1 من درس: خاصية call مع الدوال في لغة جافا سكريبت

this Keyword in JavaScript functions كلمة this مع الدوال في لغة جافا سكريبت

في هذا الدرس سوف نتعرف علي طرق تنفيذ الدوال التي قمنا بأنشائها 

1 صفوف تعليمية
جافا سكريبت
3,907 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

ماهي this Keword ؟

this Keyword لها إستخدامات في لغة جافا سكريبت عديدة وسوف نتطرق للحديث  بالتفصيل في الدروس المقبلة ولكن سوف نتحدث الآن عن علاقتها بالدوال function في لغة جافا سكريبت.

  • بداخل الكأئنات object method تشير this Keyword إلي الكائن بجميع خصائصة.
  • بدون الكائنات أو الدوال this Keyword تحمل كائن window.
  • تستخدم this داخل الدالة function  في الوضع الصارم "use strict" ، وتكون قيمتها الإفتراضية undefined غير معرف.
  • تستخدم this بداخل الدوال function  مع Javascript Event ، وهي تساوي في هذه الحالة عنصر HTML Element الذي يحتوي علي Event الذي  يستدعي هذة الدالة.

this Element

تغيير لون المعنصر عن طريق جافا سكريبت بأستخدام Event وبأستخدام this Keyword.

HTML 
<h1 id="heading" onclick="this.style.color = 'red' ">JavaScript Functions</h1>
جرّب بنفسك

this Element

تغيير لون العنصر وتغيير النص عن طريق جافا سكريبت بأستخدام Event وبأستخدام this Keyword.

HTML 
heading.onmouseover = function(){
  this.innerHTML = "Text Changed..";
  this.style.color = "blue";
}
جرّب بنفسك

this Element Inline

تغيير لون العنصر وتغيير النص عن طريق جافا سكريبت بأستخدام Event وبأستخدام this Keyword.

HTML 
<h1 id="heading">JavaScript Functions</h1>
<p class="para" onclick="myFunction(this)"> JavaScript Functions 1</p>
<p class="para" onclick="myFunction(this)"> JavaScript Functions 2</p>
<p class="para" onclick="myFunction(this)"> JavaScript Functions 3</p>
<script>
function myFunction(element){
  element.style.color = "red";
}
</script>
جرّب بنفسك

this with use strict

this keyword تكون قيمتها في الوضع الصارم undefind.

HTML 
function myFunction(){
  "use strict";
   document.write(this);
}
myFunction();
جرّب بنفسك

this without use strict

this keyword تكون قيمتها بدون الوضع الصارم تساوي object window.

HTML 
function myFunction(){
  return this;
}
let x = myFunction();
document.write(x.innerWidth);
document.write("<br>");
document.write(this.innerWidth);
جرّب بنفسك

this keyword with object

تستخدم this keyword وهي تعود علي الكائن الاصلي الزي تكتب بداخلة كلمة this.

HTML 
const student = {
  firstName: "Mohamed",
  lastName: "Ahmed",
  id: 99852,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

document.write(student.fullName());
جرّب بنفسك

جميع فقرات هذا الدرس (خاصية call مع الدوال في لغة جافا سكريبت)