Skip to content

Commit aa6d834

Browse files
committed
Translate Native prototypes article
1 parent 5f71748 commit aa6d834

5 files changed

Lines changed: 78 additions & 78 deletions

File tree

1-js/08-prototypes/03-native-prototypes/1-defer-to-prototype/solution.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,5 @@ function f() {
99
alert("Hello!");
1010
}
1111

12-
f.defer(1000); // shows "Hello!" after 1 sec
12+
f.defer(1000); // تعرض كلمة "Hello!" بعد 1 ثانية
1313
```
Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1-
importance: 5
1+
درجة الأهمية: 5
22

33
---
44

5-
# Add method "f.defer(ms)" to functions
5+
# إضافة الدالة "f.defer(ms)" للدوال
66

7-
Add to the prototype of all functions the method `defer(ms)`, that runs the function after `ms` milliseconds.
7+
أضف إلى نموذج الدوال الدالة `defer(ms)` والتى تقوم بتشغيل الدالة بعد `ms` مللى ثانية.
88

9-
After you do it, such code should work:
9+
بعد أن تفعلها، سيعمل الكود التالى:
1010

1111
```js
1212
function f() {
1313
alert("Hello!");
1414
}
1515

16-
f.defer(1000); // shows "Hello!" after 1 second
16+
f.defer(1000); // تعرض كلمة "Hello!" بعد 1 ثانية
1717
```

1-js/08-prototypes/03-native-prototypes/2-defer-to-prototype-extended/solution.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,17 @@ Function.prototype.defer = function(ms) {
88
}
99
};
1010

11-
// check it
11+
// اختبر
1212
function f(a, b) {
1313
alert( a + b );
1414
}
1515

16-
f.defer(1000)(1, 2); // shows 3 after 1 sec
16+
f.defer(1000)(1, 2); // تعرض 3 بعد ثانية واحدة
1717
```
1818

19-
Please note: we use `this` in `f.apply` to make our decoration work for object methods.
19+
لاحظ: استخدمنا `this` فى `f.apply` لتعمل مع دوال الكائنات.
2020

21-
So if the wrapper function is called as an object method, then `this` is passed to the original method `f`.
21+
ولذلك إذا تم استدعاء دالة كدالة كائن (method) فإن `this` سيتم تمرريرها إلى الدالة الأصلية `f`.
2222

2323
```js run
2424
Function.prototype.defer = function(ms) {
Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
importance: 4
1+
درجة الأهمية: 4
22

33
---
44

5-
# Add the decorating "defer()" to functions
5+
# إضافة الدالة المعدلة للدوال
66

7-
Add to the prototype of all functions the method `defer(ms)`, that returns a wrapper, delaying the call by `ms` milliseconds.
7+
أضف إلى النموذج الخاص بالدوال الدالة `defer(ms)`، والتى تقوم بإرجاع حاوى (wrapper) وتؤخر التنفيذ بعد `ms` مللى ثانية.
88

9-
Here's an example of how it should work:
9+
هاك مثال لكيفية استخدامها:
1010

1111
```js
1212
function f(a, b) {
1313
alert( a + b );
1414
}
1515

16-
f.defer(1000)(1, 2); // shows 3 after 1 second
16+
f.defer(1000)(1, 2); // تعرض 3 بعد ثانية واحدة
1717
```
1818

19-
Please note that the arguments should be passed to the original function.
19+
لاحظ أن المتغيرات يجب أن تُمرر إلى الدالة الأصلية.
Lines changed: 62 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,33 @@
1-
# Native prototypes
1+
# النماذج البدائية Native prototypes
22

3-
The `"prototype"` property is widely used by the core of JavaScript itself. All built-in constructor functions use it.
3+
إن الخاصية `"prototype"` مستخدمة بشكل واسع من الجافاسكريبت نفسها، حيث أن كل الدوال البانية (constructor functions) تستخدمها.
44

5-
First we'll see at the details, and then how to use it for adding new capabilities to built-in objects.
5+
أولًا سنرى التفاصيل، ثم نتعلم كيف نستخدمها لإضافة إمكانيات جديدة للكائنات الموجودة بالفعل (built-in objects).
66

77
## Object.prototype
88

9-
Let's say we output an empty object:
9+
دعنا نقول أننا سنطبع كائنًا فارغًا:
1010

1111
```js run
1212
let obj = {};
1313
alert(obj); // "[object Object]" ?
1414
```
1515

16-
Where's the code that generates the string `"[object Object]"`? That's a built-in `toString` method, but where is it? The `obj` is empty!
16+
أين الكود المسؤول عن التحويل إلى النص `"[object Object]"`؟ إنها الدالة `toString` الموجودة بالفعل ، ولكن أين هى؟ الكائن `obj` فارغ !
1717

18-
...But the short notation `obj = {}` is the same as `obj = new Object()`, where `Object` is a built-in object constructor function, with its own `prototype` referencing a huge object with `toString` and other methods.
18+
...ولكن الصيغة `obj = {}` هي نفسها هذه الصيغة `obj = new Object()`، حيث أن `Object` هو دالة بانية للكائنات موجودة بالفعل والتى تحتوى على الخاصية `prototype` التى تحتوى على مرجع لكائن ضخم يحتوى على الدالة `toString` ودوال أخري.
1919

20-
Here's what's going on:
20+
هاهنا ما يحدث:
2121

2222
![](object-prototype.svg)
2323

24-
When `new Object()` is called (or a literal object `{...}` is created), the `[[Prototype]]` of it is set to `Object.prototype` according to the rule that we discussed in the previous chapter:
24+
عندما يتم استدعاء `new Object()` (أو إنشاء الكائن العادى `{...}`)، ستكون قيمة `[[Prototype]]` للكائن الناتج تشير إلى `Object.prototype` طبقًا للقاعدة التى ناقشناها فى الفصل السابق:
2525

2626
![](object-prototype-1.svg)
2727

28-
So then when `obj.toString()` is called the method is taken from `Object.prototype`.
28+
لذلك عندما يتم استدعاء `obj.toString()` فإن الدالة مأخوذة من `Object.prototype`.
2929

30-
We can check it like this:
30+
يمكننا أن نختبر ذلك هكذا:
3131

3232
```js run
3333
let obj = {};
@@ -36,79 +36,79 @@ alert(obj.__proto__ === Object.prototype); // true
3636
// obj.toString === obj.__proto__.toString == Object.prototype.toString
3737
```
3838

39-
Please note that there is no more `[[Prototype]]` in the chain above `Object.prototype`:
39+
لاحظ أنه لا يوجد المزيد من `[[Prototype]]` فى السلسة فوق `Object.prototype`:
4040

4141
```js run
4242
alert(Object.prototype.__proto__); // null
4343
```
4444

45-
## Other built-in prototypes
45+
## نماذج أخرى موجودة بالفعل (built-in prototypes)
4646

47-
Other built-in objects such as `Array`, `Date`, `Function` and others also keep methods in prototypes.
47+
إن الكائنات الأخرى الموجوده بالفعل مثل `Array`, `Date`, `Function` وغيرهم يحتفظون بدوال فى النماذج (prototypes).
4848

49-
For instance, when we create an array `[1, 2, 3]`, the default `new Array()` constructor is used internally. So `Array.prototype` becomes its prototype and provides methods. That's very memory-efficient.
49+
علي سبيل المثال، عندما نقوم بإنشاء قائمة `[1, 2, 3]`، فإن الدالة البانية الموجودة بالفعل `new Array()` يتم استخدامها داخليًا. ولذلك تصبح `Array.prototype` النموذج الخاص بها وتمنحها دوال خاصة وهذا شيئ جيد جدًّا للذاكرة.
5050

51-
By specification, all of the built-in prototypes have `Object.prototype` on the top. That's why some people say that "everything inherits from objects".
51+
كما ذُكر فى المصدر، فإن كل النماذج (prototypes) الموجودة بالفعل لديها `Object.prototype` على القمة فى الأعلى. وهذا مايدفع بعض الأشخاص للقول بأن "كل شيئ يرث من الكائنات".
5252

53-
Here's the overall picture (for 3 built-ins to fit):
53+
هنا الصورة الكاملة:
5454

5555
![](native-prototypes-classes.svg)
5656

57-
Let's check the prototypes manually:
57+
هيا نختبر الخاصية يدويًا:
5858

5959
```js run
6060
let arr = [1, 2, 3];
6161

62-
// it inherits from Array.prototype?
62+
// هل ترث من Array.prototype?
6363
alert(arr.__proto__ === Array.prototype); // true
6464

65-
// then from Object.prototype?
65+
// ثم من Object.prototype?
6666
alert(arr.__proto__.__proto__ === Object.prototype); // true
6767

68-
// and null on the top.
68+
// والقيمة null فى الأعلى.
6969
alert(arr.__proto__.__proto__.__proto__); // null
7070
```
7171

72-
Some methods in prototypes may overlap, for instance, `Array.prototype` has its own `toString` that lists comma-delimited elements:
72+
بعض الدوال فى النماذج يمكن أن تتداخل، فعلى سبيل المثال، تملك `Array.prototype` الدالة `toString` الخاصة بها والتى تقوم بإرجاع نص يحوى عناصر القائمة وبينها الفاصلة:
7373

7474
```js run
7575
let arr = [1, 2, 3];
76-
alert(arr); // 1,2,3 <-- the result of Array.prototype.toString
76+
alert(arr); // 1,2,3 <-- نتيجة Array.prototype.toString
7777
```
7878

79-
As we've seen before, `Object.prototype` has `toString` as well, but `Array.prototype` is closer in the chain, so the array variant is used.
79+
كما رأينا سابقًا، تملك `Object.prototype` أيضًا الدالة `toString` ولكن `Array.prototype` هي الأقرب فى السلسلة ولذلك يتم استخدام الدالة الخاصة بالقائمة.
8080

8181
![](native-prototypes-array-tostring.svg)
8282

83-
In-browser tools like Chrome developer console also show inheritance (`console.dir` may need to be used for built-in objects):
83+
تعرض الأدوات الموجودة فى المتصفح أيضًا الوراثة (يمكن أن يتم استخدام `console.dir` مع بعض الكائنات الموجودة بالفعل ):
8484

8585
![](console_dir_array.png)
8686

87-
Other built-in objects also work the same way. Even functions -- they are objects of a built-in `Function` constructor, and their methods (`call`/`apply` and others) are taken from `Function.prototype`. Functions have their own `toString` too.
87+
تعمل الكائنات الموجودة بالفعل الأخرى بنفس الطريقة. حتى الدوال -- هي عبارة عن كائنات مبنية عن طريق الدالة البانية `Function` والدوال الخاصه بها (مثل `call`/`apply` وغيرها) مأخوذة من `Function.prototype`. وتحتوى الدوال على الدالة `toString`الخاصة بها أيضًا.
8888

8989
```js run
9090
function f() {}
9191

9292
alert(f.__proto__ == Function.prototype); // true
93-
alert(f.__proto__.__proto__ == Object.prototype); // true, inherit from objects
93+
alert(f.__proto__.__proto__ == Object.prototype); // true, ترث من الكائنات
9494
```
9595

96-
## Primitives
96+
## القيم المفردة Primitives
9797

98-
The most intricate thing happens with strings, numbers and booleans.
98+
أكثر الأشياء المعقدة تحدث مع النصوص والأرقام والقيم المطلقة.
9999

100-
As we remember, they are not objects. But if we try to access their properties, temporary wrapper objects are created using built-in constructors `String`, `Number` and `Boolean`. They provide the methods and disappear.
100+
كما نتذكر فإنهم ليسو عبارة عن كائنات، ولكن إذا حاولنا أن نصل إلى خصائصهم فسيتم إحاطتها بكائن باستخدام الدوال البانية `String` و `Number` و `Boolean`، حيث يمنحونهم الدوال ثم يختفون.
101101

102-
These objects are created invisibly to us and most engines optimize them out, but the specification describes it exactly this way. Methods of these objects also reside in prototypes, available as `String.prototype`, `Number.prototype` and `Boolean.prototype`.
102+
هذه الكائنات تم إنشاؤها لنا خفيةً وأغلب المحركات تقوم بتحسين ذلك، ولكن يصفها المصدر بهذه الطريقة بالضبط. ودوال هذه الكائنات توجد أيضًا فى النماذج وتكون متاحة كـ `String.prototype` و `Number.prototype` و `Boolean.prototype`.
103103

104-
```warn header="Values `null` and `undefined` have no object wrappers"
105-
Special values `null` and `undefined` stand apart. They have no object wrappers, so methods and properties are not available for them. And there are no corresponding prototypes either.
104+
```warn header="القيم `null` و `undefined` ليس لها كائنات حاوية"
105+
القيم الخاصة `null` و `undefined` تقف بعيدًا عن هذا. حيث أنهم ليس لديهم كائنات حاوية (object wrappers)، ولذلك فإن الدوال والخصائص غير متاحة لهم وليس هناك نماذج لهم.
106106

107107
````
108108
109-
## Changing native prototypes [#native-prototype-change]
109+
## التعديل على النماذج البدائية (native prototypes) [#native-prototype-change]
110110
111-
Native prototypes can be modified. For instance, if we add a method to `String.prototype`, it becomes available to all strings:
111+
يمكن تعديل النماذج البدائية. فعلى سبيل المثال، إذا أضفنا دالة إلى `String.prototype` ستصبح متاحة إلى كل النصوص:
112112
113113
```js run
114114
String.prototype.show = function() {
@@ -118,51 +118,51 @@ String.prototype.show = function() {
118118
"BOOM!".show(); // BOOM!
119119
````
120120

121-
During the process of development, we may have ideas for new built-in methods we'd like to have, and we may be tempted to add them to native prototypes. But that is generally a bad idea.
121+
وخلال التطبيق العملى يمكن أن تخطر لنا أفكار لدوال أخرى نريد أن ننشئها ويمكننا إضافتها للنماذج، ولكن هذا يُعد فكرة سيئة بشكل عام.
122122

123123
```warn
124-
Prototypes are global, so it's easy to get a conflict. If two libraries add a method `String.prototype.show`, then one of them will be overwriting the method of the other.
124+
إن النماذج متاحة بشكل عام، ولذلك فإنه من السهل أن يحدث تعارض. فإذا كان هناك مكتبتان أضافتا نفس الدالة `String.prototype.show`، إذن فإن واحدة منهن ستستبدل عمل الأخرى.
125125
126-
So, generally, modifying a native prototype is considered a bad idea.
126+
ولذلك، بشكل عام، فإن تعديل النماذج البدائية يُعد فكرة سيئة.
127127
```
128128

129-
**In modern programming, there is only one case where modifying native prototypes is approved. That's polyfilling.**
129+
**فى لغات البرمجة الحديثة، توجد حالة واحدة لتعديل النماذج البدائية. وهي تعدد الأشكال polyfilling**
130130

131-
Polyfilling is a term for making a substitute for a method that exists in the JavaScript specification, but is not yet supported by a particular JavaScript engine.
131+
تعدد الأشكال هو مصطلح يعني إنشاء نسخه من دالة موجودة فى مصدر الجافاسكريبت ولكنها غير مدعومة بعد من محرك جافاسكريبت معين.
132132

133-
We may then implement it manually and populate the built-in prototype with it.
133+
يمكننا إذن كتابتها يدويّاً وإضافتها للنموذج.
134134

135-
For instance:
135+
على سبيل المثال:
136136

137137
```js run
138138
if (!String.prototype.repeat) {
139-
// if there's no such method
140-
// add it to the prototype
139+
// إذا لم توجد هذه الدالة
140+
// أضفها للنموذج
141141

142142
String.prototype.repeat = function (n) {
143-
// repeat the string n times
143+
// كرر النص n من المرات
144144

145-
// actually, the code should be a little bit more complex than that
145+
// فى الحقيقة، يجب أن يكون الكود أكثر تعقيدًا بقليل من هذا
146146
// (the full algorithm is in the specification)
147-
// but even an imperfect polyfill is often considered good enough
147+
// ولكن حتي تعدد الأشكال الغير كامل غالبًا ما يكون كافيًا
148148
return new Array(n + 1).join(this);
149149
};
150150
}
151151

152152
alert("La".repeat(3)); // LaLaLa
153153
```
154154

155-
## Borrowing from prototypes
155+
## الإستعارة من النماذج
156156

157-
In the chapter <info:call-apply-decorators#method-borrowing> we talked about method borrowing.
157+
فى فصل <info:call-apply-decorators#method-borrowing> تحدثنا عن استعارة الدوال.
158158

159-
That's when we take a method from one object and copy it into another.
159+
وهذا يكون عندما نأخذ دالةً ما من كائن وننسخها لكائن آخر.
160160

161-
Some methods of native prototypes are often borrowed.
161+
بعض الدوال غالبًا ما يتم استعارتها من النماذج البدائية.
162162

163-
For instance, if we're making an array-like object, we may want to copy some `Array` methods to it.
163+
على سبيل المثال، إذا كنا ننشئ كائنًا شبيهًا بالقائمة، فإننا يمكن أن نريد أن ننسخ بعذ دوال الكائن `Array` إليه.
164164

165-
E.g.
165+
مثال:
166166

167167
```js run
168168
let obj = {
@@ -178,18 +178,18 @@ obj.join = Array.prototype.join;
178178
alert( obj.join(',') ); // Hello,world!
179179
```
180180

181-
It works because the internal algorithm of the built-in `join` method only cares about the correct indexes and the `length` property. It doesn't check if the object is indeed an array. Many built-in methods are like that.
181+
هذا يعمل لأن الدالة الموجودة بالفعل `join` تهتم فقط بالأرقام الصحيحه و الخاصية `length`، ولا تفحص إذا كان الكائن هو قائمة بالفعل. والكثير من الدوال تعمل بنفس الطريقة.
182182

183-
Another possibility is to inherit by setting `obj.__proto__` to `Array.prototype`, so all `Array` methods are automatically available in `obj`.
183+
وهناك إمكانية أخرى وهي الوراثة وذلك عن طريق أن نجعل `obj.__proto__` تشير إلى `Array.prototype` ولذلك فإن كل دوال الكائن `Array` ستكون متاحة تلقائيًا للكائن `obj`.
184184

185-
But that's impossible if `obj` already inherits from another object. Remember, we only can inherit from one object at a time.
185+
ولكن هذا مستحيل إذا كان الكائن `obj` يرث بالفعل من كائن آخر، تذكر أننا يمكننا أن نرث من كائن واحد فقط فى المرة الواحدة.
186186

187-
Borrowing methods is flexible, it allows to mix functionalities from different objects if needed.
187+
إن استعارة الدوال مرن ويسمح بمزج الوظائف من كائنات مختلفة إذا أردنا ذلك.
188188

189-
## Summary
189+
## الملخص
190190

191-
- All built-in objects follow the same pattern:
192-
- The methods are stored in the prototype (`Array.prototype`, `Object.prototype`, `Date.prototype`, etc.)
193-
- The object itself stores only the data (array items, object properties, the date)
194-
- Primitives also store methods in prototypes of wrapper objects: `Number.prototype`, `String.prototype` and `Boolean.prototype`. Only `undefined` and `null` do not have wrapper objects
195-
- Built-in prototypes can be modified or populated with new methods. But it's not recommended to change them. The only allowable case is probably when we add-in a new standard, but it's not yet supported by the JavaScript engine
191+
- تتبع كل الكائنات الموجودة بالفعل نفس النمط:
192+
- يتم الإحتفاظ بالدوال فى النموذج (prototype) (`Array.prototype`, `Object.prototype`, `Date.prototype`, إلخ.)
193+
- يتم تخزين البيانات فقط فى الكائن (عناصر قائمة أو خصائص كائن أو تاريخ)
194+
- القيم المفردة (Primitives) تخزن الدوال فى نموذج خاص بالكائن الحاوي (wrapper object): `Number.prototype` و `String.prototype` و `Boolean.prototype`. ولا يوجد كائن حاوى للقيمتين `undefined` و `null`.
195+
- النماذج الموجودة بالفعل (Built-in prototypes) يمكن تعديلها أو إضافة دوال جديدة لها، ولكن هذا غير موصيً به، وإن الحالة الوحيدة المسموح فيها بذلك هي عندما نريد أن نذيف وظيفة جديدة موجودة فى المصدر ولكنها مازالت غير مدعومة من محرك جافاسكريبت معين.

0 commit comments

Comments
 (0)