Skip to content

Class basic syntax #45

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 31, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions 1-js/09-classes/01-class/1-rewrite-to-class/task.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
importance: 5
درجة الأهمية : 5

---

# Rewrite to class
# أعد صياغة الclass

The `Clock` class is written in functional style. Rewrite it the "class" syntax.
The `Clock` class مكتوب بأسلوب وظيفي. أعد كتابتها بصيغة "class".

P.S. The clock ticks in the console, open it to see.
ملاحظة. تدق الساعة في وحدة التحكم ، افتحها لترى.
162 changes: 81 additions & 81 deletions 1-js/09-classes/01-class/article.md

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
That's because the child constructor must call `super()`.
هذا لأنه يجب على منشئ الطفل استدعاء `` super () `.

Here's the corrected code:
إليك الكود المصحح:

```js run
class Animal {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
importance: 5
درجة الأهمية : 5

---

# Error creating an instance
# خطأ في إنشاء مثيل

Here's the code with `Rabbit` extending `Animal`.
إليك الرمز الذي يحتوي على "أرنب" يمتد "حيوان".

Unfortunately, `Rabbit` objects can't be created. What's wrong? Fix it.
لسوء الحظ ، لا يمكن إنشاء كائنات "أرنب". ماالخطب؟ اصلحه.
```js run
class Animal {

Expand Down
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
importance: 5
درجة الأهمية: 5

---

# Extended clock
# ساعة ممتدة

We've got a `Clock` class. As of now, it prints the time every second.
لدينا فصل "ساعة". حتى الآن ، يطبع الوقت كل ثانية.


[js src="source.view/clock.js"]
[js src = "source.view / clock.js"]

Create a new class `ExtendedClock` that inherits from `Clock` and adds the parameter `precision` -- the number of `ms` between "ticks". Should be `1000` (1 second) by default.
أنشئ فئة جديدة `ExtendedClock` ترث من` Clock` وتضيف المعلمة `الدقة` - عدد` ms` بين "القراد". يجب أن يكون "1000" (ثانية واحدة) افتراضيًا.

- Your code should be in the file `extended-clock.js`
- Don't modify the original `clock.js`. Extend it.
- يجب أن يكون الكود الخاص بك في ملف `ممتد على مدار الساعة. js`
- لا تعدّل "clock.js" الأصلي. توسيعها.
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
First, let's see why the latter code doesn't work.
أولاً ، دعنا نرى لماذا لا يعمل الكود الأخير.

The reason becomes obvious if we try to run it. An inheriting class constructor must call `super()`. Otherwise `"this"` won't be "defined".
يصبح السبب واضحًا إذا حاولنا تشغيله. يجب على مُنشئ الفصل الموروث استدعاء `` super () `. وإلا فلن يتم تحديد "هذا" ".

So here's the fix:
إذن هذا هو الإصلاح:

```js run
class Rabbit extends Object {
Expand All @@ -19,16 +19,16 @@ let rabbit = new Rabbit("Rab");
alert( rabbit.hasOwnProperty('name') ); // true
```

But that's not all yet.
لكن هذا ليس كل شيء بعد.

Even after the fix, there's still important difference in `"class Rabbit extends Object"` versus `class Rabbit`.
حتى بعد الإصلاح ، لا يزال هناك اختلاف مهم في "class rabbit يوسع الكائن" "مقابل" class Rabbit ".

As we know, the "extends" syntax sets up two prototypes:
كما نعلم ، فإن الصيغة "الممتدة" تضع نموذجين أوليين:

1. Between `"prototype"` of the constructor functions (for methods).
2. Between the constructor functions themselves (for static methods).
1. بين "النموذج" لوظائف المنشئ (للطرق).
2. بين وظائف المنشئ أنفسهم (للأساليب الثابتة).

In our case, for `class Rabbit extends Object` it means:
في حالتنا ، تعني كلمة "أرنب يمتد الكائن" ما يلي:

```js run
class Rabbit extends Object {}
Expand All @@ -37,7 +37,7 @@ alert( Rabbit.prototype.__proto__ === Object.prototype ); // (1) true
alert( Rabbit.__proto__ === Object ); // (2) true
```

So `Rabbit` now provides access to static methods of `Object` via `Rabbit`, like this:
إذن يوفر "الأرنب" الآن إمكانية الوصول إلى الأساليب الثابتة لـ "الكائن" عبر "الأرنب" ، على النحو التالي:

```js run
class Rabbit extends Object {}
Expand All @@ -48,9 +48,9 @@ alert ( Rabbit.getOwnPropertyNames({a: 1, b: 2})); // a,b
*/!*
```

But if we don't have `extends Object`, then `Rabbit.__proto__` is not set to `Object`.
ولكن إذا لم يكن لدينا `Extended Object` ، فلن يتم تعيين` Rabbit .__ proto__` على `Object`.

Here's the demo:
هنا هو العرض التوضيحي:

```js run
class Rabbit {}
Expand All @@ -65,15 +65,15 @@ alert ( Rabbit.getOwnPropertyNames({a: 1, b: 2})); // Error
*/!*
```

So `Rabbit` doesn't provide access to static methods of `Object` in that case.
لذا `Rabbit` لا يوفر الوصول إلى الأساليب الثابتة لـ "الكائن" في هذه الحالة.

By the way, `Function.prototype` has "generic" function methods, like `call`, `bind` etc. They are ultimately available in both cases, because for the built-in `Object` constructor, `Object.__proto__ === Function.prototype`.
بالمناسبة ، يحتوي `Function.prototype` على طرق وظيفية" عامة "، مثل` call` و` bind` وما إلى ذلك. وهي متاحة في النهاية في كلتا الحالتين ، لأن مُنشئ `Object` المدمج ،` Object .__ proto__ = == Function.prototype`.

Here's the picture:
ها هي الصورة:

![](rabbit-extends-object.svg)

So, to put it short, there are two differences:
لذلك ، باختصار ، هناك اختلافان:

| class Rabbit | class Rabbit extends Object |
|--------------|------------------------------|
Expand Down
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
importance: 3
درجة الأهمية: 3

---

# Class extends Object?
# فئة تمدد الكائن؟

As we know, all objects normally inherit from `Object.prototype` and get access to "generic" object methods like `hasOwnProperty` etc.
كما نعلم ، عادة ما ترث جميع الكائنات من `Object.prototype` وتحصل على طرق للكائنات" العامة "مثل` hasOwnProperty` وما إلى ذلك.

For instance:
على سبيل المثال:

```js run
class Rabbit {
Expand All @@ -23,11 +23,11 @@ alert( rabbit.hasOwnProperty('name') ); // true
*/!*
```

But if we spell it out explicitly like `"class Rabbit extends Object"`, then the result would be different from a simple `"class Rabbit"`?
ولكن إذا وضحناها صراحة مثل "class class rabbit Extended Object" ، فستكون النتيجة مختلفة عن "class rabbit" بسيطة؟

What's the difference?
ماهو الفرق؟

Here's an example of such code (it doesn't work -- why? fix it?):
فيما يلي مثال لمثل هذا الرمز (لا يعمل - لماذا؟ إصلاحه؟):

```js
class Rabbit extends Object {
Expand Down
Loading