initial commit

1 files changed, 276 insertions, 0 deletions

diff --git a/files/tr/web/javascript/reference/classes/index.html b/files/tr/web/javascript/reference/classes/index.html
new file mode 100644
index 0000000000..77a29ab167
--- /dev/null
+++ b/files/tr/web/javascript/reference/classes/index.html
@@ -0,0 +1,276 @@
+---
+title: Classes
+slug: Web/JavaScript/Reference/Classes
+tags:
+  - Classes
+  - Constructors
+  - ECMAScript6
+  - Inheritance
+  - Intermediate
+  - JavaScript
+  - Kalıtım
+  - NeedsTranslation
+  - TopicStub
+  - sınıf
+translation_of: Web/JavaScript/Reference/Classes
+---
+<div>{{JsSidebar("Classes")}}</div>
+
+<p id="ECMAScript_2015_ile_tanıtılan_Javascript_sınıfları_aslında_halihazırdaki_prototype_temelli_kalıtımın_sözdizi_daha_kolaylaştırılmış_halidir._Class_sözdizimi_yeni_bir_nesne_tabanlı_Javascript_modeli_sunmamaktadır.">ECMAScript 2015 ile tanıtılan Javascript sınıfları,  aslında halihazırdaki prototype temelli kalıtımın, sözdizi daha kolaylaştırılmış halidir. Class sözdizimi yeni bir nesne tabanlı Javascript modeli <u>sunmamaktadır</u>.</p>
+
+<h2 id="Sınıf_tanımlama">Sınıf tanımlama</h2>
+
+<p><br>
+ Aslında sınıflar class oluşturmak için kullanılan özel <a href="/tr/docs/Web/JavaScript/Reference/Functions">fonksiyonlar</a>dır. Javascript sınıfları <a href="/tr/docs/Web/JavaScript/Reference/Operators/function">klasik fonksiyon tanımladığınız</a> gibi tanımlayabilir veya fonksiyonlar ile yapabildiğiniz gibi bir <a href="/tr/docs/Web/JavaScript/Reference/Statements/class">değişkene atayabilirsiniz</a>.</p>
+
+<h3 id="Sınıf_Tanımları">Sınıf Tanımları</h3>
+
+<p>Bir sınıf tanımlamanın bir yolu <code>class</code> ifadesini sınıf adınızla birlikte kullanmaktır. (Örn: Dikdortgen)</p>
+
+<pre class="brush: js">class Dikdortgen {
+  constructor(yukseklik, genislik) {
+    this.yukseklik = yukseklik;
+    this.genislik = genislik;
+  }
+}</pre>
+
+<h4 id="Erişim">Erişim</h4>
+
+<p>Sınıf tanımları ve fonksiyon tanımları arasındaki önemli bir fark, fonksiyonlara tanımlandığı satırdan önce {{Glossary("Hoisting", "erişim sağlanabilir")}}. Sınıflara tanımlandığı satırdan önce  erişilemezler. Önce sınıfları tanımlamanız ve ardından ona erişmeniz gerekir.  Aksi halde aşağıdakine benzer bir hatayla karşılaşırsınız. {{jsxref("ReferenceError")}}:</p>
+
+<pre class="brush: js example-bad">var p = new Galeri(); // ReferenceError
+
+class Galeri {}
+</pre>
+
+<h3 id="Class_expressions">Class expressions</h3>
+
+<p>Bir class'ı tanımlamanın bir başka yolu ise <strong>"class"</strong> ifadesidir. Class ifadelerine isim verilebilir. İsimli olan bir class ifadesi class body'sinin localidir.</p>
+
+<p> </p>
+
+<pre class="brush: js">// isimsiz class
+var Dikdortgen = class {
+  constructor(yukseklik, genislik) {
+    this.yukseklik= yukseklik;
+    this.genislik= genislik;
+  }
+};
+
+// isimli class
+var Dikdortgen = class Dikdortgen {
+  constructor(yukseklik, genislik) {
+    this.yukseklik= yukseklik;
+    this.genislik= genislik;
+  }
+};
+</pre>
+
+<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 constructors.</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>.</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 a parent 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 Polygon {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+
+  get area() {
+    return this.calcArea();
+  }
+
+  calcArea() {
+    return this.height * this.width;
+  }
+}</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 are also <strong>not </strong>callable when the class is instantiated. 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.sqrt(dx*dx + dy*dy);
+    }
+}
+
+const p1 = new Point(5, 5);
+const p2 = new Point(10, 10);
+
+console.log(Point.distance(p1, p2));</pre>
+
+<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.');
+  }
+}
+</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 functions on an object's parent.</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.');
+  }
+}
+</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 =&gt; class extends Base {
+  calc() { }
+};
+
+var RandomizerMixin = Base =&gt; 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('ES6', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</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>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(42.0)}}<sup>[1]</sup><br>
+    {{CompatChrome(49.0)}}</td>
+   <td>45</td>
+   <td>13</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatSafari(9.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>45</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatChrome(42.0)}}<sup>[1]</sup><br>
+    {{CompatChrome(49.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Requires strict mode. Non-strict mode support is behind the flag "Enable Experimental JavaScript", disabled by default.</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>
+</ul>