كلمة this لـ JavaScript

مقارنة باللغات الأخرى، يكون سلوك كلمة this في JavaScript مختلفًا قليلاً.

في JavaScript، يشير كلمة this إلى العنصر الذي ينتمي إليه.

باعتماد موقعه في الاستخدام، يختلف قيمته:

• في الدالة، يشير this إلىالعنصر المالك

• بشكل منفرد، يشير this إلىالعنصر العالمي

• في الدالة، يشير this إلىالعنصر العالمي

• في الدالة، في الوضع الصارم، يشير this إلىغير محددةالذي

• في الحدث، يشير this إلى العنصرالعنصر

• كما يمكن تمريرها إلى مثل call() و apply()أي عنصر

سياق الطريقة

في الطريقة الخاصة بالعنصر، يشير "this" إلى السياق الخاص بالطريقة.user.

في المثال التالي، عند استدعاءuser.getName()عند، يتم ربط "this" في الداخل وظيفة إلىuserالعنصر:

var user = {
firstName: "Vishal",
lastName : "Choudhary",
age : 22,
getName : function() {
　return this.firstName + " " + this.lastName;
}
;
document.write(user.getName()); // "Vishal Choudhary"

هناuserالمعادلة هي مالكgetNameالطريقة.

سياق العالم

في سياق التنفيذ العالمي (خارج أي وظيفة)، "this" في أي حال من الحالات، يشير إلى العنصر العالمي.

// في متصفح الويب، العنصر العالمي هو أيضًا العنصر العالمي:
console.log(this === window); // true
a = 50;
console.log(window.a); // 50
this.b = "w3codebox";
console.log(window.b) // "w3codebox"
console.log(b) // "w3codebox"

في نافذة المتصفح، العنصر العالمي هو[object Window].

سياق الوظيفة

في الداخل وظيفة، قيمة "this" تعتمد على طريقة التطبيق للوظيفة.

بسبب أن هذا الكود ليس في النمط الصارم، فإن "this" يتم تعيينه بشكل افتراضي إلى العنصر العالمي، أي العنصر العالمي في المتصفح:[object Window]:

function myFunc() {
return this;
}

في النمط الصارم، ومع ذلك، قيمة "this" هيغير محدد:

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

لذلك، في النمط الصارم، إذا كان سياق التنفيذغير محددةفإذا كانت "it"، فإنها ستبقىالحالة غير المحددة.

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

عند استخدام وظيفة كمعالج الحدث، سيتم تعيين "this" إلى العنصر الذي تم إطلاق الحدث عليه:

let btn = document.querySelector("button");
btn.onclick = function() {
this.style.display = "none";
;

عند تفعيل كود معالج الحدث الداخلي، سيتم تعيين "this" إلى العنصر الذي يتم فيه إضافة المستمع إلى الحدث:

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

هذا مثال آخر:

<button onclick="alert(this)">انقر هنا</button>

الربط الواضح للدالة

هي طريقتان مسبقة التحديد في JavaScript.

يمكن استخدامها جميعًا لاستدعاء الطريقة على العنصر باستخدام عنصر آخر كمعامل.

function add(c, d) {
return this.a + this.b + c + d;
}
var obj = {a: 5, b: 10};
add.call(obj, 5, 7); // 27
add.apply(obj, [10, 20]); // 45

الدوال الموجهة بالعلامة (=>)

في الدوال الموجهة بالعلامة (=>)، هذا دائمًا يواجه هذا في النطاق التشغيل التشغيلي عند إنشائه.

في الكود العالمي، سيتم تعيينه إلى العنصر العالمي:

var globalObj = this;
var myFunc = (() => this);
document.write(myFunc() === globalObj); // صحيح