From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- .../tr/web/javascript/reference/classes/index.html | 276 +++++++++++++++++++++ 1 file changed, 276 insertions(+) create mode 100644 files/tr/web/javascript/reference/classes/index.html (limited to 'files/tr/web/javascript/reference/classes/index.html') 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 +--- +
{{JsSidebar("Classes")}}
+ +

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.

+ +

Sınıf tanımlama

+ +


+ Aslında sınıflar class oluşturmak için kullanılan özel fonksiyonlardır. Javascript sınıfları klasik fonksiyon tanımladığınız gibi tanımlayabilir veya fonksiyonlar ile yapabildiğiniz gibi bir değişkene atayabilirsiniz.

+ +

Sınıf Tanımları

+ +

Bir sınıf tanımlamanın bir yolu class ifadesini sınıf adınızla birlikte kullanmaktır. (Örn: Dikdortgen)

+ +
class Dikdortgen {
+  constructor(yukseklik, genislik) {
+    this.yukseklik = yukseklik;
+    this.genislik = genislik;
+  }
+}
+ +

Erişim

+ +

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")}}:

+ +
var p = new Galeri(); // ReferenceError
+
+class Galeri {}
+
+ +

Class expressions

+ +

Bir class'ı tanımlamanın bir başka yolu ise "class" ifadesidir. Class ifadelerine isim verilebilir. İsimli olan bir class ifadesi class body'sinin localidir.

+ +

 

+ +
// 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;
+  }
+};
+
+ +

Class body and method definitions

+ +

The body of a class is the part that is in curly brackets {}. This is where you define class members, such as methods or constructors.

+ +

Strict mode

+ +

The bodies of class declarations and class expressions are executed in strict mode.

+ +

Constructor

+ +

The constructor method is a special method for creating and initializing an object created with a class. 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 constructor method.

+ +

A constructor can use the super keyword to call the constructor of a parent class.

+ +

Prototype methods

+ +

See also method definitions.

+ +
class Polygon {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+
+  get area() {
+    return this.calcArea();
+  }
+
+  calcArea() {
+    return this.height * this.width;
+  }
+}
+ +

Static methods

+ +

The static keyword defines a static method for a class. Static methods are called without instantiating their class and are also not callable when the class is instantiated. Static methods are often used to create utility functions for an application.

+ +
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));
+ +

Sub classing with extends

+ +

The extends keyword is used in class declarations or class expressions to create a class as a child of another class.

+ +
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.');
+  }
+}
+
+ +

Super class calls with super

+ +

The super keyword is used to call functions on an object's parent.

+ +
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.');
+  }
+}
+
+ +

Mix-ins

+ +

Abstract subclasses or mix-ins 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.

+ +

A function with a superclass as input and a subclass extending that superclass as output can be used to implement mix-ins in ECMAScript:

+ +
var CalculatorMixin = Base => class extends Base {
+  calc() { }
+};
+
+var RandomizerMixin = Base => class extends Base {
+  randomize() { }
+};
+
+ +

A class that uses these mix-ins can then be written like this:

+ +
class Foo { }
+class Bar extends CalculatorMixin(RandomizerMixin(Foo)) { }
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES6')}}Initial definition.
{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ESDraft')}} 
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)EdgeInternet ExplorerOperaSafari
Basic support{{CompatChrome(42.0)}}[1]
+ {{CompatChrome(49.0)}}		4513{{CompatNo}}{{CompatNo}}{{CompatSafari(9.0)}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}45{{CompatUnknown}}{{CompatUnknown}}9{{CompatChrome(42.0)}}[1]
+ {{CompatChrome(49.0)}}
+
+ +

[1] Requires strict mode. Non-strict mode support is behind the flag "Enable Experimental JavaScript", disabled by default.

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf