168 lines
7.0 KiB
Markdown
168 lines
7.0 KiB
Markdown
---
|
||
title: this reference
|
||
localeTitle: هذا المرجع
|
||
---
|
||
## `this` المرجع
|
||
|
||
في JavaScript ، تحتوي كل وظيفة على `this` المرجع الذي تم إنشاؤه تلقائيًا عندما تعلنه. يشبه `this` المرجع تمامًا `this` المرجع في اللغات الأخرى القائمة على الفصل مثل Java أو C # (جافا سكريبت هي لغة مبنية على النموذج وليس مفهوم "class"): _يشير إلى الكائن الذي يستدعي الوظيفة_ (هذا الكائن أحيانًا يسمى _السياق_ ). في JavaScript ، ومع ذلك ، _يمكن ربط `this` المرجع داخل الوظائف بكائنات مختلفة اعتمادًا على مكان استدعاء الدالة_ . فيما يلي 5 قواعد أساسية `this` الربط في JavaScript:
|
||
|
||
### المادة 1
|
||
|
||
عندما يتم استدعاء دالة في النطاق العمومي ، يكون `this` المرجع بشكل افتراضي مرتبطًا **بالعنصر العام** ( `window` في المستعرض ، أو `global` في Node.js). فمثلا:
|
||
|
||
`function foo() {
|
||
this.a = 2;
|
||
}
|
||
|
||
foo();
|
||
console.log(a); // 2
|
||
`
|
||
|
||
ملاحظة: إذا قمت بالإعلان عن الدالة `foo()` أعلاه في الوضع المقيد ، فإنك تقوم باستدعاء هذه الوظيفة في النطاق العالمي ، فسيكون `this` `undefined` `this.a = 2` التعيين هذا. `this.a = 2` إلى `this.a = 2` استثناء `Uncaught TypeError` .
|
||
|
||
### القاعدة 2
|
||
|
||
دعونا نفحص المثال أدناه:
|
||
|
||
`function foo() {
|
||
this.a = 2;
|
||
}
|
||
|
||
var obj = {
|
||
foo: foo
|
||
};
|
||
|
||
obj.foo();
|
||
console.log(obj.a); // 2
|
||
`
|
||
|
||
بوضوح ، في المقتطف أعلاه ، يتم استدعاء الدالة `foo()` مع _السياق_ هو كائن `obj` `this` الإشارة مرتبطة الآن بـ `obj` . لذلك عندما يتم استدعاء دالة مع كائن سياق ، سيكون `this` المرجع مرتبطًا بهذا الكائن.
|
||
|
||
### القاعدة 3
|
||
|
||
`.call` ، `.apply` و `.bind` يمكن لجميع استخدامها في موقع الدعوة إلى ربط صراحة `this` . باستخدام `.bind(this)` هو شيء قد تراه في الكثير من مكونات React.
|
||
|
||
`var foo = function() {
|
||
console.log(this.bar)
|
||
}
|
||
|
||
foo.call({ bar: 1 }) // 1
|
||
`
|
||
|
||
في ما يلي مثال سريع عن كيفية استخدام كل منها لربط `this` :
|
||
|
||
* `fn.call(thisObj, fnParam1, fnParam2)` `.call()` : `fn.call(thisObj, fnParam1, fnParam2)`
|
||
* `.apply()` : `fn.apply(thisObj, [fnParam1, fnParam2])`
|
||
* `.bind()` : `const newFn = fn.bind(thisObj, fnParam1, fnParam2)`
|
||
|
||
### القاعدة 4
|
||
|
||
`function Point2D(x, y) {
|
||
this.x = x;
|
||
this.y = y;
|
||
}
|
||
|
||
var p1 = new Point2D(1, 2);
|
||
console.log(p1.x); // 1
|
||
console.log(p1.y); // 2
|
||
`
|
||
|
||
الشيء الذي يجب أن تلاحظه هو الدالة `Point2D` التي يتم `Point2D` رئيسية `new` ، `this` المرجع مرتبط بـ كائن `p1` . لذلك عندما يتم استدعاء دالة بكلمة رئيسية `new` ، فإنها ستنشئ كائنًا جديدًا وستكون `this` الإشارة مرتبطة بهذا الكائن.
|
||
|
||
ملاحظة: عند استدعاء وظيفة بكلمة رئيسية `new` ، فإننا نسميها أيضًا _كوظيفة مُنشئ_ .
|
||
|
||
### القاعدة 5
|
||
|
||
تحدد جافا سكريبت قيمة `this` في وقت التشغيل ، بناءً على السياق الحالي. لذلك قد يشير `this` بعض الأحيان إلى شيء آخر غير ما تتوقعه.
|
||
|
||
خذ بعين الاعتبار هذا المثال لفئة Cat باستخدام طريقة تسمى `makeSound()` ، متبعاً النمط في القاعدة 4 (أعلاه) مع دالة منشئ وكلمة رئيسية `new` .
|
||
|
||
`var Cat = function(name, sound) {
|
||
this.name = name;
|
||
this.sound = sound;
|
||
this.makeSound = function() {
|
||
console.log( this.name + ' says: ' + this.sound );
|
||
};
|
||
}
|
||
var kitty = new Cat('Fat Daddy', 'Mrrooowww');
|
||
kitty.makeSound(); // Fat Daddy says: Mrrooowww
|
||
`
|
||
|
||
الآن دعونا نحاول إعطاء القطة وسيلة `annoy()` الناس عن طريق تكرار صوته 100 مرة ، مرة واحدة كل نصف ثانية.
|
||
|
||
``var Cat = function(name, sound) {
|
||
this.name = name;
|
||
this.sound = sound;
|
||
this.makeSound = function() {
|
||
console.log( this.name + ' says: ' + this.sound );
|
||
};
|
||
this.annoy = function() {
|
||
var count = 0, max = 100;
|
||
var t = setInterval(function() {
|
||
this.makeSound(); // <-- this line fails with `this.makeSound is not a function`
|
||
count++;
|
||
if (count === max) {
|
||
clearTimeout(t);
|
||
}
|
||
}, 500);
|
||
};
|
||
}
|
||
var kitty = new Cat('Fat Daddy', 'Mrrooowww');
|
||
kitty.annoy();
|
||
``
|
||
|
||
لا يعمل ذلك لأننا قمنا بإنشاء سياق جديد بنطاق عالمي داخل الاستدعاء `setInterval` ، لذا لم يعد `this` يشير إلى مثيلتنا. في مستعرض ويب ، `makeSound()` `this` بدلاً من ذلك إلى كائن الإطار ، الذي لا يحتوي على أسلوب `makeSound()` .
|
||
|
||
طريقتان لجعلها تعمل:
|
||
|
||
1) قبل إنشاء إطار جديد، تعيين `this` إلى متغير محلي يدعى `me` ، أو `self` ، أو ما تريد أن نسميها، واستخدام هذا المتغير داخل الاستدعاء.
|
||
|
||
`var Cat = function(name, sound) {
|
||
this.name = name;
|
||
this.sound = sound;
|
||
this.makeSound = function() {
|
||
console.log( this.name + ' says: ' + this.sound );
|
||
};
|
||
this.annoy = function() {
|
||
var count = 0, max = 100;
|
||
var self = this;
|
||
var t = setInterval(function() {
|
||
self.makeSound();
|
||
count++;
|
||
if (count === max) {
|
||
clearTimeout(t);
|
||
}
|
||
}, 500);
|
||
};
|
||
}
|
||
var kitty = new Cat('Fat Daddy', 'Mrrooowww');
|
||
kitty.annoy();
|
||
`
|
||
|
||
2) باستخدام ES6 ، يمكنك تجنب تعيين `this` للمتغير المحلي باستخدام وظيفة السهم ، والتي تربط `this` بسياق الرمز المحيط حيث تم تعريفه.
|
||
|
||
`var Cat = function(name, sound) {
|
||
this.name = name;
|
||
this.sound = sound;
|
||
this.makeSound = function() {
|
||
console.log( this.name + ' says: ' + this.sound );
|
||
};
|
||
this.annoy = function() {
|
||
var count = 0, max = 100;
|
||
var t = setInterval(() => {
|
||
this.makeSound();
|
||
count++;
|
||
if (count === max) {
|
||
clearTimeout(t);
|
||
}
|
||
}, 500);
|
||
};
|
||
}
|
||
var kitty = new Cat('Fat Daddy', 'Mrrooowww');
|
||
kitty.annoy();
|
||
`
|
||
|
||
### موارد آخرى
|
||
|
||
* [javascriptissexy.com](http://javascriptissexy.com/understand-javascripts-this-with-clarity-and-master-it/)
|
||
* [أنت لا تعرف شبيبة](https://github.com/getify/You-Dont-Know-JS/blob/master/this%20%26%20object%20prototypes/ch2.md) |