عرض مصدر JavaScript/this

<noinclude>{{DISPLAYTITLE:الكلمة المحجوزة <code>this</code> في JavaScript}}</noinclude>
الكلمة المحجوزة <code>this</code> لها سلوكٌ في JavaScript يختلف عن بقية لغات البرمجة، وهنالك اختلافاتٌ في سلوكها بين [[JavaScript/Strict Mode|النمط strict]] و non-strict.

في أغلبية الحالات، تُحدَّد قيمة الكلمة المحجوزة <code>this</code> وفق طريقة استدعاء الدالة، إذ لا يمكن ضبط قيمتها باستخدام عملية الإسناد العادية أثناء التنفيذ؛ وقد تختلف قيمة <code>this</code> في كل مرة تُستدعى فيها الدالة.

أضافت ES5 الدالة <code>[[JavaScript/Function/bind|bind]]</code> التي تضبط قيمة <code>this</code> داخل الدالة بغض النظر عن طريقة استدعائها، وأضافت ES2015 [[JavaScript/Arrow Functions|الدوال السهمية]] (arrow functions) التي تُوفِّر ربطًا خاصًا بها للكلمة المحجوزة <code>this</code>.
==البنية العامة==
<syntaxhighlight lang="javascript">
this
</syntaxhighlight>

== السياق العام ==
تُشير الكلمة المحجوزة <code>this</code> في سياق التنفيذ العام (أي خارج جميع الدوال) إلى الكائن العام (global object) سواءً كان التنفيذ في [[JavaScript/Strict Mode|النمط strict]] أو non-strict.<syntaxhighlight lang="javascript">
// الكائن العام في المتصفحات هو window
console.log(this === window); // true

a = 37;
console.log(window.a); // 37

this.b = "HSOUB";
console.log(window.b); // "HSOUB"
console.log(b); // "HSOUB"

</syntaxhighlight>

== سياق الدوال ==
تختلف قيمة الكلمة المحجوزة <code>this</code> داخل الدوال اعتمادًا على طريقة استدعاء الدالة.

=== استدعاء بسيط ===
المثال الآتي لن يُنفَّذ في [[JavaScript/Strict Mode|نمط strict]]، ولأنَّ قيمة this ليست مضبوطةً باستخدام <code>[[JavaScript/Function/call|call]]</code>، فستُشير إلى الكائن العام (global object) والذي هو الكائن <code>window</code> في المتصفح.<syntaxhighlight lang="javascript">
function f1() {
  return this;
}

// متصفح
f1() === window; // true 

// Node
f1() === global; // true
</syntaxhighlight>أما قيمة this في [[JavaScript/Strict Mode|نمط strict]] فستبقى مساويةً إلى القيمة التي ضُبِطَت لها عند دخولها إلى سيبق التنفيذ، أي ستكون قيمة <code>this</code> في المثال الآتي مساويةً إلى <code>[[JavaScript/undefined|undefined]]</code>:<syntaxhighlight lang="javascript">
function f2() {
  'use strict'; // strict mode
  return this;
}

f2() === undefined; // true

</syntaxhighlight>أي لو كانت قيمة <code>this</code> غير مُعرَّفة في سياق التنفيذ فستبقى <code>[[JavaScript/undefined|undefined]]</code>، وذلك في [[JavaScript/Strict Mode|النمط strict]].

ملاحظة: يجب أن تكون قيمة <code>this</code> في المثال السابق مساويةً إلى <code>[[JavaScript/undefined|undefined]]</code>، ذلك لأنَّ الدالة <code>f2</code> اُستدعيَت مباشرةً ولم تستدعَ كخاصية (property) لكائنٍ ما (مثلًا: <code>window.f2()‎</code>)؛ لاحظ أنَّ هذه الميزة لم تكن مُطبّقةً في بعض المتصفحات عندما بدأت بدعم [[JavaScript/Strict Mode|النمط strict]]، وكنتيجة لذلك قد تجدها تعيد الكائن <code>window</code> خطأً.

لتمرير قيمة إلى <code>this</code> من سياقٍ لآخر فيمكن استخدام الدالة <code>[[JavaScript/Function/call|call]]</code> أو <code>[[JavaScript/Function/apply|apply]]</code>، لاحظ كيف أنشأنا كائنًا باسم <code>obj</code> ووضعنا فيه الخاصية <code>a</code> بقيمة معيّنة، ثم أنشأنا الخاصية <code>a</code> في الكائن العام واستدعينا الدالة بثلاث طرائق مختلفة:<syntaxhighlight lang="javascript">
// الكائن الذي سيُمرَّر إلى الدالة
var obj = {a: 'Custom'};

// خاصية في الكائن العام
var a = 'Global';

function whatsThis(arg) {
  return this.a;  // هذه القيمة تختلف حسب طريقة استدعاء الدالة
}

whatsThis(); // 'Global'
whatsThis.call(obj); // 'Custom'
whatsThis.apply(obj); // 'Custom'

</syntaxhighlight>نجد أنَّه عندما تستخدم دالةٌ ما الكلمةَ المحجوزةَ <code>this</code> في جسمها، فستكون قيمتها مرتبطةً بالكائن الذي مُرِّر إليها باستخدام الدالة <code>[[JavaScript/Function/call|call]]</code> أو <code>[[JavaScript/Function/apply|apply]]</code> والتي ترثها كل الدوال من سلسلة prototype (عبر الخاصية <code>Function.prototype</code>).<syntaxhighlight lang="javascript">
function add(c, d) {
  return this.a + this.b + c + d;
}

var o = {a: 1, b: 3};

// سيُمرَّ أوّل معامل إلى الدالة كقيمة this
// أما المعاملات التي تليه فستُمرَّر كوسائط إلى الدالة
add.call(o, 5, 7); // 16

// سيُمرَّ أوّل معامل إلى الدالة كقيمة this
// أما عناصر المصفوفة التي تليه فستُمرَّر كوسائط إلى الدالة
add.apply(o, [10, 20]); // 34

</syntaxhighlight>لاحظ أنَّه عند استخدام <code>[[JavaScript/Function/call|call]]</code> و <code>[[JavaScript/Function/apply|apply]]</code> إذا كانت القيمة المُمرَّرة كقيمة للكلمة المحجوزة <code>this</code> ليست كائنًا، فستتم محاولة تحويلها إلى كائن باستخدام العملية <code>ToObject</code>، فلو مررنا قيمةً أوليّةً (primitive) مثل <code>7</code> أو <code>'foo'</code>، فستحوَّل إلى كائن باستخدام الدالة البانية المناسبة، أي أنَّ الرقم <code>7</code> سيُحوَّل إلى كائن باستخدام <code>new Number(7)‎</code> والسلسلة النصية <code>'foo'</code> ستحوَّل إلى كائن باستخدام <code>‎new String('foo')</code>‎:<syntaxhighlight lang="javascript">
function bar() {
  console.log(Object.prototype.toString.call(this));
}

bar.call(7); // [object Number]
bar.call('foo'); // [object String]
</syntaxhighlight>

=== الدالة <code>[[JavaScript/Function/bind|bind]]</code> ===
أضافت ECMAScript 5 الدالة <code>[[JavaScript/Function/bind|Function.prototype.bind]]</code>، وسيؤدي تنفيذ <code>f.bind(someObject)‎</code> إلى إنشاء دالة جديدة لها نفس جسم ومجال الدالة <code>f</code> لكن ستكون قيمة الكلمة المحجوزة <code>this</code> في الدالة الجديدة مرتبطةً بالكائن المُمرَّر كأوّل وسيط للدالة <code>[[JavaScript/Function/bind|bind]]</code>، بغض النظر عن كيفية استخدام الدالة:<syntaxhighlight lang="javascript">
function f() {
  return this.a;
}

var g = f.bind({a: 'azerty'});
console.log(g()); // azerty

var h = g.bind({a: 'yoo'}); // لا يمكن تكرار العملية أكثر من مرة
console.log(h()); // azerty

var o = {a: 37, f: f, g: g, h: h};
console.log(o.f(), o.g(), o.h()); // 37, azerty, azerty

</syntaxhighlight>

=== الدوال السهمية ===
في [[JavaScript/Arrow Functions|الدوال السهمية]] (arrow functions) ستأخذ this قيمتها من سياق التنفيذ، أي أنها ستساوي الكائن العام إذا كانت الشيفرة في المجال العام:<syntaxhighlight lang="javascript">
var globalObject = this;
var foo = (() => this);
console.log(foo() === globalObject); // true

</syntaxhighlight>ملاحظة: إذا مررنا كائنًا إلى الدالة <code>[[JavaScript/Function/call|call]]</code> أو <code>[[JavaScript/Function/bind|bind]]</code> أو <code>[[JavaScript/Function/apply|apply]]</code> عند استدعاء دالة سهمية، فلن تُسنَد قيمته إلى <code>this</code> وسيُهمَل، لكن ستُمرَّر بقيمة الوسائط إلى الدالة.<syntaxhighlight lang="javascript">
var obj = {foo: foo};
console.log(obj.foo() === globalObject); // true

// call
console.log(foo.call(obj) === globalObject); // true

// bind
foo = foo.bind(obj);
console.log(foo() === globalObject); // true

</syntaxhighlight>بغض النظر عن طريقة استدعاء الدالة <code>foo</code>، فستبقى الكلمة المحجوزة <code>this</code> فيها تابعةً لسياق الإنشاء (وهي تساوي الكائن العام في المثال السابق)، وسينطبق المثال على الدوال السهمية المُنشَأة داخل الدوال الأخرى، إذ ستبقى الكلمة المحجوزة <code>this</code> تُشير إلى السياق الذي أُنشِئت الدالة فيه:<syntaxhighlight lang="javascript">
var obj = {bar: function() {
                    var x = (() => this);
                    return x;
                  }
          };

var fn = obj.bar();

console.log(fn() === obj); // true

var fn2 = obj.bar;
console.log(fn2()() == window); // true

</syntaxhighlight>في المثال السابق، أعادت الدالة (التي سنطلق عليها اسم الدالة المجهولة A) دالةً أخرى (سنطلق عليها اسم الدالة المجهولة B) التي هي دالةٌ سهميةٌ، والنتيجة هي ربط <code>this</code> في الدالة B إلى قيمة <code>this</code> للخاصية <code>obj.bar</code> (الدالة A) عند استدعائها.

=== استخدام <code>this</code> في دالة تابعة لكائن ===
عند استدعاء دالة تابعة لكائن، فستكون قيمة <code>this</code> فيها مضبوطةٌ إلى الكائن الذي استدعاها؛ ففي المثال الآتي عندما ستُستدعى الدالة <code>o.f()‎</code> فستُشير الكلمة المحجوزة <code>this</code> فيها إلى الكائن <code>o</code>:<syntaxhighlight lang="javascript">
var o = {
  prop: 37,
  f: function() {
    return this.prop;
  }
};

console.log(o.f()); // 37
</syntaxhighlight>لاحظ أنَّ هذا السلوك لن يتأثر بكيفية أو مكان إنشاء الدالة، ففي المثال السابق عرِّفنا الدالة على الخاصية <code>f</code> عند تهيئة الكائن <code>o</code>، لكن يمكنك تعريف الدالة أولًا ثم ربطها إلى الخاصية <code>o.f</code> ولن يختلف أثرها أبدًا:<syntaxhighlight lang="javascript">
var o = {prop: 37};

function independent() {
  return this.prop;
}

o.f = independent;

console.log(o.f()); // 37
</syntaxhighlight>المثال السابق يوضِّح أنَّ كل ما يهم هو أن تُستدعى الدالة من الخاصية <code>f</code> للكائن <code>o</code>.

لاحظ أنَّ <code>this</code> سترتبط بأقرِّب كائن، ففي المثال الآتي سنستدعي الدالة <code>g</code> التابعة للكائن <code>o.b</code>، وستُشير <code>this</code> فيها إلى الكائن <code>o.b</code>، ولن يهم أنَّ الكائن <code>o.b</code> هو عضوٌ في الكائن <code>o</code>:<syntaxhighlight lang="javascript">
o.b = {g: independent, prop: 42};
console.log(o.b.g()); // 42

</syntaxhighlight>

=== استخدام <code>this</code> في سلسلة prototype ===
إذا كانت الدالة موجودةً في سلسلة prototype فستشير <code>this</code> إلى الكائن الذي اُستدعيت الدالة عليها، كما لو كانت الدالةُ تابعةً للكائن مباشرةً:<syntaxhighlight lang="javascript">
var o = {f: function() { return this.a + this.b; }};
var p = Object.create(o);
p.a = 1;
p.b = 4;

console.log(p.f()); // 5

</syntaxhighlight>الكائن المُسنَد إلى المتغير <code>p</code> في المثال السابق لا يملك خاصيةً تابعةً له مباشرةً باسم <code>f</code>، وإنما يرثها من سلسلة prototype، وعند استدعاء الدالة <code>f</code> مع الكائن <code>p</code>، فستشير الكلمة المحجوزة <code>this</code> إلى الكائن <code>p</code>؛ لاحظ أنَّ هذا السلوك مثير للاهتمام في طريقة الوراثة عبر سلسلة prototype في JavaScript.

=== استخدام <code>this</code> مع الدوال البانية ===
عند استخدام إحدى الدوال كدالة بانية (constructor، مع الكلمة المحجوزة <code>[[JavaScript/new|new]]</code>)، فسترتبط الكلمة المحجوزة <code>this</code> مع الكائن الذي سيُنشَأ.

وصحيحٌ أنَّ السلوك الافتراضي للدالة البانية هو إعادة الكائن المُشار إليها عبر الكلمة المحجوزة <code>this</code>، لكن يمكنها أن تُعيد كائنًا آخر.<syntaxhighlight lang="javascript">
function C() {
  this.a = 37;
}

var o = new C();
console.log(o.a); // 37


function C2() {
  this.a = 37;
  return {a: 38};
}

o = new C2();
console.log(o.a); // 38

</syntaxhighlight>لاحظ كيف أُعيد كائنٌ أثناء الإنشاء في المثال الأخير (<code>C2</code>)، وأُهمِلَ الكائن الذي كانت تُشير <code>this</code> إليه.

=== استخدام <code>this</code> للتعامل مع الأحداث في DOM ===
عندما تُستخدَم دالةٌ لمعالجة أحد الأحداث، فستُشير الكلمة المحجوزة <code>this</code> إلى الكائن الذي أدى إلى إطلاق الحدث:<syntaxhighlight lang="javascript">
function bluify(e) {
  // الشرط الآتي محقق دومًا
  console.log(this === e.currentTarget); 
  // سيُحقَّق الشرط الآتي إذا كان
  // currentTarget === target
  console.log(this === e.target);
  this.style.backgroundColor = '#A5D9F3';
}

// الحصول على قائمة بجميع عناصر المستند
var elements = document.getElementsByTagName('*');

// إضافة الدالة للاستماع إلى حدث النقر على العنصر
for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener('click', bluify, false);
}

</syntaxhighlight>

=== استخدام <code>this</code> للتعامل مع الأحداث ضمن عناصر HTML ===
إذا استخدمنا الأحداث ضمن عناصر HTML، فستُضبَط قيمة <code>this</code> إلى عنصر DOM الذي أدى إلى إطلاق الحدث. جرِّب الضغط على عنصر <code>[[HTML/button|<button>]]</code> الآتي:<syntaxhighlight lang="html">
<button onclick="alert(this.tagName.toLowerCase());">
  Show this
</button>

</syntaxhighlight>نافذة التنبيه السابقة ستُظهِر الكلمة <code>button</code>. لاحظ أنَّ الشيفرة الموجودة في أعلى مستوى ستكون قيمة <code>this</code> فيها كما سبق:<syntaxhighlight lang="html">
<button onclick="alert((function() { return this; })());">
  Show inner this
</button>
</syntaxhighlight>في هذه الحالة، ستُشير الكلمة المحجوزة <code>this</code> داخل الدالة إلى الكائن العام.

== دعم المتصفحات ==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|نعم
|نعم
|نعم
|نعم
|نعم
|}

== مصادر ومواصفات ==
* مسودة المعيار [https://tc39.github.io/ecma262/#sec-this-keyword ECMAScript Latest Draft].
* معيار [http://www.ecma-international.org/ecma-262/6.0/#sec-this-keyword ECMAScript 2015 (6th Edition)]‎.
* معيار [http://www.ecma-international.org/ecma-262/5.1/#sec-11.1.1 ECMAScript 5.1].
* معيار [http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%203rd%20edition,%20December%201999.pdf#sec-11.1.1 ECMAScript 3rd Edition].
* معيار [http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%201st%20edition,%20June%201997.pdf#sec-11.1.1 ECMAScript 1st Edition] . 
[[تصنيف:JavaScript|{{SUBPAGENAME}}]]
[[تصنيف:JavaScript Operator|{{SUBPAGENAME}}]]