كلمة this في JavaScript

مثال

var person = {
  firstName: "Bill" ,
  lastName : "Gates" ,
  id       : 678 ,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

تجربة بنفسك

ما هو this؟

JavaScript this الكلمة المفتاحية تشير إلى الكائن الذي ينتمي إليه.

انه يمتلك قيمًا مختلفة، اعتمادًا على موقعه في الاستخدام:

  • في الأسلوب،this يعني كائن المالك.
  • في الحالة المنفردة،this يعني الكائن العام.
  • في الدالة،this يعني الكائن العام.
  • في الدالة، في الوضع الصارم،this غير معرف.
  • في الحدث،this يعني العنصر الذي يستقبل الحدث.

مثل call() و apply() يمكن لهذا الأسلوب إقحام this في أي كائن.

في هذا الأسلوب this

في أسلوب الكائن،this يعني "مالك" هذه الدالة.

في المثال في أعلى الصفحة،this يعني كائن person.

هو مالك دالة fullName.

fullName : function() {
  return this.firstName + " " + this.lastName;
}

تجربة بنفسك

this المنفرد

في الاستخدام المنفرد، المالك هو الكائن العام، لذلك this يعني الكائن العام.

في نافذة المتصفح، الكائن العام هو [object Window]:

مثال

var x = this ;

تجربة بنفسك

في الوضع الصارم، إذا تم استخدامه بشكل منفرد، this يعني الكائن العام [object Window]:

مثال

"use strict" ;
var x = this ;

تجربة بنفسك

في الدالة this (الافتراضي)

في دالة JavaScript، ي绑定 مالك الدالة افتراضيًا this.

لذلك، في الدالة،this يعني الكائن العام [object Window].

مثال

function myFunction() {
  return this ;
}

تجربة بنفسك

في الدالة this (الوضع الصارم)

يمنع الوضع الصارم في JavaScript التزامن الافتراضي.

لذلك، عند استخدامها في الدالة، في الوضع الصارم،this غير معرف (غير معرف هوundefined})

مثال

"use strict" ;
function myFunction() {
  return this ;
}

تجربة بنفسك

في معالج الحدث this

في معالج الحدث في HTML ,this يعني العنصر HTML الذي يستقبل هذا الحدث :

مثال

<button onclick="this.style.display='none'">
  انقر هنا لإزالة!
</button>

تجربة بنفسك

تحديد أسلوب الكائن

في هذا المثال ,this هو شخص person (person هو "مالك" هذه الدالة) :

مثال

var person = {
  firstName  : "Bill" ,
  lastName   : "Gates" ,
  id         : 678 ,
  myFunction : function() {
    return this ;
  }
};

تجربة بنفسك

مثال

var person = {
  firstName: "Bill" ,
  lastName : "Gates" ,
  id       : 678 ,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

تجربة بنفسك

بمعنى آخر،this.firstName يعني thisللمعامل firstName الصفات.

التحكم التام في الوظائف

call() و apply() الطرق هي طرق JavaScript المحددة مسبقًا.

يمكن استخدامها لتحويل إحداثيات الأجسام إلى معاملات لتمويل الطرق.

يمكنك قراءة المزيد عنها في هذا الدليل. call() و apply() المزيد من المعلومات.

في المثال التالي، عند استخدام person2 كمعامل لتشغيل person1.fullName،this سيقوم بإقتباس person2، حتى لو كان طريقة person1:

مثال

var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName: "Bill",
  lastName: "Gates",
}
person1.fullName.call(person2);  // سيقوم بإرجاع "Bill Gates"

تجربة بنفسك