Bir sınıf mirası oluşturmak için extends komutunu kullanın anahtar kelime.
Sınıf mirasıyla oluşturulan bir sınıf, tüm yöntemleri miras alır. başka bir sınıf:
Yöntemleri "Araba"dan miras alacak "Model" adında bir sınıf oluşturun. sınıf:
class Car {
constructor(brand) {
this.carname =
brand; }
present() {
return 'I have a ' + this.carname; }
}
class Model extends Car { constructor(brand, mod) {
super(brand);
this.model = mod; }
show() {
return this.present() + ', it is a ' + this.model; }
}
let myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML
= myCar.show();Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Inheritance</h1>
<p>Use the "extends" keyword to inherit all methods from another class.</p>
<p>Use the "super" method to call the parent's constructor function.</p>
<p id="demo"></p>
<script>
class Car {
constructor(brand) {
this.carname = brand;
}
present() {
return 'I have a ' + this.carname;
}
}
class Model extends Car {
constructor(brand, mod) {
super(brand);
this.model = mod;
}
show() {
return this.present() + ', it is a ' + this.model;
}
}
const myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = myCar.show();
</script>
</body>
</html>
super() yöntemi üst öğeyi ifade eder sınıf.
super() yöntemini çağırarak yapıcı yöntemi, ebeveynin yapıcı yöntemini çağırırız ve ona erişim sağlarız ebeveynin özellikleri ve yöntemleri.
Kalıtım, kodun yeniden kullanılabilirliği açısından faydalıdır: yeni bir sınıf oluşturduğunuzda mevcut sınıfın özelliklerini ve yöntemlerini yeniden kullanın.
Sınıflar ayrıca alıcıları ve ayarlayıcıları kullanmanıza da olanak tanır.
Özellikle eğer mülkleriniz için alıcı ve ayarlayıcıları kullanmak akıllıca olabilir. onları iade etmeden önce veya değerle ilgili özel bir şey yapmak istiyorsanız onları sen ayarlarsın.
Sınıfa alıcılar ve ayarlayıcılar eklemek için öğesini kullanın. anahtar kelimeleri alın ve ayarlayın.
"Carname" özelliği için bir alıcı ve ayarlayıcı oluşturun:
class Car {
constructor(brand) {
this.carname
= brand;
}
get cnam() {
return this.carname;
}
set cnam(x) {
this.carname = x;
}
}
const myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.cnam;Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Getter/Setter</h1>
<p>A demonstration of how to add getters and setters in a class, and how to use the getter to get the property value.</p>
<p id="demo"></p>
<script>
class Car {
constructor(brand) {
this.carname = brand;
}
get cnam() {
return this.carname;
}
set cnam(x) {
this.carname = x;
}
}
const myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.cnam;
</script>
</body>
</html>
Not: alıcı bir yöntem olsa bile, parantezleri kullanmazsınız. mülk değerini almak istiyorum.
Alıcı/ayarlayıcı yönteminin adı, yöntemin adıyla aynı olamaz. özelliği, bu durumda araba adı.
Birçok programcı alt çizgi karakterini kullanır _ Alıcı/ayarlayıcıyı gerçek özellikten ayırmak için özellik adından önce:
Alıcı/ayarlayıcıyı ayırmak için alt çizgi karakterini kullanabilirsiniz. gerçek mülk:
class Car {
constructor(brand) {
this._carname
= brand;
}
get carname() {
return this._carname;
}
set carname(x) {
this._carname = x;
}
}
const myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.carname;Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Getter/Setter</h1>
<p>Using an underscore character is common practice when using getters/setters in JavaScript, but not mandatory, you can name them anything you like, but not the same as the property name.</p>
<p id="demo"></p>
<script>
class Car {
constructor(brand) {
this._carname = brand;
}
get carname() {
return this._carname;
}
set carname(x) {
this._carname = x;
}
}
const myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.carname;
</script>
</body>
</html>
Bir ayarlayıcı kullanmak için, bir özellik değerini ayarlarken kullandığınız söz dizimini parantez olmadan kullanın:
Araç adını "Volvo" olarak değiştirmek için bir ayarlayıcı kullanın:
class Car {
constructor(brand) {
this._carname
= brand;
}
get carname() {
return this._carname;
}
set carname(x) {
this._carname = x;
}
}
const myCar = new Car("Ford");
myCar.carname = "Volvo";
document.getElementById("demo").innerHTML = myCar.carname;Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Setters</h1>
<p>When using a setter to set a property value, you do not use parantheses.</p>
<p id="demo"></p>
<script>
class Car {
constructor(brand) {
this._carname = brand;
}
set carname(x) {
this._carname = x;
}
get carname() {
return this._carname;
}
}
const myCar = new Car("Ford");
myCar.carname = "Volvo";
document.getElementById("demo").innerHTML = myCar.carname;
</script>
</body>
</html>
İşlevlerden ve diğer JavaScript bildirimlerinden farklı olarak sınıf bildirimleri kaldırılmaz.
Bu, bir sınıfı kullanabilmeniz için önce onu tanımlamanız gerektiği anlamına gelir:
//You cannot use the class yet.
//myCar = new Car("Ford") will raise an error.
class Car { constructor(brand) {
this.carname = brand; }
}
//Now you can use the class:
const myCar = new Car("Ford")Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Classes are not Hoisted</h1>
<p>You will get an error if you try to use a class before it is declared.</p>
<p id="demo"></p>
<script>
//You cannot use the class yet.
//myCar = new Car("Ford") will raise an error.
class Car {
constructor(brand) {
this.carname = brand;
}
}
//Now you can use the class:
const myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.carname;
</script>
</body>
</html>
Not: İşlevler gibi diğer bildirimler için bir ALAMAZSINIZ Bildirilmeden önce kullanmaya çalıştığınızda hata oluştu, çünkü varsayılan davranış JavaScript bildirimlerinin sayısı artıyor (bildirim en üste taşınıyor).