OOJS: Nesne Yönelimli JavaÖrnekli Komut Dosyası Eğitimi

OOPS Kavramı Nedir? JavaSenaryo?

Çoğu zaman değişkenler veya diziler gerçek hayattaki durumları simüle etmek için yeterli değildir. JavaBu komut dosyası, gerçek hayattaki nesneler gibi davranan nesneler oluşturmanıza olanak tanır. Bir öğrenci veya bir ev, kendine özgü birçok özelliğe sahip bir nesne olabilir. Programlamayı kolaylaştırmak için nesnelerinizde özellikler ve yöntemler oluşturabilirsiniz. Nesneniz bir öğrenci ise, ad, soyad ve kimlik gibi özelliklere ve calculateRank veya changeAddress gibi yöntemlere sahip olacaktır. Nesneniz bir ev ise, oda sayısı, boya rengi ve konum gibi özelliklere ve calculateArea veya changeOwner gibi yöntemlere sahip olacaktır.

Nesne yönelimli programlama JavaBu nedenle senaryo, bu sayfada karşılaşacağınız dört temel fikre dayanmaktadır: grupping Durumu ve davranışı bir nesneye entegre etmek, bir şablonu kurucu aracılığıyla yeniden kullanmak, yöntemleri prototip aracılığıyla paylaşmak ve dahili verilere doğrudan erişimi kısıtlamak. Eğer dile yeni başlıyorsanız, bununla başlayın. giriş JavaSenaryo ve sonra buraya geri dön.

Nesne Nasıl Oluşturulur

Bunun gibi bir nesne oluşturabilirsiniz:

var objName = new Object();
objName.property1 = value1;
objName.property2 = value2;
objName.method1 = function()
{
  // line of code
}

Veya daha kısa olan nesne değişmez biçimini kullanarak:

var objName = { property1: value1, property2: value2, method1: function()
{
  // lines of code
} };

Nesne Özelliklerine ve Yöntemlerine Erişim

Bir nesnenin özelliğine nokta gösterimiyle erişebilir ve parantez ekleyerek bir metodu çağırabilirsiniz:

objectname.propertyname;   // read a property
objectname.methodname();   // call a method
objectname["propertyname"]; // bracket notation, useful for dynamic keys

Bu Örneği kendiniz deneyin:

<html>
<head>
	<title>Objects!!!</title>
	<script type="text/javascript">
      var student = new Object();
      student.fName = "John";
      student.lName = "Smith";
      student.id = 5;
      student.markE = 76;
      student.markM = 99;
      student.markS = 87;
      student.calculateAverage = function()
      {
      	return (student.markE + student.markM + student.markS)/3;
      };
      student.displayDetails = function()
      {
        document.write("Student Id: " + student.id + "<br />");
        document.write("Name: " + student.fName + " " + student.lName + "<br />");
        var avg = student.calculateAverage();
        document.write("Average Marks: " + avg);
      };
		student.displayDetails();
	</script>
</head>
<body>
</body>
</html>

Çıktı:

Student Id: 5
Name: John Smith
Average Marks: 87.33333333333333

OOPS Oluşturucusu

Nesneleri tek tek oluşturmak pek kullanışlı değil, çünkü aynı kodu her öğrenci için tekrarlamanız gerekecek. İşte burada nesne oluşturucu devreye giriyor. Oluşturucu, bir nesne oluşturucu ile çağrılan sıradan bir fonksiyondur. yeni Anahtar kelime; her bir örnek için yeniden kullanılabilen bir nesne türünü tanımlar.

Bir yapıcı fonksiyonun içinde, Re-Tweet Bu, oluşturulan yeni nesneyi ifade eder, bu nedenle her örnek, kendisine iletilen değerlerin kendi kopyasını alır. Notlar gibi ilgili değerler genellikle bir yerde saklanır. dizi Böylece tek seferde toplamları hesaplanabilir.

Bu Örneği kendiniz deneyin:

<html>
<head>
	<script type="text/javascript">
		function Student(first, last, id, english, maths, science)
        {
          this.fName = first;
          this.lName = last;
          this.id = id;
          this.markE = english;
          this.markM = maths;
          this.markS = science;
          this.calculateAverage = function()
          {
         	 return (this.markE + this.markM + this.markS)/3;
          }
		  this.displayDetails = function()
		  {
            document.write("Student Id: " + this.id + "<br />");
            document.write("Name: " + this.fName + " " + this.lName + "<br />");
            var avg = this.calculateAverage();
            document.write("Average Marks: " + avg + "<br /><br />");
		  }
		}
        var st1 = new Student("John", "Smith", 15, 85, 79, 90);
        var st2 = new Student("Hannah", "Turner", 23, 75, 80, 82);
        var st3 = new Student("Kevin", "White", 4, 93, 89, 90);
        var st4 = new Student("Rose", "Taylor", 11, 55, 63, 45);
        st1.displayDetails();
        st2.displayDetails();
        st3.displayDetails();
        st4.displayDetails();
	</script>
</head>
<body>
</body>
</html>

Çıktı:

Student Id: 15
Name: John Smith
Average Marks: 84.66666666666667

Student Id: 23
Name: Hannah Turner
Average Marks: 79

Student Id: 4
Name: Kevin White
Average Marks: 90.66666666666667

Student Id: 11
Name: Rose Taylor
Average Marks: 54.333333333333336

Bir Nesnenin Özellikleri Arasında Döngü

Sözdizimi:

for (variablename in objectname)
{
  // lines of code to be executed
}

İçin/içinde döngü Genellikle bir nesnenin özelliklerini incelemek için kullanılır. Nesneye istediğiniz adı verebilirsiniz. değişkenAncak nesne adı, zaten var olan bir nesneyle eşleşmelidir. Her geçişte, değişken özelliği tutar. anahtar Bir dize olarak, bu nedenle değer köşeli parantez gösterimiyle okunur, örneğin: çalışan[x].

Bu Örneği kendiniz deneyin:

<html>
<head>
	<script type="text/javascript">
		var employee={first:"John", last:"Doe", department:"Accounts"};
        var details = "";
        document.write("<b>Using for/in loops </b><br />");
        for (var x in employee)
        {
          details = x + ": " + employee[x];
          document.write(details + "<br />");
        }
	</script>
</head>
<body>
</body>
</html>

Çıktı:

Using for/in loops
first: John
last: Doe
department: Accounts

İki noktayı hatırlamakta fayda var. Bir for/in döngüsü, prototip zinciri aracılığıyla miras alınan numaralandırılabilir özelliklere de erişir, bu nedenle bir koruyucu gibi bir ifade... Object.prototype.hasOwnProperty.call(employee, x) Genellikle eklenir. Düz veri nesneleri için, Nesne.anahtarlar(çalışan) or Nesne.girişler(çalışan) Bu genellikle daha açık bir ifadedir, çünkü her ikisi de yalnızca nesnenin kendi özelliklerini döndürür.

ES6 sınıf sözdizimi nedir? JavaSenaryo?

ECMAScript 2015, yaygın olarak ES6 olarak adlandırılır, aşağıdaki özellikleri ekledi: sınıf Anahtar kelime. Bir sınıf, yukarıdaki kurucu fonksiyonun zaten kullandığı prototip sisteminin üzerinde sözdizimsel bir kolaylıktır: yeni bir nesne modeli tanıtılmamıştır. Çalıştırma Öğrenci türü Bir sınıf üzerinde hala "fonksiyon" dizesini döndürüyor ve sınıf gövdesinde yazılan her yöntem yükleniyor. Öğrenci prototipiBu, her nesnenin kendi yöntemini taşıması yerine, tüm örneklerin o yöntemin tek bir kopyasını paylaştığı anlamına gelir.

Sözdizimi ayrıca bazı pürüzleri de ortadan kaldırıyor. Sınıf gövdeleri her zaman katı modda çalışır ve bir sınıfı çağırmadan çalışır. yeni Bu sayede global nesneyi sessizce kirletmek yerine bir TypeError hatası fırlatılır ve getter'lar, setter'lar ve statik üyeler kendilerine özel bir yerde bulunur. Sonuç olarak, aynı amacı ifade eden daha kısa bir kod elde edilir.

class Student {
  constructor(first, last, id, english, maths, science) {
    this.fName = first;
    this.lName = last;
    this.id = id;
    this.marks = [english, maths, science];
  }

  calculateAverage() {
    const total = this.marks.reduce((sum, m) => sum + m, 0);
    return total / this.marks.length;
  }

  displayDetails() {
    console.log("Student Id: " + this.id);
    console.log("Name: " + this.fName + " " + this.lName);
    console.log("Average Marks: " + this.calculateAverage().toFixed(2));
  }
}

const st1 = new Student("John", "Smith", 15, 85, 79, 90);
st1.displayDetails();
console.log(typeof Student);
console.log(st1.calculateAverage === Student.prototype.calculateAverage);

Çıktı:

Student Id: 15
Name: John Smith
Average Marks: 84.67
function
true

Son iki satır bu noktayı kanıtlıyor: sınıf hala bir fonksiyon ve örnek üzerindeki metot, prototipte saklanan aynı fonksiyon nesnesidir.

Yapıcı Fonksiyon ile ES6 Sınıfı Arasındaki Fark

`extends` ve `super` kullanarak kalıtımı nasıl uygulayabilirsiniz?

Kalıtım, özel bir türün daha genel bir türün özelliklerini ve yöntemlerini yeniden kullanmasına olanak tanır. ES6 öncesinde bu, prototip zincirini üç ayrı adımda elle bağlamak anlamına geliyordu ve bunlardan birini unutmak kolaydı.

function Person(fName, lName) {
  this.fName = fName;
  this.lName = lName;
}

Person.prototype.introduce = function () {
  return "I am " + this.fName + " " + this.lName;
};

function Student(fName, lName, id) {
  Person.call(this, fName, lName);   // 1. borrow the parent constructor
  this.id = id;
}

Student.prototype = Object.create(Person.prototype); // 2. link the chain
Student.prototype.constructor = Student;              // 3. repair constructor

var st = new Student("Kevin", "White", 4);
console.log(st.introduce());
console.log(st instanceof Person);

Çıktı:

I am Kevin White
true

MKS uzanır Anahtar kelime, bu üç adımı da sizin için gerçekleştirir ve Süper Ebeveynine ulaşmanın temiz bir yolunu sunar. Bunun iki farklı kullanımı vardır. Süper:

• süper (...) bir çağrı olarak Üst sınıfın kurucusunu çalıştırır. Yalnızca türetilmiş bir sınıfın kurucusu içinde geçerlidir ve ona dokunmadan önce çalıştırılmalıdır. Re-TweetAksi takdirde ReferenceError hatası fırlatılır.
• üst.metot() Bir özellik arama işlemi, alt sınıfın geçersiz kıldığı bir yöntemin üst sınıf sürümünü çağırır; bu da davranışı değiştirmek yerine genişletmenin yoludur.

class Person {
  constructor(fName, lName) {
    this.fName = fName;
    this.lName = lName;
  }

  introduce() {
    return "I am " + this.fName + " " + this.lName;
  }
}

class Student extends Person {
  constructor(fName, lName, id) {
    super(fName, lName);   // must run before "this" is used
    this.id = id;
  }

  introduce() {
    return super.introduce() + ", roll number " + this.id;
  }
}

const st = new Student("Hannah", "Turner", 23);
console.log(st.introduce());
console.log(st instanceof Student, st instanceof Person);
console.log(Object.getPrototypeOf(Student.prototype) === Person.prototype);

Çıktı:

I am Hannah Turner, roll number 23
true true
true

Üçüncü satır önemli olanıdır. Şunu doğrular ki: uzanır Tam olarak elle oluşturulan manuel sürümle aynı prototip bağlantısını üretti, bu nedenle sınıflar prototip zincirlemeyi değiştirmedi. Sadece tekrarlayan kodları gizlediler. Bir özellik okunduğunda stMotor, önce örneği inceler, sonra Öğrenci prototipi, Daha sonra Kişi prototipi, Daha sonra Nesne.prototipve ilk eşleşmede durur; bu arama yolu prototip zinciridir.

Özel Sınıf Alanları ile Kapsülleme Nasıl Sağlanır?

Kapsülleme, korumak anlamına gelir.ping İçsel durum erişilemez durumda, bu nedenle yalnızca sizin kontrolünüzdeki yöntemlerle değiştirilebilir. Yıllardır JavaKomut dosyası geliştiricileri başına bir alt çizgi ekleyerek bunu taklit ettiler, ancak örneğin şu gibi bir isim: _denge Bu sadece bir kuraldır ve herhangi bir kod bunu yine de geçersiz kılabilir. Modern JavaKomut dosyası gerçek gizlilik sunar: adı ile başlayan bir alan. # Bu özellik yalnızca onu tanımlayan sınıf gövdesi içinde erişilebilir.

Özel sahalar üç somut fayda sağlar:

• Kullanımdan önce sınıf gövdesinde beyan edilmeleri gerekir; bu da türün iç durumunu tek bir yerde belgelemektedir.
• Onlar görünmezdir. Nesne.anahtarları, JSON.stringifyve for/in döngüleri sayesinde iç durum seri hale getirilmiş çıktıya sızmaz.
• Sınıfın dışından özel bir alana dokunmak, sessiz bir hata değil, kod çalışmadan önce yakalanan bir sözdizimi hatasıdır.

class BankAccount {
  #balance = 0;

  constructor(owner, opening) {
    this.owner = owner;
    this.#balance = opening;
  }

  deposit(amount) {
    if (amount <= 0) {
      return "Deposit must be positive";
    }
    this.#balance += amount;
    return this.owner + " balance: " + this.#balance;
  }

  get balance() {
    return this.#balance;
  }
}

const acc = new BankAccount("John", 500);
console.log(acc.deposit(250));
console.log(acc.deposit(-40));
console.log("Read via getter: " + acc.balance);
console.log("Own keys: " + Object.keys(acc));
console.log("JSON: " + JSON.stringify(acc));

Çıktı:

John balance: 750
Deposit must be positive
Read via getter: 750
Own keys: owner
JSON: {"owner":"John"}

Bakiye hiçbir zaman görünmez. Nesne.anahtarları veya JSON dizesinde ve negatif para yatırma işlemi, alanı bozmak yerine yöntem tarafından reddedilir. bakiyeyi al Erişimci, özel durumu güvenli bir şekilde yayınlamanın olağan yolu olan salt okunur bir görünüm sunar.

Nesneler, prototipler, sınıflar, kalıtım ve kapsülleme kavramları artık anlam kazandığına göre, geliştirmeye devam edin. Bu temellerle pratik yapın. pratik JavaKomut dosyası kod örnekleri, üzerinden çalış interaktif JavaSenaryo alıştırmalarıAlgoritmalara sınıflar uygulamak gibi hızlı sıralama JavaSenaryoÇıktıyı düzenlemek için şunu kullanın: JavaKomut dosyası dize biçimlendirmesive statik tipin nasıl olduğunu görünping nesne tasarımında değişiklikler TypeScript.

SSS