JavaScript Sınıfı

ECMAScript 2015, aynı zamanda ES6 olarak da bilinir, JavaScript sınıflarını tanıttı.

JavaScript sınıfları, JavaScript nesnelerinin şablonlarıdır.

JavaScript sınıfları

gramer

Anahtar kelime class Sınıf oluşturun.

Her zaman adı constructor() yöntemi:

gramer

class ClassName {
  constructor() { ... }
}

örnek

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

Örnekte, "Car" adında bir sınıf oluşturuldu.

Bu sınıf iki başlangıç özelliği içerir: "name" ve "year".

JavaScript SınıfıDeğildirnesne.

Sadece JavaScript nesnesidir.Şablon.

Sınıf kullanımı

Bir sınıfınız varsa, bu sınıfı kullanarak nesneler oluşturabilirsiniz:

örnek

let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);

Try It Yourself

Örnekte Car sınıfıiki tane oluşturdu Car nesnesi.

Yeni nesne oluşturulduğunda otomatik olarak çağrılır.

Constructor yöntemi

Constructor yöntemi özel bir yöntemdir:

  • Doğru adı "constructor" olan sahip olmalıdır
  • Yeni nesne oluşturulduğunda otomatik olarak çalışır
  • Nesne özelliklerini başlatmak için kullanılır
  • Eğer constructor yöntemi tanımlanmamışsa, JavaScript boş bir constructor yöntemi ekler.

Class yöntemi

Sınıf yönteminin oluşturulması

gramer

nesne yöntemleri ile aynı.

Anahtar kelime class Sınıf oluşturun.

Her zaman adı constructor() yöntem.

Ardından istediğiniz kadar yöntem ekleyin.

gramer

class ClassName {
  constructor() { ... }
  method_1() { ... }
  method_2() { ... }
  method_3() { ... }
}

Adı "age" olan bir sınıf yöntemi oluşturun, bu yöntem araba yaşını döndürür:

örnek

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    let date = new Date();
    return date.getFullYear() - this.year;
  }
}
let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML = "My car is " + myCar.age() + " years old.";

Try It Yourself

Sınıf yöntemlerine parametre gönderebilirsiniz:

örnek

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age(x) {
    return x - this.year;
  }
}
let date = new Date();
let year = date.getFullYear();
let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML = "My car is " + myCar.age(year) + " years old.";

Try It Yourself

Browser Support

The following table indicates the first browser version to fully support JavaScript classes:

Chrome IE Firefox Safari Opera
Chrome 49 Edge 12 Firefox 45 Safari 9 Opera 36
March 2016 July 2015 March 2016 October 2015 March 2016

In the latter part of this tutorial, you will learn more about JavaScript classes.