Bu eğitimde, örnekler yardımıyla JavaScript'teki prototipler hakkında bilgi edineceksiniz.
Prototipleri öğrenmeden önce şu eğitimleri kontrol ettiğinizden emin olun:
- JavaScript Nesneleri
- JavaScript Oluşturucu İşlevi
Bildiğiniz gibi, bir nesne yapıcı işlevi kullanarak JavaScript'te bir nesne oluşturabilirsiniz. Örneğin,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person();
Yukarıdaki örnekte, function Person()bir nesne yapıcı işlevidir. Biz iki nesneyi oluşturduk person1ve person2ondan.
JavaScript Prototipi
JavaScript'te, her işlev ve nesnenin varsayılan olarak prototip adında bir özelliği vardır. Örneğin,
function Person () ( this.name = 'John', this.age = 23 ) const person = new Person(); // checking the prototype value console.log(Person.prototype); // (… )
Yukarıdaki örnekte, bir Personyapıcı işlevin prototip özelliğine erişmeye çalışıyoruz .
Prototip özelliğinin şu anda değeri olmadığı için boş bir nesne (…) gösterir.
Prototip Kalıtımı
JavaScript'te, bir yapıcı işlevine özellikler ve yöntemler eklemek için bir prototip kullanılabilir. Ve nesneler bir prototipten özellikleri ve yöntemleri miras alır. Örneğin,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person(); // adding property to constructor function Person.prototype.gender = 'male'; // prototype value of Person console.log(Person.prototype); // inheriting the property from prototype console.log(person1.gender); console.log(person2.gender);
Çıktı
(cinsiyet: "erkek") erkek erkek
Yukarıdaki programda, yeni bir özellik ekledik genderiçin Personkullanarak yapıcı işleviyle:
Person.prototype.gender = 'male';
Ardından nesneyi nesneler person1ve yapıcı işlevinin prototip özelliğinden person2miras alır .genderPerson
Dolayısıyla, hem nesneleri person1ve person2cinsiyet özelliği erişebilirler.
Not: Özelliği bir nesne yapıcı işlevine eklemek için sözdizimi şöyledir:
objectConstructorName.prototype.key = 'value';
Prototip, bir yapıcı işlevinden oluşturulan tüm nesnelere ek özellik sağlamak için kullanılır.
Prototip Kullanarak Oluşturucu İşlevine Yöntem Ekleme
Prototip kullanarak bir yapıcı işlevine yeni yöntemler de ekleyebilirsiniz. Örneğin,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person(); // adding a method to the constructor function Person.prototype.greet = function() ( console.log('hello' + ' ' + this.name); ) person1.greet(); // hello John person2.greet(); // hello John
Yukarıdaki programda, bir prototip kullanılarak yapıcı işlevine yeni bir yöntem greeteklenir Person.
Prototipin Değiştirilmesi
Bir prototip değeri değiştirilirse, tüm yeni nesneler değiştirilmiş özellik değerine sahip olacaktır. Önceden oluşturulan tüm nesneler önceki değere sahip olacaktır. Örneğin,
// constructor function function Person() ( this.name = 'John' ) // add a property Person.prototype.age = 20; // creating an object const person1 = new Person(); console.log(person1.age); // 20 // changing the property value of prototype Person.prototype = ( age: 50 ) // creating new object const person3 = new Person(); console.log(person3.age); // 50 console.log(person1.age); // 20
Not : Dizeler, diziler vb. Gibi standart JavaScript yerleşik nesnelerinin prototiplerini değiştirmemelisiniz. Bu kötü bir uygulama olarak kabul edilir.
JavaScript Prototip Zincirleme
Bir nesne, yapıcı işlevinde ve prototip nesnesindeki aynı özelliğe erişmeye çalışırsa, nesne, özelliği yapıcı işlevinden alır. Örneğin,
function Person() ( this.name = 'John' ) // adding property Person.prototype.name = 'Peter'; Person.prototype.age = 23 const person1 = new Person(); console.log(person1.name); // John console.log(person1.age); // 23
Yukarıdaki programda, yapıcı işlevinde ve ayrıca yapıcı işlevinin prototip özelliğinde bir özellik adı bildirilir.
Program yürütüldüğünde, person1.nameadlandırılmış bir özellik olup olmadığını görmek için yapıcı işlevine bakar name. Yapıcı işlevi değerli name özelliğine sahip 'John'olduğundan, nesne bu özellikten değer alır.
Program yürütüldüğünde, person1.ageadlandırılmış bir özellik olup olmadığını görmek için yapıcı işlevine bakar age. Yapıcı işlevinin ageözelliği olmadığından , program yapıcı işlevinin prototip nesnesine bakar ve nesne, özelliği prototip nesnesinden (varsa) miras alır.
Not : Yapıcı işlevinin prototip özelliğine bir nesneden de erişebilirsiniz.
function Person () ( this.name = 'John' ) // adding a prototype Person.prototype.age = 24; // creating object const person = new Person(); // accessing prototype property console.log(person.__proto__); // ( age: 24 )
Yukarıdaki örnekte, personkullanılarak prototip özelliğine erişmek için bir nesne kullanılmıştır __proto__. Ancak, __proto__kullanımdan kaldırıldı ve kullanmaktan kaçınmalısınız.
