diff options
author | Ryan Johnson <rjohnson@mozilla.com> | 2021-04-29 16:16:42 -0700 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-04-29 16:16:42 -0700 |
commit | 95aca4b4d8fa62815d4bd412fff1a364f842814a (patch) | |
tree | 5e57661720fe9058d5c7db637e764800b50f9060 /files/ar/web/javascript/reference/classes | |
parent | ee3b1c87e3c8e72ca130943eed260ad642246581 (diff) | |
download | translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2 translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip |
remove retired locales (#699)
Diffstat (limited to 'files/ar/web/javascript/reference/classes')
-rw-r--r-- | files/ar/web/javascript/reference/classes/constructor/index.html | 132 | ||||
-rw-r--r-- | files/ar/web/javascript/reference/classes/index.html | 380 |
2 files changed, 0 insertions, 512 deletions
diff --git a/files/ar/web/javascript/reference/classes/constructor/index.html b/files/ar/web/javascript/reference/classes/constructor/index.html deleted file mode 100644 index 135948c80b..0000000000 --- a/files/ar/web/javascript/reference/classes/constructor/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: المنشئ (constructor) -slug: Web/JavaScript/Reference/Classes/constructor -tags: - - جافاسكريبت -translation_of: Web/JavaScript/Reference/Classes/constructor ---- -<div>{{jsSidebar("Classes")}}</div> - -<p dir="rtl">الـ <code>constructor</code> هي ميثود خاصة لإنشاء وتهيئة الاوبجكت(كائن) داخل (فئة)<code>class</code>.</p> - -<div>{{EmbedInteractiveExample("pages/js/classes-constructor.html")}}</div> - - - -<h2 dir="rtl" id="بناء_الجملة">بناء الجملة</h2> - -<pre class="syntaxbox">constructor([arguments]) { ... }</pre> - -<h2 dir="rtl" id="الوصف">الوصف</h2> - -<p dir="rtl">يمكننا إستخدام تلك الميثود لمرة واحده فقط ، وفي حال إستخدمنا <code>constructor</code> ﻷكثر من مرة في نفس الفئة الـ class سيحدث {{jsxref("SyntaxError")}} إيرور .</p> - -<p>A constructor can use the <code>super</code> keyword to call the constructor of a parent class.</p> - -<p dir="rtl">إذا لم تحدد ميثود إنشاء سيتم تحديد منشئ بشكل تلقائي.</p> - -<p><br> - <sup>If you do not specify a constructor method, a default constructor is used.</sup></p> - -<h2 dir="rtl" id="أمثلة">أمثلة</h2> - -<h3 dir="rtl" id="إٍستخدام_الميثود_(اسلوب)_الـconstructor">إٍستخدام الميثود (اسلوب) الـ<code>constructor </code></h3> - -<p dir="rtl">ذلك الكود تم أخذه ولصقة من <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">classes sample</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a>)</p> - -<pre class="brush: js">class Square extends Polygon { - constructor(length) { - // Here, it calls the parent class' constructor with lengths - // provided for the Polygon's width and height - super(length, length); - // Note: In derived classes, super() must be called before you - // can use 'this'. Leaving this out will cause a reference error. - this.name = 'Square'; - } - - get area() { - return this.height * this.width; - } - - set area(value) { - this.area = value; - } -}</pre> - -<h3 dir="rtl" id="مثال_آخر">مثال آخر</h3> - -<p dir="rtl">إنظر إلى ذلك الكود</p> - -<pre class="brush: js">class Polygon { - constructor() { - this.name = "Polygon"; - } -} - -class Square extends Polygon { - constructor() { - super(); - } -} - -class Rectangle {} - -Object.setPrototypeOf(Square.prototype, Rectangle.prototype); - -console.log(Object.getPrototypeOf(Square.prototype) === Polygon.prototype); //false -console.log(Object.getPrototypeOf(Square.prototype) === Rectangle.prototype); //true - -let newInstance = new Square(); -console.log(newInstance.name); //Polygon</pre> - -<p dir="rtl">هنا البروتوتيب فئة الـ <strong>Square</strong> تغيرت ولكن الكونستركتور (المنشئ) مبني على فئة الـ<strong>Polygon </strong>والتي تطلب عندما نقوم بإنشاء حالة مماثلة للـ <strong>Square </strong>مرة أخرى</p> - -<h3 dir="rtl" id="الإنشاء_الإفتراضي">الإنشاء الإفتراضي</h3> - -<p dir="rtl">ذكرنا سابقا أنه في حال عدم تحديدك لكونستركتور (منشئ) سيتم تحديد الكونستركتور بشكل إفتراضي ، وبالنسبة للكلاسز (الفئات) الاولية يكون الكونستركتور الخاص بها كما يلي :-</p> - -<pre class="brush: js">constructor() {} -</pre> - -<p dir="rtl">أما الفئات المشتقة فتكون بالشكل التالي</p> - -<pre class="brush: js">constructor(...args) { - super(...args); -}</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 dir="rtl" id="دعم_المتصفحات">دعم المتصفحات</h2> - - - -<p>{{Compat("javascript.classes.constructor")}}</p> - -<h2 id="أنظر_أيضا">أنظر أيضا</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super()</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li> -</ul> diff --git a/files/ar/web/javascript/reference/classes/index.html b/files/ar/web/javascript/reference/classes/index.html deleted file mode 100644 index d6f0143148..0000000000 --- a/files/ar/web/javascript/reference/classes/index.html +++ /dev/null @@ -1,380 +0,0 @@ ---- -title: Classes -slug: Web/JavaScript/Reference/Classes -tags: - - Classes - - Constructors - - ECMAScript 2015 - - Inheritance - - Intermediate - - JavaScript - - NeedsTranslation - - TopicStub -translation_of: Web/JavaScript/Reference/Classes ---- -<div>{{JsSidebar("Classes")}}</div> - -<p>JavaScript classes, introduced in ECMAScript 2015, are primarily syntactical sugar over JavaScript's existing prototype-based inheritance. The class syntax <strong>does not</strong> introduce a new object-oriented inheritance model to JavaScript.</p> - -<h2 id="Defining_classes">Defining classes</h2> - -<p>Classes are in fact "special <a href="/en-US/docs/Web/JavaScript/Reference/Functions">functions</a>", and just as you can define <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expressions</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function declarations</a>, the class syntax has two components: <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">class expressions</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">class declarations</a>.</p> - -<h3 id="Class_declarations">Class declarations</h3> - -<p>One way to define a class is using a <strong>class declaration</strong>. To declare a class, you use the <code>class</code> keyword with the name of the class ("Rectangle" here).</p> - -<pre class="brush: js">class Rectangle { - constructor(height, width) { - this.height = height; - this.width = width; - } -}</pre> - -<h4 id="Hoisting">Hoisting</h4> - -<p>An important difference between <strong>function declarations</strong> and <strong>class declarations</strong> is that function declarations are {{Glossary("Hoisting", "hoisted")}} and class declarations are not. You first need to declare your class and then access it, otherwise code like the following will throw a {{jsxref("ReferenceError")}}:</p> - -<pre class="brush: js example-bad">var p = new Rectangle(); // ReferenceError - -class Rectangle {} -</pre> - -<h3 id="Class_expressions">Class expressions</h3> - -<p>A <strong>class expression</strong> is another way to define a class. Class expressions can be named or unnamed. The name given to a named class expression is local to the class's body. (it can be retrieved through the class's (not an instance's) <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name">.name</a> property, though)</p> - -<pre class="brush: js">// unnamed -var Rectangle = class { - constructor(height, width) { - this.height = height; - this.width = width; - } -}; -console.log(Rectangle.name); -// output: "Rectangle" - -// named -var Rectangle = class Rectangle2 { - constructor(height, width) { - this.height = height; - this.width = width; - } -}; -console.log(Rectangle.name); -// output: "Rectangle2" -</pre> - -<p><strong>Note:</strong> Class <strong>expressions</strong> also suffer from the same hoisting issues mentioned for Class <strong>declarations</strong>.</p> - -<h2 id="Class_body_and_method_definitions">Class body and method definitions</h2> - -<p>The body of a class is the part that is in curly brackets <code>{}</code>. This is where you define class members, such as methods or constructor.</p> - -<h3 id="Strict_mode">Strict mode</h3> - -<p>The bodies of <em>class declarations</em> and <em>class expressions</em> are executed in <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a> i.e. constructor, static and prototype methods, getter and setter functions are executed in strict mode.</p> - -<h3 id="Constructor">Constructor</h3> - -<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/constructor">constructor</a></code> method is a special method for creating and initializing an object created with a <code>class</code>. There can only be one special method with the name "constructor" in a class. A {{jsxref("SyntaxError")}} will be thrown if the class contains more than one occurrence of a <code>constructor</code> method.</p> - -<p>A constructor can use the <code>super</code> keyword to call the constructor of the super class.</p> - -<h3 id="Prototype_methods">Prototype methods</h3> - -<p>See also <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a>.</p> - -<pre class="brush: js">class Rectangle { - constructor(height, width) { - this.height = height; - this.width = width; - } - // Getter - get area() { - return this.calcArea(); - } - // Method - calcArea() { - return this.height * this.width; - } -} - -const square = new Rectangle(10, 10); - -console.log(square.area); // 100</pre> - -<h3 id="Static_methods">Static methods</h3> - -<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/static">static</a></code> keyword defines a static method for a class. Static methods are called without <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript#The_object_(class_instance)" title='An example of class instance is "var john = new Person();"'>instantiating </a>their class and <strong>cannot </strong>be called through a class instance. Static methods are often used to create utility functions for an application.</p> - -<pre class="brush: js">class Point { - constructor(x, y) { - this.x = x; - this.y = y; - } - - static distance(a, b) { - const dx = a.x - b.x; - const dy = a.y - b.y; - - return Math.hypot(dx, dy); - } -} - -const p1 = new Point(5, 5); -const p2 = new Point(10, 10); - -console.log(Point.distance(p1, p2)); // 7.0710678118654755</pre> - -<h3 id="Boxing_with_prototype_and_static_methods">Boxing with prototype and static methods</h3> - -<p>When a static or prototype method is called without a value for <em>this</em>, the <em>this</em> value will be <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);">undefined</span></font> inside the method. This behavior will be the same even if the <code>"use strict"</code> directive isn't present, because code within the <code>class</code> syntax is always executed in strict mode.</p> - -<pre class="brush: js">class Animal { - speak() { - return this; - } - static eat() { - return this; - } -} - -let obj = new Animal(); -obj.speak(); // Animal {} -let speak = obj.speak; -speak(); // undefined - -Animal.eat() // class Animal -let eat = Animal.eat; -eat(); // undefined</pre> - -<p>If the above is written using traditional function–based syntax, then autoboxing in method calls will happen in non–strict mode based on the initial <em>this</em> value. If the inital value is <code>undefined</code>, <em>this</em> will be set to the global object.</p> - -<p>Autoboxing will not happen in strict mode, the <em>this</em> value remains as passed.</p> - -<pre class="brush: js">function Animal() { } - -Animal.prototype.speak = function() { - return this; -} - -Animal.eat = function() { - return this; -} - -let obj = new Animal(); -let speak = obj.speak; -speak(); // global object - -let eat = Animal.eat; -eat(); // global object -</pre> - -<h3 id="Instance_properties">Instance properties</h3> - -<p>Instance properties must be defined inside of class methods:</p> - -<pre class="brush: js">class Rectangle { - constructor(height, width) { - this.height = height; - this.width = width; - } -}</pre> - -<p>Static class-side properties and prototype data properties must be defined outside of the ClassBody declaration:</p> - -<pre class="brush: js">Rectangle.staticWidth = 20; -Rectangle.prototype.prototypeWidth = 25; -</pre> - -<p> </p> - -<h2 id="Sub_classing_with_extends">Sub classing with <code>extends</code></h2> - -<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends</a></code> keyword is used in <em>class declarations</em> or <em>class expressions</em> to create a class as a child of another class.</p> - -<pre class="brush: js">class Animal { - constructor(name) { - this.name = name; - } - - speak() { - console.log(this.name + ' makes a noise.'); - } -} - -class Dog extends Animal { - speak() { - console.log(this.name + ' barks.'); - } -} - -var d = new Dog('Mitzie'); -d.speak(); // Mitzie barks. -</pre> - -<p>If there is a constructor present in subclass, it needs to first call super() before using "this".</p> - -<p>One may also extend traditional function-based "classes":</p> - -<pre class="brush: js">function Animal (name) { - this.name = name; -} - -Animal.prototype.speak = function () { - console.log(this.name + ' makes a noise.'); -} - -class Dog extends Animal { - speak() { - console.log(this.name + ' barks.'); - } -} - -var d = new Dog('Mitzie'); -d.speak(); // Mitzie barks. -</pre> - -<p>Note that classes cannot extend regular (non-constructible) objects. If you want to inherit from a regular object, you can instead use {{jsxref("Object.setPrototypeOf()")}}:</p> - -<pre class="brush: js">var Animal = { - speak() { - console.log(this.name + ' makes a noise.'); - } -}; - -class Dog { - constructor(name) { - this.name = name; - } -} - -// If you do not do this you will get a TypeError when you invoke speak -Object.setPrototypeOf(Dog.prototype, Animal); - -var d = new Dog('Mitzie'); -d.speak(); // Mitzie makes a noise. -</pre> - -<h2 id="Species">Species</h2> - -<p>You might want to return {{jsxref("Array")}} objects in your derived array class <code>MyArray</code>. The species pattern lets you override default constructors.</p> - -<p>For example, when using methods such as {{jsxref("Array.map", "map()")}} that returns the default constructor, you want these methods to return a parent <code>Array</code> object, instead of the <code>MyArray</code> object. The {{jsxref("Symbol.species")}} symbol lets you do this:</p> - -<pre class="brush: js">class MyArray extends Array { - // Overwrite species to the parent Array constructor - static get [Symbol.species]() { return Array; } -} - -var a = new MyArray(1,2,3); -var mapped = a.map(x => x * x); - -console.log(mapped instanceof MyArray); // false -console.log(mapped instanceof Array); // true -</pre> - -<h2 id="Super_class_calls_with_super">Super class calls with <code>super</code></h2> - -<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a></code> keyword is used to call corresponding methods of super class.</p> - -<pre class="brush: js">class Cat { - constructor(name) { - this.name = name; - } - - speak() { - console.log(this.name + ' makes a noise.'); - } -} - -class Lion extends Cat { - speak() { - super.speak(); - console.log(this.name + ' roars.'); - } -} - -var l = new Lion('Fuzzy'); -l.speak(); -// Fuzzy makes a noise. -// Fuzzy roars. - -</pre> - -<h2 id="Mix-ins">Mix-ins</h2> - -<p>Abstract subclasses or <em>mix-ins</em> are templates for classes. An ECMAScript class can only have a single superclass, so multiple inheritance from tooling classes, for example, is not possible. The functionality must be provided by the superclass.</p> - -<p>A function with a superclass as input and a subclass extending that superclass as output can be used to implement mix-ins in ECMAScript:</p> - -<pre class="brush: js">var calculatorMixin = Base => class extends Base { - calc() { } -}; - -var randomizerMixin = Base => class extends Base { - randomize() { } -}; -</pre> - -<p>A class that uses these mix-ins can then be written like this:</p> - -<pre class="brush: js">class Foo { } -class Bar extends calculatorMixin(randomizerMixin(Foo)) { }</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}}</td> - <td>{{Spec2('ES2016')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}}</td> - <td>{{Spec2('ES2017')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("javascript.classes")}}</p> - -<h2 id="Running_in_Scratchpad">Running in Scratchpad</h2> - -<p>A class can't be redefined. If you're playing with code in Scratchpad (Firefox menu Tools > Web Developer > Scratchpad) and you 'Run' a definition of a class with the same name twice, you'll get a confusing SyntaxError: redeclaration of let <class-name>.</p> - -<p>To re-run a definition, use Scratchpad's menu Execute > Reload and Run.<br> - Please vote for bug <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1428672">#1428672</a>.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Functions</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li> - <li>{{jsxref("Operators/super", "super")}}</li> - <li><a href="https://hacks.mozilla.org/2015/07/es6-in-depth-classes/">Blog post: "ES6 In Depth: Classes"</a></li> - <li><a href="https://github.com/tc39/proposal-class-fields">Fields and public/private class properties proposal (stage 3)</a></li> -</ul> |