JavaScript .protope nas─▒l ├žal─▒┼č─▒r?


Al─▒nan cevaba git


Bunu dinamik programlama dillerinde yapm─▒yorum ama JavaScript kodundaki pay─▒m─▒ yazd─▒m. Bu prototip tabanl─▒ programlaman─▒n ba┼č─▒n─▒ ger├žekten hi├ž anlamad─▒m, bunun nas─▒l ├žal─▒┼čt─▒─č─▒n─▒ bilen var m─▒?

 var obj = new Object();
obj.prototype.test = function() { alert('Hello?'); };
var obj2 = new obj();
obj2.test();
 

Bir s├╝re ├Ânce insanlarla yapt─▒─č─▒m ├žok tart─▒┼čmay─▒ hat─▒rl─▒yorum (ne yapt─▒─č─▒mdan tam olarak emin de─čilim) ama anlad─▒─č─▒m kadar─▒yla s─▒n─▒f kavram─▒ yok. Bu sadece bir nesne ve bu nesnelerin ├Ârnekleri orijinalin klonlar─▒ de─čil mi?

Peki bu ".prototype" ├Âzelli─činin JavaScript'teki amac─▒ nedir? ├ľrnek nesnelerle nas─▒l ili┼čkilidir?

G├╝ncelleme: do─čru yol

 var obj = new Object(); // not a functional object
obj.prototype.test = function() { alert('Hello?'); }; // this is wrong!

function MyObject() {} // a first class functional object
MyObject.prototype.test = function() { alert('OK'); } // OK
 

Ayr─▒ca bu slaytlar ger├žekten ├žok yard─▒mc─▒ oldu.


1977









Cevap say─▒s─▒n─▒ say: 25






Her JavaScript nesnesinin [[Prototip]] adl─▒ dahili bir ├Âzelli─či vard─▒r . obj.propName Veya arac─▒l─▒─č─▒yla bir ├Âzellik ararsan─▒z obj['propName'] ve nesne b├Âyle bir ├Âzelli─če sahip de─čilse - bu denetlenebilir obj.hasOwnProperty('propName') - ├žal─▒┼čma zaman─▒ bunun yerine [[Prototype]] taraf─▒ndan ba┼čvurulan nesnede ├Âzelli─či arar. E─čer prototip-nesne de b├Âyle bir ├Âzelli─če sahip de─čilse, prototipi s─▒rayla kontrol edilir, b├Âylece orijinal nesnenin prototip zincirinde bir e┼čle┼čme bulunana veya sonuna ula┼č─▒l─▒ncaya kadar y├╝r├╝r .

Baz─▒ JavaScript uygulamalar─▒ [[Prototype]] ├Âzelli─čine, ├Ârne─čin adl─▒ standart olmayan bir ├Âzellik arac─▒l─▒─č─▒yla do─črudan eri┼čime izin verir __proto__ . Genel olarak, bir nesnenin prototipini yaln─▒zca nesne olu┼čturma s─▒ras─▒nda ayarlamak m├╝mk├╝nd├╝r: ├╝zerinden yeni bir nesne olu┼čturursan─▒z new Func() , nesnenin [[Prototype]] ├Âzelli─či, ba┼čvuruda bulunulan nesneye ayarlan─▒r Func.prototype .

Bu, JavaScriptÔÇÖin kal─▒t─▒m sistemi - g├Ârd├╝─č├╝m├╝z gibi - prototip ve s─▒n─▒f temelli olmas─▒na ra─čmen, JavaScriptÔÇÖteki s─▒n─▒flar─▒ sim├╝le etmeyi sa─člar:

Yap─▒c─▒ i┼člevlerini yaln─▒zca s─▒n─▒flar ve prototipin ├Âzellikleri (├Ârne─čin, yap─▒c─▒ i┼člevinin prototype ├Âzelli─či taraf─▒ndan ba┼čvurulan nesne ) payla┼č─▒lan ├╝yeler, yani her bir ├Ârnek i├žin ayn─▒ olan ├╝yeler olarak d├╝┼č├╝n├╝n . S─▒n─▒f tabanl─▒ sistemlerde, y├Ântemler her ├Ârnek i├žin ayn─▒ ┼čekilde uygulan─▒r, bu nedenle normal olarak y├Ântemler prototipe eklenir, oysa nesnenin alanlar─▒ ├Ârne─če ├Âzg├╝d├╝r ve bu nedenle yap─▒m s─▒ras─▒nda nesnenin kendisine eklenir.


981







Java, C # veya C ++ gibi klasik miras uygulayan bir dilde, bir s─▒n─▒f - nesneleriniz i├žin bir plan olu┼čturarak ba┼člayabilirsiniz - ve sonra o s─▒n─▒ftan yeni nesneler olu┼čturabilir veya s─▒n─▒f─▒ art─▒rarak yeni bir s─▒n─▒f tan─▒mlayarak geni┼čletebilirsiniz. Orijinal s─▒n─▒f

JavaScript'te ilk ├Ânce bir nesne yarat─▒rs─▒n─▒z (s─▒n─▒f kavram─▒ yoktur), sonra kendi nesnenizi geni┼čletebilir veya ondan yeni nesneler olu┼čturabilirsiniz. Bu zor de─čil, ama klasik ┼čekilde kullan─▒lan biri i├žin metabolize edilmesi biraz yabanc─▒ ve zor.

├ľrnek:

 //Define a functional object to hold persons in JavaScript
var Person = function(name) {
  this.name = name;
};

//Add dynamically to the already defined object a new getter
Person.prototype.getName = function() {
  return this.name;
};

//Create a new object of type Person
var john = new Person("John");

//Try the getter
alert(john.getName());

//If now I modify person, also John gets the updates
Person.prototype.sayMyName = function() {
  alert('Hello, my name is ' + this.getName());
};

//Call the new method on john
john.sayMyName(); 

┼×imdiye kadar temel nesneyi geni┼čletiyorum, ┼čimdi ba┼čka bir nesneyi yarat─▒yorum ve sonra Ki┼čiden miras al─▒yorum.

 //Create a new object of type Customer by defining its constructor. It's not 
//related to Person for now.
var Customer = function(name) {
    this.name = name;
};

//Now I link the objects and to do so, we link the prototype of Customer to 
//a new instance of Person. The prototype is the base that will be used to 
//construct all new instances and also, will modify dynamically all already 
//constructed objects because in JavaScript objects retain a pointer to the 
//prototype
Customer.prototype = new Person();     

//Now I can call the methods of Person on the Customer, let's try, first 
//I need to create a Customer.
var myCustomer = new Customer('Dream Inc.');
myCustomer.sayMyName();

//If I add new methods to Person, they will be added to Customer, but if I
//add new methods to Customer they won't be added to Person. Example:
Customer.prototype.setAmountDue = function(amountDue) {
    this.amountDue = amountDue;
};
Customer.prototype.getAmountDue = function() {
    return this.amountDue;
};

//Let's try:       
myCustomer.setAmountDue(2000);
alert(myCustomer.getAmountDue());
 

 var Person = function (name) {
    this.name = name;
};
Person.prototype.getName = function () {
    return this.name;
};
var john = new Person("John");
alert(john.getName());
Person.prototype.sayMyName = function () {
    alert('Hello, my name is ' + this.getName());
};
john.sayMyName();
var Customer = function (name) {
    this.name = name;
};
Customer.prototype = new Person();

var myCustomer = new Customer('Dream Inc.');
myCustomer.sayMyName();
Customer.prototype.setAmountDue = function (amountDue) {
    this.amountDue = amountDue;
};
Customer.prototype.getAmountDue = function () {
    return this.amountDue;
};
myCustomer.setAmountDue(2000);
alert(myCustomer.getAmountDue()); 

Dedi─čim gibi setAmountDue () 'u ├ža─č─▒ramazsam, bir ki┼čide getAmountDue ()' i arayabilirim.

 //The following statement generates an error.
john.setAmountDue(1000);
 

1789







Bu a├ž─▒klama s─▒ras─▒nda ├Ârnek olarak kabul edilebilecek ve hen├╝z yorum yap─▒lmam─▒┼č ├žok basit bir prototip tabanl─▒ nesne modelidir:

 function Person(name){
    this.name = name;
}
Person.prototype.getName = function(){
    console.log(this.name);
}
var person = new Person("George");
 

Prototip konseptinden ge├žmeden ├Ânce dikkate almam─▒z gereken baz─▒ ├Ânemli noktalar var.

1- JavaScript fonksiyonlar─▒ ger├žekte nas─▒l ├žal─▒┼č─▒r?

─░lk ad─▒m─▒ atmak i├žin, JavaScript i┼člevlerinin ger├žekte nas─▒l ├žal─▒┼čt─▒─č─▒n─▒, this i├žinde anahtar s├Âzc├╝─č├╝ kullanan s─▒n─▒f benzeri bir i┼člev olarak veya ba─č─▒ms─▒z de─či┼čkenleriyle d├╝zenli bir i┼člev olarak, ne yapt─▒─č─▒n─▒ ve ne d├Ând├╝rd├╝─č├╝n├╝ bulmak zorunday─▒z.

Diyelim ki bir Person nesne modeli olu┼čturmak istiyoruz . ama bu ad─▒mda ve anahtar kelimeyi kullanmadan ayn─▒ ┼čeyi yapmaya ├žal─▒┼čaca─č─▒m prototype new .

Yani bu a┼čamada functions , objects ve this anahtar kelime, tek sahip bulunmaktad─▒r.

─░lk soru olaca─č─▒n─▒ nas─▒l this anahtar kelime kullanmadan yararl─▒ olabilir new anahtar kelime .

Demek ki bo┼č bir nesnemiz oldu─čunu ve bunun gibi iki fonksiyonun oldu─čunu s├Âyleyelim:

 var person = {};
function Person(name){  this.name = name;  }

function getName(){
    console.log(this.name);
}
 

ve ┼čimdi kullanmadan new anahtar kelime biz bu i┼člevleri kullanabilirsiniz nas─▒l. Yani JavaScript bunu yapmak i├žin 3 farkl─▒ yol vard─▒r:

a. ilk y├Ântem sadece i┼člevi normal bir i┼člev olarak ├ža─č─▒rmakt─▒r:

 Person("George");
getName();//would print the "George" in the console
 

Bu durumda, bu genellikle window taray─▒c─▒daki veya GLOBAL i├žindeki genel nesne olan ge├žerli ba─člam nesnesi olacakt─▒r Node.js . Bunun anlam─▒, taray─▒c─▒da window.name veya Node.js'de GLOBAL.name, de─čeri olarak "George" olacakt─▒.

b. Biz yapabilirsiniz takmak onun ├Âzellikleri olarak, bir nesneye onlar─▒

- Bunu yapman─▒n en kolay yolu , bo┼č person nesneyi de─či┼čtirmektir, ┼č├Âyle:

 person.Person = Person;
person.getName = getName;
 

bu ┼čekilde onlar─▒ ┼č├Âyle adland─▒rabiliriz:

 person.Person("George");
person.getName();// -->"George"
 

ve ┼čimdi person nesne ┼č├Âyle:

 Object {Person: function, getName: function, name: "George"}
 

- Bir nesneye ├Âzellik eklemenin di─čer yolu prototype , herhangi bir JavaScript nesnesinin ad─▒n─▒ ta┼č─▒yan nesnenin ad─▒n─▒ kullanmakt─▒r __proto__ ve onu ├Âzet b├Âl├╝m├╝nde biraz a├ž─▒klamaya ├žal─▒┼čt─▒m. B├Âylece benzer sonucu ┼č├Âyle yapabilirdik:

 person.__proto__.Person = Person;
person.__proto__.getName = getName;
 

Ama asl─▒nda yapt─▒─č─▒m─▒z ┼čeyi de─či┼čtiriyoruz Object.prototype , ├ž├╝nk├╝ de─či┼čmezleri ( { ... } ) kullanarak bir JavaScript nesnesi olu┼čturdu─čumuzda, temelde yarat─▒l─▒r Object.prototype , yani yeni olu┼čturulmu┼č nesneye adland─▒r─▒lm─▒┼č bir ├Âznitelik olarak eklenir __proto__ , yani de─či┼čtirirsek ├ľnceki kod snippet'imizde yapt─▒─č─▒m─▒z gibi, iyi bir uygulama de─čil, t├╝m JavaScript nesneleri de─či┼čecekti. Peki ┼čimdi daha iyi uygulama ne olabilir:

 person.__proto__ = {
    Person: Person,
    getName: getName
};
 

ve ┼čimdi di─čer nesneler bar─▒┼č i├žinde ama yine de iyi bir uygulama gibi g├Âr├╝nm├╝yor. Dolay─▒s─▒yla yine bir ├ž├Âz├╝m├╝m├╝z daha var, ancak bu ├ž├Âz├╝m├╝ kullanmak i├žin, person nesnenin yarat─▒ld─▒─č─▒ kod sat─▒r─▒na geri d├Ânmeliyiz ( var person = {}; ) ve sonra ┼ču ┼čekilde de─či┼čtirelim:

 var propertiesObject = {
    Person: Person,
    getName: getName
};
var person = Object.create(propertiesObject);
 

yapt─▒─č─▒ ┼čey yeni bir JavaScript olu┼čturmak ve niteli─či Object eklemek . Yani yapabilece─činden emin olmak i├žin: propertiesObject __proto__

 console.log(person.__proto__===propertiesObject); //true
 

Ancak buradaki zor nokta __proto__ , person nesnenin birinci d├╝zeyinde tan─▒mlanan t├╝m ├Âzelliklere eri┼čebilmenizdir (daha fazla ayr─▒nt─▒ i├žin ├Âzet b├Âl├╝m├╝n├╝ okuyun).


G├Ârd├╝─č├╝n├╝z gibi, bu iki yoldan birini kullanmak this tam olarak person nesneyi i┼čaret eder .

c. JavaScript, i┼člevi this kullanan, aramay─▒ kullanan veya i┼člevi ├ža─č─▒rmak i├žin ge├žerli olan ba┼čka bir i┼člevi sunar.

Application () y├Ântemi, bu de─čere sahip bir i┼člevi ve bir dizi (veya bir dizi benzeri nesne) olarak sa─članan arg├╝manlar─▒ ├ža─č─▒r─▒r.

ve

Call () y├Ântemi, bu de─čer verilen bir i┼člevi ve ayr─▒ ayr─▒ sa─članan arg├╝manlar─▒ ├ža─č─▒r─▒r.

Benim favorim olan bu ┼čekilde, fonksiyonlar─▒m─▒z─▒ kolayca arayabiliriz:

 Person.call(person, "George");
 

veya

 //apply is more useful when params count is not fixed
Person.apply(person, ["George"]);

getName.call(person);   
getName.apply(person);
 

Bu 3 y├Ântem. prototip i┼člevselli─čini bulmak i├žin ├Ânemli ilk ad─▒mlard─▒r.


2- new Anahtar kelime nas─▒l ├žal─▒┼č─▒r?

Bu .prototype i┼člevselli─či anlamak i├žin ikinci ad─▒m. Bu, i┼člemi sim├╝le etmek i├žin kulland─▒─č─▒m ┼čey:

 function Person(name){  this.name = name;  }
my_person_prototype = { getName: function(){ console.log(this.name); } };
 

bu b├Âl├╝m├╝nde ben de kullanmadan JavaScript al─▒r t├╝m ad─▒mlar─▒ atmaya ├žal─▒┼č─▒yor oldu─čum new kelime ve prototype sen kulland─▒─č─▒n─▒zda, new anahtar kelime. yani, yapt─▒─č─▒m─▒zda new Person("George") , Person i┼člev bir yap─▒c─▒ olarak i┼člev g├Âr├╝yor, Bunlar JavaScript'in tek tek yapt─▒─č─▒:

a. her ┼čeyden ├Ânce bo┼č bir nesne, temelde bo┼č bir karma gibi yapar:

 var newObject = {};
 

b. JavaScript'in att─▒─č─▒ bir sonraki ad─▒m , t├╝m prototip nesnelerini yeni olu┼čturulan nesneye eklemek .

biz my_person_prototype burada prototip nesnesine benziyoruz.

 for(var key in my_person_prototype){
    newObject[key] = my_person_prototype[key];
}
 

JavaScript'in asl─▒nda prototipte tan─▒mlanan ├Âzellikleri ekleme ┼čekli de─čildir. Ger├žek yol prototip zinciri kavram─▒ ile ilgilidir.


a. & b. Bu iki ad─▒m yerine tam olarak ayn─▒ sonucu elde edebilirsiniz:

 var newObject = Object.create(my_person_prototype);
//here you can check out the __proto__ attribute
console.log(newObject.__proto__ === my_person_prototype); //true
//and also check if you have access to your desired properties
console.log(typeof newObject.getName);//"function"
 

┼čimdi getName fonksiyonumuzu ┼ču ┼čekilde adland─▒rabiliriz my_person_prototype :

 newObject.getName();
 

c. sonra o nesneyi kurucuya verir,

Bunu bizim ├Ârne─čimizde yapabiliriz:

 Person.call(newObject, "George");
 

veya

 Person.apply(newObject, ["George"]);
 

Daha sonra yap─▒c─▒, ├ž├╝nk├╝ istedi─či her ┼čeyi yapabilir , bu o yap─▒c─▒ i├žinde yeni olu┼čturulan nesnedir.

┼čimdi di─čer ad─▒mlar─▒ sim├╝le etmeden ├Ânce sonu├ž: Object {name: "George"}


├ľzet:

Temel olarak, yeni anahtar kelimeyi bir i┼člev ├╝zerinde kulland─▒─č─▒n─▒zda , onu ├ža─č─▒r─▒yorsunuz ve bu i┼člev bir yap─▒c─▒ olarak i┼člev g├Âr├╝yor.

 new FunctionName()
 

JavaScript dahili olarak bir nesne, bo┼č bir karma olu┼čturur ve daha sonra bu nesneyi yap─▒c─▒ya verir, daha sonra yap─▒c─▒ istedi─či her ┼čeyi yapabilir, ├ž├╝nk├╝ bu yap─▒c─▒n─▒n i├žindeki bu yeni olu┼čturulmu┼č nesnedir ve o zaman size tabii ki o nesneyi verir. return deyimini i┼člevinizde kullanmad─▒ysan─▒z veya return undefined; i┼člev g├Âvdesinin sonuna girdiyseniz .

Dolay─▒s─▒yla, JavaScript bir nesnede ├Âzellik aramaya ba┼člad─▒─č─▒nda, yapt─▒─č─▒ ilk ┼čey, o nesnede g├Âr├╝nmesidir. Ve sonra [[prototype]] genellikle bizim sahip oldu─čumuz gizli bir ├Âzellik var __proto__ ve bu ├Âzellik bir sonraki JavaScript'te g├Âr├╝nen ┼čey. Ve tekrar bakt─▒─č─▒nda __proto__ , bir ba┼čka JavaScript nesnesi oldu─ču s├╝rece, kendine ├Âzg├╝ bir __proto__ ├Âzelli─či vard─▒r, bir sonraki __proto__ bo┼č olan noktaya gelinceye kadar y├╝kselir ve artar . Buradaki nokta, JavaScript'teki __proto__ ├Âzniteli─činin bo┼č oldu─ču tek Object.prototype nesnedir:

 console.log(Object.prototype.__proto__===null);//true
 

Ve miras JavaScript'te b├Âyle i┼čler.


Prototip zinciri

Ba┼čka bir deyi┼čle, bir i┼člev ├╝zerinde bir prototip ├Âzelli─činiz varsa ve bu konuda yeni bir ├ža─čr─▒ yaparsan─▒z, JavaScript ├Âzellikler i├žin yeni olu┼čturulan nesneye bakmay─▒ bitirdikten sonra, i┼člevin i┼člevine bakar .prototype ve bu nesnenin de kendi i├ž prototipimiz. ve bunun gibi.


176







prototype ders yapman─▒za olanak sa─člar. E─čer kullanmazsan─▒z, prototype o zaman statik olur.

─░┼čte k─▒sa bir ├Ârnek.

 var obj = new Object();
obj.test = function() { alert('Hello?'); };
 

Yukar─▒daki durumda, statik i┼člev ├ža─čr─▒s─▒ testine sahipsiniz. Bu i┼čleve yaln─▒zca obj olarak s─▒n─▒f olmay─▒ hayal edebilece─činiz obj.test ile eri┼čilebilir.

a┼ča─č─▒daki koddaki gibi

 function obj()
{
}

obj.prototype.test = function() { alert('Hello?'); };
var obj2 = new obj();
obj2.test();
 

Obj, ┼čimdi ba┼člat─▒labilecek bir s─▒n─▒f haline geldi. Birden fazla obj ├Ârne─či olabilir ve hepsinin test i┼člevi vard─▒r.

Yukar─▒dakiler benim anlay─▒┼č─▒m. Bunu bir topluluk wiki yap─▒yorum, b├Âylece yanl─▒┼č yaparsam insanlar beni d├╝zeltebilir.


74







Prototip yedi Koans

Ciro San derin meditasyondan sonra Fire Fox Da─č─▒'ndan inerken zihni a├ž─▒k ve huzurluydu.

Ancak eli huzursuzdu ve kendi ba┼č─▒na bir f─▒r├ža ald─▒ ve a┼ča─č─▒daki notlar─▒ not ald─▒.


0) ─░ki farkl─▒ ┼čey "prototip" olarak adland─▒r─▒labilir:

  • prototip ├Âzelli─či, oldu─ču gibi obj.prototype

  • prototip dahili ├Âzellik, [[Prototype]] ES5'teki gibi belirtilir .

    ES5 ├╝zerinden al─▒nabilir Object.getPrototypeOf() .

    Firefox, bu __proto__ ├Âzellik ├╝zerinden uzant─▒ olarak eri┼čilebilmesini sa─člar . ES6 ┼čimdi i├žin iste─če ba─čl─▒ baz─▒ gereksinimlerden de bahsediyor __proto__ .


1) Bu kavramlar soruyu cevaplamak i├žin var:

Yapt─▒─č─▒mda obj.property JS nerede arar .property ?

Sezgisel olarak, klasik miras m├╝lk aramay─▒ etkilemelidir.


2)

  • __proto__ nokta . ├Âzelli─či aramas─▒ i├žin oldu─ču gibi kullan─▒l─▒r obj.property .
  • .prototype oldu─ču de─čil , do─črudan, dolayl─▒ olarak da belirler olarak arama i├žin kullan─▒lan __proto__ nesne olu┼čturma s─▒ras─▒nda new .

Arama s─▒ras─▒:

  • obj obj.p = ... veya ile eklenen ├Âzellikler Object.defineProperty(obj, ...)
  • ├Âzellikleri obj.__proto__
  • ├Âzellikleri obj.__proto__.__proto__ vb.
  • Baz─▒ e─čer __proto__ oldu─čunu null , d├Ânmek undefined .

Bu s├Âzde prototip zinciridir .

Ve . ile arama yapmaktan ka├ž─▒nabilirsiniz. obj.hasOwnProperty('key') Object.getOwnPropertyNames(f)


3) Ayarlaman─▒n iki ana yolu vard─▒r obj.__proto__ :

  • new :

     var F = function() {}
    var f = new F()
     

    sonra new ayarlad─▒:

     f.__proto__ === F.prototype
     

    Bu nerede .prototype kullan─▒lan al─▒r.

  • Object.create :

      f = Object.create(proto)
     

    k├╝meleri:

     f.__proto__ === proto
     

4) Kod:

 var F = function(i) { this.i = i }
var f = new F(1)
 

A┼ča─č─▒daki ┼čemaya kar┼č─▒l─▒k gelir (baz─▒ Number ┼čeyler atlanm─▒┼čt─▒r):

 (Function)       (  F  )                                      (f)----->(1)
 |  ^             | | ^                                        |   i    |
 |  |             | | |                                        |        |
 |  |             | | +-------------------------+              |        |
 |  |constructor  | |                           |              |        |
 |  |             | +--------------+            |              |        |
 |  |             |                |            |              |        |
 |  |             |                |            |              |        |
 |[[Prototype]]   |[[Prototype]]   |prototype   |constructor   |[[Prototype]]
 |  |             |                |            |              |        |
 |  |             |                |            |              |        |
 |  |             |                | +----------+              |        |
 |  |             |                | |                         |        |
 |  |             |                | | +-----------------------+        |
 |  |             |                | | |                                |
 v  |             v                v | v                                |
(Function.prototype)              (F.prototype)                         |
 |                                 |                                    |
 |                                 |                                    |
 |[[Prototype]]                    |[[Prototype]]          [[Prototype]]|
 |                                 |                                    |
 |                                 |                                    |
 | +-------------------------------+                                    |
 | |                                                                    |
 v v                                                                    v
(Object.prototype)                                       (Number.prototype)
 | | ^
 | | |
 | | +---------------------------+
 | |                             |
 | +--------------+              |
 |                |              |
 |                |              |
 |[[Prototype]]   |constructor   |prototype
 |                |              |
 |                |              |
 |                | -------------+
 |                | |
 v                v |
(null)           (Object)
 

Bu ┼čemada bir├žok dil ├Ânceden tan─▒mlanm─▒┼č nesne d├╝─č├╝m├╝ g├Âsterilmektedir:

  • null
  • Object
  • Object.prototype
  • Function
  • Function.prototype
  • 1
  • Number.prototype ( (1).__proto__ s├Âzdizimini yerine getirmek i├žin zorunlu parantez i├žinde bulunabilir )

2 kod sat─▒r─▒m─▒z sadece ┼ču yeni nesneleri yaratt─▒:

  • f
  • F
  • F.prototype

i ┼čimdi bir ├Âzellik f ├ž├╝nk├╝ ne zaman:

 var f = new F(1)
 

geri d├Ânecek ve sonra atanacak olan de─čer F ile de─čerlendirilir . this new f


5) .constructor , normal olarak gelen F.prototype ├╝zerinden . arama:

 f.constructor === F
!f.hasOwnProperty('constructor')
Object.getPrototypeOf(f) === F.prototype
F.prototype.hasOwnProperty('constructor')
F.prototype.constructor === f.constructor
 

Yazarken f.constructor , JavaScript . aramay─▒ ┼ču ┼čekilde yapar:

  • f yok .constructor
  • f.__proto__ === F.prototype sahip .constructor === F , ├Âyleyse al

Sonu├ž f.constructor == F sezgisel olarak do─črudur, ├ž├╝nk├╝ klasik OOP dillerinde oldu─ču gibi, ├Ârne─čin alanlar ayarlamak F i├žin kullan─▒l─▒r f .


6) Prototip zincirleri kullan─▒larak klasik kal─▒t─▒m s├Âzdizimi elde edilebilir.

ES6 , daha ├Ânce m├╝mk├╝n olan prototip manip├╝lasyon ├ž─▒lg─▒nl─▒─č─▒ i├žin ├žo─čunlukla s├Âzdizimi ┼čekeri olan class ve extends anahtar kelimelerini ekler .

 class C {
    constructor(i) {
        this.i = i
    }
    inc() {
        return this.i + 1
    }
}

class D extends C {
    constructor(i) {
        super(i)
    }
    inc2() {
        return this.i + 2
    }
}
 
 // Inheritance syntax works as expected.
c = new C(1)
c.inc() === 2
(new D(1)).inc() === 2
(new D(1)).inc2() === 3
 
 // "Classes" are just function objects.
C.constructor === Function
C.__proto__ === Function.prototype
D.constructor === Function
// D is a function "indirectly" through the chain.
D.__proto__ === C
D.__proto__.__proto__ === Function.prototype
 
 // "extends" sets up the prototype chain so that base class
// lookups will work as expected
var d = new D(1)
d.__proto__ === D.prototype
D.prototype.__proto__ === C.prototype
// This is what `d.inc` actually does.
d.__proto__.__proto__.inc === C.prototype.inc
 
 // Class variables
// No ES6 syntax sugar apparently:
// http://stackoverflow.com/questions/22528967/es6-class-variable-alternatives
C.c = 1
C.c === 1
// Because `D.__proto__ === C`.
D.c === 1
// Nothing makes this work.
d.c === undefined
 

├ľnceden tan─▒mlanm─▒┼č t├╝m nesneler olmadan basitle┼čtirilmi┼č diyagram:

 (c)----->(1)
 |   i
 |
 |
 |[[Prototype]]
 |
 |
 v    __proto__
(C)<--------------(D)         (d)
| |                |           |
| |                |           |
| |prototype       |prototype  |[[Prototype]] 
| |                |           |
| |                |           |
| |                | +---------+
| |                | |
| |                | |
| |                v v
|[[Prototype]]    (D.prototype)--------> (inc2 function object)
| |                |             inc2
| |                |
| |                |[[Prototype]]
| |                |
| |                |
| | +--------------+
| | |
| | |
| v v
| (C.prototype)------->(inc function object)
|                inc
v
Function.prototype
 

A┼ča─č─▒dakilerin nas─▒l ├žal─▒┼čt─▒─č─▒n─▒ incelemek i├žin bir dakikan─▒z─▒ ay─▒ral─▒m:

 c = new C(1)
c.inc() === 2
 

─░lk sat─▒r k├╝meleri c.i i├žin 1 oldu─ču gibi ") 4" olarak a├ž─▒klanm─▒┼čt─▒r.

─░kinci sat─▒rda ne zaman:

 c.inc()
 
  • .inc arac─▒l─▒─č─▒yla bulunursa [[Prototype]] zinciri: c -> C -> C.prototype -> inc
  • Javascript'te bir i┼člevi ├ža─č─▒rd─▒─č─▒m─▒zda X.Y() , JavaScript otomatik olarak i┼člev ├ža─čr─▒s─▒n─▒n i├žinde this e┼čit olur ! X Y()

Tam olarak ayn─▒ mant─▒k d.inc ve a├ž─▒klar d.inc2 .

Bu makale https://javascript.info/class#not-just-a-syntax-sugar , class bilmeye de─čer ba┼čka etkilerden bahsetmektedir . Baz─▒lar─▒ class anahtar kelime olmadan elde edilemeyebilir (hangisini TODO kontrol edin):


69







Bu konuyu okuduktan sonra, JavaScript Prototip Zinciri ile kar─▒┼čt─▒r─▒ld─▒─č─▒m─▒ hissediyorum, sonra bu ├žizelgeleri buldum

http://iwiki.readthedocs.org/en/latest/javascript/js_core.html#inheritance


prototip ├Âzelli─či">

Prototip Zincirinden JavaScript Kal─▒t─▒m─▒n─▒ g├Âstermek i├žin a├ž─▒k bir ├žizelgedir

ve

http://www.javascriptbank.com/javascript/article/JavaScript_Classical_Inheritance/

bu bir kod ve birka├ž g├╝zel diyagram i├žeren bir ├Ârnek i├žerir.

prototip zinciri sonu├žta Object.prototype'e geri d├Âner.

prototip zinciri, istedi─činiz zaman, alt s─▒n─▒f─▒n prototipini ebeveyn s─▒n─▒f─▒n─▒n bir nesnesine e┼čit ayarlayarak teknik olarak geni┼čletilebilir.

Umar─▒m JavaScript Prototip Zincirini anlaman─▒z da yararl─▒ olacakt─▒r.


64







Her nesnenin ba┼čka bir nesneye ba─člayan bir i├ž ├Âzelli─či [[Prototip]] vard─▒r:

 object [[Prototype]] -> anotherObject
 

Geleneksel javascript'te, ba─člant─▒l─▒ nesne prototype bir i┼člevin ├Âzelli─čidir:

 object [[Prototype]] -> aFunction.prototype
 

Baz─▒ ortamlar [[Prototip]] 'i ┼ču ┼čekilde g├Âsterir __proto__ :

 anObject.__proto__ === anotherObject
 

Bir nesneyi olu┼čtururken [[Prototip]] ba─člant─▒s─▒n─▒ olu┼čturursunuz.

 // (1) Object.create:
var object = Object.create(anotherObject)
// object.__proto__ = anotherObject

// (2) ES6 object initializer:
var object = { __proto__: anotherObject };
// object.__proto__ = anotherObject

// (3) Traditional JavaScript:
var object = new aFunction;
// object.__proto__ = aFunction.prototype
 

Yani bu ifadeler e┼čde─čerdir:

 var object = Object.create(Object.prototype);
var object = { __proto__: Object.prototype }; // ES6 only
var object = new Object;
 

Bir new a├ž─▒klama link target ( Object.prototype ) 'in kendisini g├Âstermez; Bunun yerine, hedef yap─▒c─▒ ( Object ) taraf─▒ndan ima edilir .

Hat─▒rlamak:

  • Her nesnenin, bazen oldu─ču gibi [[Prototip]] bir ba─člant─▒s─▒ vard─▒r __proto__ .
  • Her i┼člevin bir prototype ├Âzelli─či vard─▒r.
  • ─░le olu┼čturulan nesneler yap─▒c─▒lar─▒n─▒n new ├Âzelliklerine ba─član─▒r prototype .
  • Bir i┼člev hi├žbir zaman yap─▒c─▒ olarak kullan─▒lmazsa, prototype ├Âzelli─či kullan─▒lmaz.
  • Bir yap─▒c─▒ya ihtiyac─▒n─▒z yoksa, bunun yerine Object.create kullan─▒n new .

37


2013-06-18





Javascript, her zamanki gibi mirasa sahip de─čildir, ancak prototip zincirine sahiptir.

prototip zinciri

Bir nesnenin bir ├╝yesi nesnede bulunamazsa, prototip zincirinde arar. Zincir di─čer nesnelerden olu┼čur. Belirli bir ├Ârne─čin prototipine __proto__ de─či┼čkenle eri┼čilebilir . Javascript'teki s─▒n─▒flar ve ├Ârnekler aras─▒nda fark olmad─▒─č─▒ i├žin her nesnenin bir karakteri vard─▒r.

Prototipe bir i┼člev / de─či┼čken eklemenin avantaj─▒, her durumda de─čil, yaln─▒zca bir kez bellekte olmas─▒ gerekti─čidir.

Kal─▒t─▒msall─▒k i├žin de faydal─▒d─▒r, ├ž├╝nk├╝ prototip zinciri bir├žok ba┼čka nesneden olu┼čabilir.


26







Bu makale uzun. Ancak, JavaScript Kal─▒t─▒m─▒n─▒n "prototipik" niteli─čindeki sorgular─▒n─▒n ├žo─čunu temizleyece─činden eminim. Ve dahas─▒. L├╝tfen makalenin tamam─▒n─▒ okuyun.

JavaScript temel olarak iki t├╝r veri t├╝r├╝ne sahiptir

  • Nesnesiz
  • Nesneler

Nesnesiz

A┼ča─č─▒dakiler Nesne d─▒┼č─▒ veri t├╝rleridir.

  • sicim
  • say─▒ (NaN ve Infinity dahil)
  • Boole de─čerleri (do─čru, yanl─▒┼č)
  • Tan─▒ms─▒z

Typeof i┼člecini kulland─▒─č─▒n─▒zda a┼ča─č─▒daki veri t├╝rleri geri d├Âner

Typeof "dize" (ya da de─či┼čken i├žeren dize) === dizgesi '

typeof 5 (veya herhangi bir say─▒sal de─či┼čmez veya say─▒sal de─či┼čmez veya NaN veya Infynity i├žeren bir de─či┼čken ) === 'say─▒'

typeof true (veya false veya true veya false i├žeren bir de─či┼čken ) === 'boolean'

typeof undefined (veya undefined de─či┼čken veya undefined i├žeren bir de─či┼čken ) === 'undefined'

Dize , say─▒ ve boolean veri t├╝rleri olarak hem de temsil edilebilir Nesneler ve Sigara nesneleri onlar─▒n typeof hep === 'nesne' oldu─ču nesneler olarak temsil edilir .her. Nesne veri t├╝rlerini anlad─▒ktan sonra buna geri d├Ânece─čiz.

Nesneler

Nesne veri t├╝rleri ayr─▒ca iki t├╝re ayr─▒labilir

  1. ─░┼člev t├╝r├╝ nesneleri
  2. ─░┼člevsel olmayan nesne t├╝r├╝

Fonksiyon tipi nesneler dize d├Ând├╝r├╝r olanlard─▒r 'fonksiyonunu' ile typeof operat├Âr├╝. T├╝m kullan─▒c─▒ tan─▒ml─▒ i┼člevler ve yeni i┼čle├ž kullanarak yeni nesneler yaratabilen nesnelerde yerle┼čik olan t├╝m JavaScript bu kategoriye girer. ├ľrne─čin

  • Nesne
  • sicim
  • Numara
  • Boole
  • Dizi
  • Yaz─▒l─▒ Diziler
  • RegExp
  • fonksiyon
  • Di─čer i┼čleci kullanarak yeni nesneler olu┼čturabilen yerle┼čik nesneler
  • fonksiyon UserDefinedFunction () {/ * kullan─▒c─▒ tan─▒ml─▒ kod * /}

B├Âylece, typeof (Object) === typeof (String) === typeof (Number) === typeof (Boolean) === typeof (Array) === typeof (RegExp) === typeof (Function) == = typeof (UserDefinedFunction) === 'i┼člev'

T├╝m Function tipi nesneleri asl─▒nda yerle┼čik JavaScript nesne ─░┼člevinin ├Ârnekleridir ( ─░┼člev nesnesi de dahil olmak ├╝zere , yinelemeli olarak tan─▒mlanm─▒┼čt─▒r). Bu nesneler a┼ča─č─▒daki ┼čekilde tan─▒mlanm─▒┼č gibi.

 var Object= new Function ([native code for object Object])
var String= new Function ([native code for object String])
var Number= new Function ([native code for object Number])
var Boolean= new Function ([native code for object Boolean])
var Array= new Function ([native code for object Array])
var RegExp= new Function ([native code for object RegExp])
var Function= new Function ([native code  for object Function])
var UserDefinedFunction= new Function ("user defined code")
 

Belirtildi─či gibi, Function tipi nesneleri ayr─▒ca yeni operat├Âr├╝ kullanarak yeni nesneler olu┼čturabilir . ├ľrne─čin , Object , String , Number , Boolean , Array , RegExp veya UserDefinedFunction t├╝r├╝nde bir nesne kullan─▒larak olu┼čturulabilir.

 var a=new Object() or var a=Object() or var a={} //Create object of type Object
var a=new String() //Create object of type String
var a=new Number() //Create object of type Number
var a=new Boolean() //Create object of type Boolean
var a=new Array() or var a=Array() or var a=[]  //Create object of type Array
var a=new RegExp() or var a=RegExp() //Create object of type RegExp
var a=new UserDefinedFunction() 
 

Bu ┼čekilde olu┼čturulan nesnelerin hepsi ─░┼člevsel olmayan tip nesnelerdir ve typeof === 'object' de─čerini d├Ând├╝r├╝rler . T├╝m bu durumlarda, "a" nesnesi, new operat├Âr├╝n├╝ kullanarak daha fazla nesne olu┼čturamaz. Yani a┼ča─č─▒daki yanl─▒┼č

 var b=new a() //error. a is not typeof==='function'
 

Yerle┼čik Math nesnesi , typeof === 'object' ┼čeklindedir . Bu nedenle, Math t├╝r├╝nde yeni bir nesne, yeni operat├Âr taraf─▒ndan olu┼čturulamaz.

 var b=new Math() //error. Math is not typeof==='function'
 

Ayr─▒ca, Object , Array ve RegExp i┼člevlerinin new operat├Âr├╝n├╝ kullanmadan yeni bir nesne olu┼čturabildi─čine dikkat edin . Ancak budala olanlar yok.

 var a=String() // Create a new Non Object string. returns a typeof==='string' 
var a=Number() // Create a new Non Object Number. returns a typeof==='number'
var a=Boolean() //Create a new Non Object Boolean. returns a typeof==='boolean'
 

Kullan─▒c─▒ tan─▒ml─▒ fonksiyonlar ├Âzel durumdur.

 var a=UserDefinedFunction() //may or may not create an object of type UserDefinedFunction() based on how it is defined.
 

Yana Fonksiyon tipi nesneleri yeni nesneler olu┼čturabilir onlar da denir Yap─▒c─▒lar .

Otomatik olarak tan─▒mland─▒─č─▒nda her Yap─▒c─▒ / ─░┼člev (yerle┼čik veya kullan─▒c─▒ tan─▒ml─▒), varsay─▒lan olarak de─čeri bir nesne olarak ayarlanm─▒┼č olan "prototip" adl─▒ bir ├Âzelli─če sahiptir . Bu nesnenin kendisi, varsay─▒lan olarak Yap─▒c─▒ / ─░┼člev'i referans alan "constructor" adl─▒ bir ├Âzelli─če sahiptir .

├ľrne─čin bir i┼člevi tan─▒mlad─▒─č─▒m─▒zda

 function UserDefinedFunction()
{
}
 

a┼ča─č─▒daki otomatik olarak ger├žekle┼čir

 UserDefinedFunction.prototype={constructor:UserDefinedFunction}
 

Bu "prototip" ├Âzelli─či yaln─▒zca ─░┼člev t├╝r├╝ nesnelerinde (ve asla ─░┼člevsel olmayan t├╝r nesnelerinde ) bulunur.

Bunun nedeni , yeni bir nesne olu┼čturuldu─čunda (yeni i┼čle├ž kullanarak), Yap─▒c─▒ i┼člevinin ge├žerli prototip nesnesinin t├╝m ├Âzelliklerini ve y├Ântemlerini miras almas─▒d─▒r; yani , Olu┼čturucu i┼člevinin ge├žerli prototip nesnesi taraf─▒ndan ba┼čvurulan nesneyi referans alan yeni olu┼čturulan nesnede dahili bir ba┼čvuru olu┼čturulur.

Miras al─▒nan ├Âzellikleri referans almak i├žin nesnede olu┼čturulan bu "i├ž referans" , nesnenin prototipi olarak bilinir (bu, Yap─▒c─▒'n─▒n "prototype" ├Âzelli─či taraf─▒ndan ba┼čvurulan nesneye at─▒fta bulunur ancak ondan farkl─▒d─▒r). Herhangi bir nesne (─░┼člev veya ─░┼člev Olmayan) i├žin, Object.getPrototypeOf () y├Ântemi kullan─▒larak al─▒nabilir . Bu y├Ântemi kullanarak bir nesnenin prototip zincirini izleyebilir.

Ayr─▒ca, olu┼čturulan her nesne ( ─░┼člev t├╝r├╝ veya ─░┼člev Olmayan t├╝r├╝ ), Yap─▒c─▒ i┼člevinin prototip ├Âzelli─či taraf─▒ndan ba┼čvurulan nesneden miras al─▒nan bir "constructor" ├Âzelli─čine sahiptir. Varsay─▒lan olarak, bu "constructor" ├Âzelli─či, onu olu┼čturan Constructor i┼člevine ba┼čvurur ( Constructor ─░┼člevinin varsay─▒lan "prototipi" de─či┼čmediyse).

T├╝m Function type nesneleri i├žin, constructor i┼člevi her zaman bir i┼člevdir Function () {}

For Non Fonksiyon tipi nesneleri (Matematik nesnesi Dahili ├Ârne─čin JavaScript) yap─▒c─▒ i┼člevi onu olu┼čturan fonksiyondur. ─░├žin matematik nesne bunun fonksiyonu nesnesi () {} .

Yukar─▒da a├ž─▒klanan t├╝m kavramlar, destekleyici bir kod olmadan anla┼č─▒lmas─▒ biraz zor olabilir. L├╝tfen kavram─▒ anlamak i├žin a┼ča─č─▒daki kod sat─▒r─▒n─▒ sat─▒r sat─▒r g├Âzden ge├žirin. Daha iyi bir anlay─▒┼ča sahip olmak i├žin onu ├žal─▒┼čt─▒rmay─▒ deneyin.

 function UserDefinedFunction()
{ 

} 

/* creating the above function automatically does the following as mentioned earlier

UserDefinedFunction.prototype={constructor:UserDefinedFunction}

*/


var newObj_1=new UserDefinedFunction()

alert(Object.getPrototypeOf(newObj_1)===UserDefinedFunction.prototype)  //Displays true

alert(newObj_1.constructor) //Displays function UserDefinedFunction

//Create a new property in UserDefinedFunction.prototype object

UserDefinedFunction.prototype.TestProperty="test"

alert(newObj_1.TestProperty) //Displays "test"

alert(Object.getPrototypeOf(newObj_1).TestProperty)// Displays "test"

//Create a new Object

var objA = {
        property1 : "Property1",
        constructor:Array

}


//assign a new object to UserDefinedFunction.prototype
UserDefinedFunction.prototype=objA

alert(Object.getPrototypeOf(newObj_1)===UserDefinedFunction.prototype)  //Displays false. The object referenced by UserDefinedFunction.prototype has changed

//The internal reference does not change
alert(newObj_1.constructor) // This shall still Display function UserDefinedFunction

alert(newObj_1.TestProperty) //This shall still Display "test" 

alert(Object.getPrototypeOf(newObj_1).TestProperty) //This shall still Display "test"


//Create another object of type UserDefinedFunction
var newObj_2= new UserDefinedFunction();

alert(Object.getPrototypeOf(newObj_2)===objA) //Displays true.

alert(newObj_2.constructor) //Displays function Array()

alert(newObj_2.property1) //Displays "Property1"

alert(Object.getPrototypeOf(newObj_2).property1) //Displays "Property1"

//Create a new property in objA
objA.property2="property2"

alert(objA.property2) //Displays "Property2"

alert(UserDefinedFunction.prototype.property2) //Displays "Property2"

alert(newObj_2.property2) // Displays Property2

alert(Object.getPrototypeOf(newObj_2).property2) //Displays  "Property2"
 

Her nesnenin prototip zinciri, nihayetinde Object.prototype (ki kendisi hi├žbir prototip nesnesine sahip de─čildir) i├žin geri d├Âner. Bir nesnenin prototip zincirini izlemek i├žin a┼ča─č─▒daki kod kullan─▒labilir

 var o=Starting object;

do {
    alert(o + "\n" + Object.getOwnPropertyNames(o))

}while(o=Object.getPrototypeOf(o))
 

├çe┼čitli nesneler i├žin prototip zinciri a┼ča─č─▒daki gibi ├žal─▒┼č─▒r.

  • Her Function nesnesi (dahil olan Function nesnesi dahil) -> Function.prototype -> Object.prototype -> null
  • Basit Nesneler (Yeni Nesne Taraf─▒ndan Olu┼čturuldu () veya {} yerle┼čik Math nesnesini de i├žeren {}) -> Object.prototype -> null
  • Yeni veya Object.create -> Bir veya Daha Fazla prototip zinciriyle olu┼čturulan nesne -> Object.prototype -> null

Prototipsiz bir nesne olu┼čturmak i├žin a┼ča─č─▒dakileri kullan─▒n:

 var o=Object.create(null)
alert(Object.getPrototypeOf(o)) //Displays null
 

Yap─▒c─▒'n─▒n prototip ├Âzelli─čini null de─čerine ayarlaman─▒n null prototipli bir nesne olu┼čturabilece─čini d├╝┼č├╝nebilirsiniz. Ancak bu gibi durumlarda, yeni olu┼čturulan nesnenin prototipi Object.prototype olarak ve yap─▒c─▒s─▒ Object i┼člevine ayarlan─▒r. Bu, a┼ča─č─▒daki kodla g├Âsterilmi┼čtir

 function UserDefinedFunction(){}
UserDefinedFunction.prototype=null// Can be set to any non object value (number,string,undefined etc.)

var o=new UserDefinedFunction()
alert(Object.getPrototypeOf(o)==Object.prototype)   //Displays true
alert(o.constructor)    //Displays Function Object
 

Bu makalenin ├Âzeti alt─▒nda

  • ─░ki t├╝r nesne vard─▒r ─░┼člev t├╝rleri ve ─░┼člevsiz t├╝rleri
  • Sadece Function t├╝r├╝ndeki nesneler new operat├Âr├╝n├╝ kullanarak yeni bir nesne olu┼čturabilir . Bu ┼čekilde olu┼čturulan nesneler ─░┼člev D─▒┼č─▒ tip nesnelerdir. Sigara Fonksiyon tipi nesneler ayr─▒ca kullanan bir nesne olu┼čturam─▒yor yeni operat├Âr├╝n├╝ .

  • T├╝m ─░┼člev t├╝r├╝ nesneleri varsay─▒lan olarak "prototip" ├Âzelli─čine sahiptir. Bu "prototip" ├Âzelli─či , varsay─▒lan olarak ─░┼člev t├╝r├╝ nesnesinin kendisine ba┼čvuran "yap─▒c─▒" ├Âzelli─čine sahip bir nesneye ba┼čvurur.

  • T├╝m nesneler ( ─░┼člev t├╝r├╝ ve ─░┼člev Olmayan t├╝r├╝ ), varsay─▒lan olarak onu olu┼čturan ─░┼člev t├╝r├╝ nesnesine / Olu┼čturucuya ba┼čvuran bir "constructor" ├Âzelli─čine sahiptir .

  • Dahili olarak olu┼čturulan her nesne, kendisini olu┼čturan Olu┼čturucu'nun "prototype" ├Âzelli─či taraf─▒ndan ba┼čvurulan nesneye ba┼čvurur . Bu nesne, olu┼čturulan nesnenin prototipi olarak bilinir (bu, ba┼čvuruda bulundu─ču ─░┼člev t├╝r├╝ nesneleri "prototip" ├Âzelli─činden farkl─▒d─▒r). Bu ┼čekilde, olu┼čturulan nesne, Olu┼čturucu'nun "prototip" ├Âzelli─či taraf─▒ndan ba┼čvurulan nesnede tan─▒mlanan y├Ântem ve ├Âzelliklere do─črudan eri┼čebilir (nesne olu┼čturma s─▒ras─▒nda).

  • Bir nesnenin prototipi (ve dolay─▒s─▒yla devral─▒nan ├Âzellik adlar─▒) Object.getPrototypeOf () y├Ântemi kullan─▒larak al─▒nabilir . Asl─▒nda bu y├Ântem, nesnenin t├╝m prototip zincirinde gezinmek i├žin kullan─▒labilir.

  • Her nesnenin prototip zinciri, nihayetinde Object.prototype'ye kadar uzan─▒r (Object.create (null) kullan─▒larak nesne olu┼čturulmazsa, bu durumda nesnenin prototipi yoktur).

  • typeof (new Array ()) === 'nesne' , dilin tasar─▒m─▒na g├Âredir ve Douglas Crockford taraf─▒ndan belirtildi─či gibi bir hata de─čildirhttp://javascript.crockford.com/survey.html

  • Yap─▒c─▒'n─▒n prototip ├Âzelli─čini null (veya tan─▒ms─▒z, say─▒, do─čru, yanl─▒┼č, dize) ayarlamak null prototipli bir nesne olu┼čturmayacakt─▒r. Bu gibi durumlarda, yeni olu┼čturulan nesnenin prototipi Object.prototype olarak ve yap─▒c─▒s─▒ Object i┼člevine ayarlan─▒r.

Bu yard─▒mc─▒ olur umar─▒m.


26







prototypal Kal─▒t─▒m kavram─▒, bir├žok geli┼čtirici i├žin en karma┼č─▒k olanlardan biridir. prototypal inheritance Daha iyi anlamak i├žin sorunun k├Âkenini anlamaya ├žal─▒┼čal─▒m . Bir plain fonksiyonla ba┼člayal─▒m .


g├Âr├╝nt├╝ tan─▒m─▒n─▒ buraya girin

new ├ťzerinde bir operat├Âr kullan─▒rsak Tree function , onu constructor i┼člev olarak adland─▒r─▒r─▒z .


g├Âr├╝nt├╝ tan─▒m─▒n─▒ buraya girin

Her JavaScript fonksiyonun bir vard─▒r prototype . Giri┼č Tree.prototype yapt─▒─č─▒n─▒zda, ...


g├Âr├╝nt├╝ tan─▒m─▒n─▒ buraya girin

Yukar─▒daki console.log() ├ž─▒kt─▒ya bakarsan─▒z, bir constructor ├Âzelli─čini Tree.prototype ve __proto__ ├Âzelli─čini de g├Ârebilirsiniz. __proto__ Temsil prototype Bu o function kapal─▒ dayan─▒r ve bu sadece d├╝z bir yana oldu─ču JavaScript function hi├žbir ile inheritance hen├╝z kurmak, bu at─▒fta Object prototype hangi sadece JavaScript yerle┼čik bir ┼čeydir ...

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype

Bu gibi ┼čeyler var .toString, .toValue, .hasOwnProperty ...

__proto__ mozilla getirildi hangi itiraz ve Object.getPrototypeOf almak i├žin y├Ântem ile de─či┼čtirilir object's prototype .


g├Âr├╝nt├╝ tan─▒m─▒n─▒ buraya girin

 Object.getPrototypeOf(Tree.prototype); // Object {} 
 

Bizim i├žin bir y├Ântem ekleyelim Tree prototype .


g├Âr├╝nt├╝ tan─▒m─▒n─▒ buraya girin

┼×unu de─či┼čtirdik Root ve bir function dal ekledik .


g├Âr├╝nt├╝ tan─▒m─▒n─▒ buraya girin

Bu, bir tane instance olu┼čturdu─čunuzda Tree , onun branch y├Ântemini ├ža─č─▒rabilirsiniz .


g├Âr├╝nt├╝ tan─▒m─▒n─▒ buraya girin

Ayr─▒ca ekleyebiliriz primitives veya objects bizim Prototype .


g├Âr├╝nt├╝ tan─▒m─▒n─▒ buraya girin

En bir ekleyelim child-tree k─▒z─▒m─▒z i├žin Tree .


g├Âr├╝nt├╝ tan─▒m─▒n─▒ buraya girin

Burada Child A─ča├žtan devral─▒r, prototype burada yapt─▒─č─▒m─▒z Object.create() ┼čey, ge├žti─čin ┼čeye dayanarak yeni bir nesne yaratma y├Ântemini kullanmakt─▒r , i┼čte burada Tree.prototype . Bu durumda yapt─▒─č─▒m─▒z ┼čey ├çocuk prototipini prototiple ayn─▒ g├Âr├╝nen yeni bir nesneye ayarlamakt─▒r Tree . Sonra ayarlayaca─č─▒z Child's constructor to Child , e─čer i┼čaret etmezsek Tree() .


g├Âr├╝nt├╝ tan─▒m─▒n─▒ buraya girin

Child art─▒k kendi vard─▒r prototype , onun __proto__ i├žin puan Tree ve Tree's prototype tabana noktalar─▒ Object .

 Child  
|
 \
  \
   Tree.prototype
   - branch
   |
   |
    \
     \
      Object.prototype
      -toString
      -valueOf
      -etc., etc.
 

Art─▒k bir olu┼čturmak instance aras─▒nda Child ve ├ža─čr─▒ branch orijinal kullan─▒labilir Tree . Biz asl─▒nda tan─▒mlamad─▒n─▒z branch ├╝zerinde Child prototype . AMA, Root prototype hangi ├žocu─čun miras ald─▒─č─▒.


g├Âr├╝nt├╝ tan─▒m─▒n─▒ buraya girin

JS'de her ┼čey bir nesne de─čildir, her ┼čey bir nesne gibi davranabilir.

Javascript strings, number, booleans, undefined, null. onlar gibi ilkel vard─▒r object(i.e reference types) , ancak kesinlikle bir gibi davranabilir object . Burada bir ├Ârne─če bakal─▒m.


g├Âr├╝nt├╝ tan─▒m─▒n─▒ buraya girin

Bu listenin ilk sat─▒r─▒nda, primitive isme bir dize de─čeri atanm─▒┼čt─▒r. ─░kinci sat─▒r, isme bir gibi davran─▒r object ve charAt(0) nokta g├Âsterimini kullanarak ├ža─čr─▒lar─▒ yapar .

Bu sahne arkas─▒nda ne olur: // JavaScript motorun yapt─▒─č─▒


g├Âr├╝nt├╝ tan─▒m─▒n─▒ buraya girin

String object ITA ÔéČ Ôäó ler tahrip (bir s├╝re├ž olarak adland─▒r─▒lan ├Ânce sadece bir deyimi i├žin var autoboxing ). Tekrar tekrar bize d├Ânelim prototypal inheritance .

  • Javascript delegation dayal─▒ miras yoluyla destekler prototypes .
  • Her Function birinin prototype ba┼čka bir nesneyi ifade eden bir ├Âzelli─či vard─▒r .
  • properties/functions yoksa object kendisinden veya prototype zincir yoluyla bak─▒l─▒r

prototype JS'deki A , bir yields ba┼čkas─▒n─▒n ebeveyni oldu─čunuz bir nesnedir object . [yani .. delegasyon] Delegation , bir ┼čeyi yapam─▒yorsan─▒z, ba┼čka birisine bunu sizin i├žin yapmas─▒n─▒ s├Âyleyece─činiz anlam─▒na gelir.


g├Âr├╝nt├╝ tan─▒m─▒n─▒ buraya girin

https://jsfiddle.net/say0tzpL/1/

Yukar─▒daki keman─▒n tepesine bakarsan─▒z, k├Âpek toString y├Ânteme eri┼čebilir , ancak i├žinde mevcut de─čildir ancak delegasyona giden prototip zinciri arac─▒l─▒─č─▒yla Object.prototype


g├Âr├╝nt├╝ tan─▒m─▒n─▒ buraya girin

A┼ča─č─▒dakine bakarsan─▒z, her birinde call mevcut olan y├Ânteme eri┼čmeye ├žal─▒┼č─▒yoruz function .


g├Âr├╝nt├╝ tan─▒m─▒n─▒ buraya girin

https://jsfiddle.net/rknffckc/

Yukar─▒daki keman─▒n tepesine bakarsan─▒z, Profile Function se├žene─čine eri┼čebilir call , ancak i├žinde bulunmaz, ancak temsilci prototip zinciri arac─▒l─▒─č─▒yla kullan─▒labilir Function.prototype


g├Âr├╝nt├╝ tan─▒m─▒n─▒ buraya girin

Not: prototype i┼člev yap─▒c─▒s─▒n─▒n bir ├Âzelli─či, i┼člev yap─▒c─▒s─▒n─▒n __proto__ olu┼čturdu─ču nesnelerin bir ├Âzelli─čidir. Her fonksiyon prototype , de─čeri bo┼č olan bir ├Âzellik ile birlikte gelir object . Bir i┼člevin ├Ârne─čini yaratt─▒─č─▒m─▒zda, i├žsel bir ├Âzellik elde ederiz [[Prototype]] veya __proto__ referans─▒ ─░┼člevin prototipidir constructor .


g├Âr├╝nt├╝ tan─▒m─▒n─▒ buraya girin

Yukar─▒daki ┼čema biraz karma┼č─▒k g├Âr├╝n├╝yor, ancak nas─▒l prototype chaining ├žal─▒┼čt─▒─č─▒yla ilgili t├╝m resmi ortaya koyuyor. Bu yava┼č yava┼č y├╝r├╝yelim:

─░ki ├Ârne─čidir b1 ve b2 olan yap─▒c─▒, Bar ve ├╝st Foo ve prototip zincirinden iki y├Ântem vard─▒r identify ve speak ├╝zeri Bar ve Foo


g├Âr├╝nt├╝ tan─▒m─▒n─▒ buraya girin

https://jsfiddle.net/kbp7jr7n/

Yukar─▒daki kodu bakarsak sahip Foo y├Ântemi vard─▒r yap─▒c─▒ identify() ve Bar sahip yap─▒c─▒ speak y├Ântemini. ─░ki Bar ├Ârnek olu┼čturduk b1 ve b2 bunun ana t├╝r├╝ Foo . ┼×imdi speak y├Ântemini ├ža─č─▒r─▒rken Bar , kimin prototype zincirle konu┼čaca─č─▒n─▒ belirleyebiliyoruz .


g├Âr├╝nt├╝ tan─▒m─▒n─▒ buraya girin

Bar ┼×imdi, Foo i├žinde tan─▒mlanm─▒┼č olan t├╝m y├Ântemleri vard─▒r prototype . En anlamakta daha da dalal─▒m Object.prototype ve Function.prototype ve nas─▒l ili┼čkili. E─čer yap─▒c─▒s─▒ yukar─▒ bakacak olursak Foo , Bar ve Object vard─▒r Function constructor .


g├Âr├╝nt├╝ tan─▒m─▒n─▒ buraya girin

prototype Ait Bar oldu─ču Foo , prototype bir Foo IS Object ve yak─▒ndan bakarsan─▒z prototype ait Foo ilgilidir Object.prototype .


g├Âr├╝nt├╝ tan─▒m─▒n─▒ buraya girin

Bunu kapatmadan ├Ânce, yukar─▒daki her ┼čeyi ├Âzetlemek i├žin buraya k├╝├ž├╝k bir kod par├žas─▒ koyal─▒m . Biz kullanan instanceof bir kontrol i├žin buraya operat├Âr├╝ object onun sahip oldu─ču prototype zincirinin prototype bir mal─▒ constructor a┼ča─č─▒da tamam─▒n─▒ b├╝y├╝k diyagram─▒ ├Âzetlemektedir.


g├Âr├╝nt├╝ tan─▒m─▒n─▒ buraya girin

Bu eklentinin baz─▒ bilgileri oldu─čunu umuyorum, bu t├╝r├╝n kavramak i├žin b├╝y├╝k olabilece─čini biliyorum ... basit kelimelerle, sadece nesnelere ba─čl─▒ nesnelerdir !!!!


22







Bu ".prototype" ├Âzelli─činin as─▒l amac─▒ nedir?

Standart s─▒n─▒flara aray├╝z geni┼čletilebilir hale gelir. ├ľrne─čin, Array s─▒n─▒f─▒ kullan─▒yorsunuz ve ayr─▒ca t├╝m dizi nesneleriniz i├žin ├Âzel bir seri hale getirici eklemeniz gerekiyor. Bir alt s─▒n─▒f─▒ kodlamak i├žin zaman harc─▒yor musunuz, yoksa kompozisyon mu kullan─▒yorsunuz? ... Prototip ├Âzelli─či, kullan─▒c─▒lar─▒n bir s─▒n─▒fa uygun ├╝ye / y├Ântem grubunu kontrol etmesine izin vererek bunu ├ž├Âzer.

Prototipleri ekstra vtable-pointer olarak d├╝┼č├╝n├╝n. Baz─▒ ├╝yeler orijinal s─▒n─▒ftan eksik oldu─čunda prototip ├žal─▒┼čma zaman─▒nda aran─▒r.


20







Prototip zincirlerini iki kategoride s─▒n─▒fland─▒rmaya yard─▒mc─▒ olabilir.

Yap─▒c─▒y─▒ d├╝┼č├╝n├╝n:

  function Person() {}
 

De─čeri Object.getPrototypeOf(Person) bir fonksiyondur. Asl─▒nda ├Âyle Function.prototype . Person Bir fonksiyon olarak yarat─▒ld─▒─č─▒ndan beri , t├╝m fonksiyonlar─▒n sahip oldu─ču prototip fonksiyon nesnesini payla┼č─▒r. Ayn─▒ Person.__proto__ , ancak bu ├Âzellik kullan─▒lmamal─▒d─▒r. Her neyse, Object.getPrototypeOf(Person) seninle prototip zinciri denilen merdivenlerden etkili bir ┼čekilde ├ž─▒k.

Yukar─▒ y├Ânde zincir ┼č├Âyle g├Âr├╝n├╝r:

     Person ├ó ÔÇá ' Function.prototype ├ó ÔÇá' Object.prototype (biti┼č noktas─▒)

├ľnemli Bu prototip zinciri nesnelerle ilgisi olmas─▒d─▒r Person edebilirsiniz in┼ča . Bu in┼ča edilen nesnelerin kendi prototip zincirleri vard─▒r ve bu zincirin yukar─▒da belirtilenlerle ortak bir yak─▒n potansiyeli yoktur.

├ľrne─čin bu nesneyi al─▒n:

 var p = new Person();
 

p'nin Person ile do─črudan bir prototip zinciri ili┼čkisi yoktur . ─░li┼čkileri farkl─▒. P nesnesinin kendi prototip zinciri vard─▒r. Kullanarak Object.getPrototypeOf , zinciri a┼ča─č─▒daki gibi bulacaks─▒n─▒z:

     p ├ó ÔÇá ' Person.prototype ├ó ÔÇá' Object.prototype (biti┼č noktas─▒)

Bu zincirde hi├žbir fonksiyon nesnesi yoktur (olmas─▒na ra─čmen).

├ľyle Person g├Âr├╝n├╝yor ki, kendi ya┼čamlar─▒n─▒ ya┼čayan iki t├╝r zincirle ilgili gibi g├Âr├╝n├╝yor. Bir zincirden di─čerine "atlamak" i├žin, ┼čunlar─▒ kullan─▒rs─▒n─▒z:

  1. .prototype : yap─▒c─▒ zincirinden olu┼čturulan nesnenin zincirine atla. Bu ├Âzellik bu nedenle yaln─▒zca i┼člev nesneleri i├žin tan─▒mlan─▒r ( new yaln─▒zca i┼člevlerde kullan─▒labilece─či gibi ).

  2. .constructor : olu┼čturulan nesnenin zincirinden yap─▒c─▒n─▒n zincirine atla.

S├╝tun olarak g├Âsterilen iki prototip zincirinin g├Ârsel bir sunumu:


g├Âr├╝nt├╝ tan─▒m─▒n─▒ buraya girin

├ľzetle:

prototype M├╝lkiyet hi├žbir bilgi veren ki┼činin ancak nesnelerin, prototip zincirinde yaratt─▒─č─▒ konu.

M├╝lkiyet ad─▒n─▒n prototype kar─▒┼č─▒kl─▒─ča yol a├žmas─▒ ┼ča┼č─▒rt─▒c─▒ de─čildir . Bu ├Âzelli─čin ad─▒ belirtilmi┼čse prototypeOfConstructedInstances veya bu sat─▒rda bir ┼čey olsayd─▒ daha a├ž─▒k olurdu .

─░ki prototip zinciri aras─▒nda ileri geri z─▒playabilirsiniz:

 Person.prototype.constructor === Person
 

Bu simetri, a├ž─▒k├ža prototype ├Âzelli─če farkl─▒ bir nesne atayarak k─▒r─▒labilir (daha sonra bununla ilgili daha fazla).

Bir ─░┼člev Olu┼čtur, ─░ki Nesne Al

Person.prototype fonksiyonun Person yarat─▒ld─▒─č─▒ s─▒rada yarat─▒lm─▒┼č bir nesnedir . Person Yap─▒c─▒ olarak var , yap─▒c─▒ hen├╝z uygulamad─▒. B├Âylece ayn─▒ anda iki nesne yarat─▒l─▒r:

  1. ─░┼člevin Person kendisi
  2. ─░┼člev bir yap─▒c─▒ olarak ├ža─čr─▒ld─▒─č─▒nda prototip g├Ârevi yapacak nesne

Her ikisi de nesnedir, ancak farkl─▒ rolleri vard─▒r: i┼člev nesnesi in┼ča ederken, di─čer nesne i┼člevin olu┼čturaca─č─▒ herhangi bir nesnenin prototipini temsil eder. Prototip nesnesi, prototip zincirinde olu┼čturulan nesnenin ebeveyni olacakt─▒r.

Bir fonksiyon ayn─▒ zamanda bir obje oldu─čundan, kendi prototip zincirinde kendi ebeveyni de vard─▒r, fakat bu iki zincirin farkl─▒ ┼čeylerle ilgili oldu─čunu hat─▒rlay─▒n.

─░┼čte konuyu kavramak yard─▒mc─▒ olabilecek baz─▒ e┼čitlikler vard─▒r - bu bask─▒ b├╝t├╝n true :

 function Person() {};

// This is prototype chain info for the constructor (the function object):
console.log(Object.getPrototypeOf(Person) === Function.prototype);
// Step further up in the same hierarchy:
console.log(Object.getPrototypeOf(Function.prototype) === Object.prototype);
console.log(Object.getPrototypeOf(Object.prototype) === null);
console.log(Person.__proto__ === Function.prototype);
// Here we swap lanes, and look at the constructor of the constructor
console.log(Person.constructor === Function);
console.log(Person instanceof Function);

// Person.prototype was created by Person (at the time of its creation)
// Here we swap lanes back and forth:
console.log(Person.prototype.constructor === Person);
// Although it is not an instance of it:
console.log(!(Person.prototype instanceof Person));
// Instances are objects created by the constructor:
var p = new Person();
// Similarly to what was shown for the constructor, here we have
// the same for the object created by the constructor:
console.log(Object.getPrototypeOf(p) === Person.prototype);
console.log(p.__proto__ === Person.prototype);
// Here we swap lanes, and look at the constructor
console.log(p.constructor === Person);
console.log(p instanceof Person); 

Prototip zincirine seviye ekleme

Bir yap─▒c─▒ i┼člevi olu┼čturdu─čunuzda bir prototip nesnesi olu┼čturulmu┼č olmas─▒na ra─čmen, bu nesneyi yok sayabilir ve bu yap─▒c─▒ taraf─▒ndan olu┼čturulan sonraki ├Ârnekler i├žin prototip olarak kullan─▒lmas─▒ gereken ba┼čka bir nesneyi atayabilirsiniz.

├ľrne─čin:

 function Thief() { }
var p = new Person();
Thief.prototype = p; // this determines the prototype for any new Thief objects:
var t = new Thief();
 

┼×imdi prototipi zinciri t uzun daha bir ad─▒m oldu─čunu p :

     t ├ó ÔÇá ' p ├ó ÔÇá' Person.prototype ├ó ÔÇá ' Object.prototype (biti┼č noktas─▒)

Di─čer prototip zinciri art─▒k de─čil: Thief ve Person onlar─▒n prototip zincirinde ayn─▒ ├╝st payla┼čan karde┼čler ┼čunlard─▒r:

     Person }
     Thief   } ├ó ÔÇá ' Function.prototype ├ó ÔÇá' Object.prototype (biti┼č noktas─▒)

Daha ├Ânce sunulan grafik buna geni┼čletilebilir (orijinali Thief.prototype d─▒┼čar─▒da b─▒rak─▒l─▒r):


g├Âr├╝nt├╝ tan─▒m─▒n─▒ buraya girin

Mavi ├žizgiler prototip zincirlerini, di─čer renkli ├žizgiler di─čer ili┼čkileri temsil eder:

  • bir nesne ve yap─▒c─▒s─▒ aras─▒nda
  • yap─▒c─▒ ile nesne olu┼čturmak i├žin kullan─▒lacak prototip nesne aras─▒nda

19







Nesne Y├Ânelimli JavaScript i├žin Kesin Rehber - sorulan sorunun ├žok ├Âzl├╝ ve net ~ 30dk bir video a├ž─▒klamas─▒ (Prototip Kal─▒t─▒m konusu t├╝m videoyu dinlesem de , 5 : 45'te ba┼čl─▒yor ). Bu videonun sahibi ayr─▒ca http://www.objectplayground.com/ adresinde JavaScript nesne g├Ârselle┼čtiricisi web sitesini yapt─▒ .
g├Âr├╝nt├╝ tan─▒m─▒n─▒ buraya girin


g├Âr├╝nt├╝ tan─▒m─▒n─▒ buraya girin


16


2016-02-18





obj_n.prop_X Ba┼čvurulan zaman "prototip zinciri" ├Âzyinelemeli kongre olarak a├ž─▒klamak yararl─▒ buldum :

e─čer obj_n.prop_X yoksa, ├žek obj_n+1.prop_X nereye obj_n+1 = obj_n.[[prototype]]

E─čer prop_X nihayet ard─▒ndan k-inci prototip nesnesine bulunur

obj_1.prop_X = obj_1.[[prototype]].[[prototype]]..(k-times)..[[prototype]].prop_X

Javascript nesnelerinin ili┼čkisinin bir grafi─čini burada ├Âzelliklerine g├Âre bulabilirsiniz:


js nesneleri grafi─či

http://jsobjects.org


14


2013-10-20





Bir yap─▒c─▒ bir nesne olu┼čturdu─čunda, bu nesne, yap─▒c─▒lar─▒n ├Âzelliklerinin ├ž├Âz├╝mlenmesi amac─▒yla yap─▒c─▒n─▒n ÔÇťprototipÔÇŁ ├Âzelli─čini dolayl─▒ olarak referans al─▒r. Yap─▒c─▒n─▒n "prototip" ├Âzelli─či, program ifadesi constructor.prototype taraf─▒ndan referans al─▒nabilir ve bir nesnenin prototipine eklenen ├Âzellikler, prototipi payla┼čan t├╝m nesneler taraf─▒ndan miras yoluyla payla┼č─▒l─▒r.


13


2010-02-05





Prototip anlay─▒┼č─▒m─▒ anlatay─▒m. Buradaki miras─▒ di─čer dillerle kar┼č─▒la┼čt─▒rmayaca─č─▒m. ─░nsanlar─▒n dilleri kar┼č─▒la┼čt─▒rmay─▒ b─▒rakmalar─▒n─▒ ve dili sadece kendileri olarak anlamalar─▒n─▒ diliyorum. Prototipleri ve prototip miras─▒n─▒ anlamak, size a┼ča─č─▒da g├Âsterece─čim gibi ├žok basittir.

Prototip, hangi ├╝r├╝n├╝ yaratt─▒─č─▒n─▒za dayanan bir model gibidir. Anla┼č─▒lmas─▒ gereken ├Ânemli nokta, prototip olarak ba┼čka bir nesneyi kullanarak bir nesne olu┼čturdu─čunuzda, prototip ile ├╝r├╝n aras─▒ndaki ba─člant─▒n─▒n s├╝rekli olmas─▒d─▒r. ├ľrne─čin:

 var model = {x:2};
var product = Object.create(model);
model.y = 5;
product.y
=>5
 

Her nesne, [[prototip]] ad─▒ verilen ve Object.getPrototypeOf() i┼člev taraf─▒ndan eri┼čilebilen bir i├ž ├Âzellik i├žerir . Object.create(model) yeni bir nesne yarat─▒r ve [[prototype]] ├Âzelli─čini nesne modeline ayarlar . Dolay─▒s─▒yla yapt─▒─č─▒n─▒z zaman Object.getPrototypeOf(product) , nesne modelini alacaks─▒n─▒z .

Properties ├╝r├╝n├╝n ┼ču ┼čekilde ele al─▒n─▒r:

  • Bir ├Âzelli─če yaln─▒zca de─čerini okumak i├žin eri┼čildi─činde, kapsam zincirinde aran─▒r. De─či┼čken i├žin arama, ├╝r├╝nden prototipine kadar ba┼člar. Aramada b├Âyle bir de─či┼čken bulunursa, arama burada durdurulur ve de─čer d├Ând├╝r├╝l├╝r. Bu t├╝r bir de─či┼čken kapsam zincirinde bulunamazsa, tan─▒ms─▒z d├Ând├╝r├╝l├╝r.
  • Bir ├Âzellik yaz─▒ld─▒─č─▒nda (de─či┼čtirildi─činde), ├Âzellik her zaman ├╝r├╝n nesnesine yaz─▒l─▒r . E─čer ├╝r├╝n zaten b├Âyle bir ├Âzelli─če sahip de─čildir, bu ├Ârt├╝k olu┼čturulur ve yaz─▒l─▒r.

Prototip ├Âzelli─čini kullanarak nesnelerin b├Âyle bir ba─članmas─▒na prototip miras─▒ denir. ─░┼čte, ├žok basit, kat─▒l─▒yorum?


10







Burada a├ž─▒klanmas─▒ gereken iki ayr─▒ ancak ili┼čkili varl─▒klar var:

  • .prototype Fonksiyonlar─▒n ├Âzelli─či.
  • [[Prototype]] [1] t├╝m nesnelerin ├Âzelli─či [2] .

Bunlar iki farkl─▒ ┼čey.

[[Prototype]] ├Âzelli─či:

Bu, t├╝m [2] nesnelerde bulunan bir ├Âzelliktir .

Burada depolanan, bir nesnenin kendisi [[Prototype]] olarak ba┼čka bir nesneye i┼čaret eden kendine ait olan ba┼čka bir nesnedir. Di─čer nesnenin kendine ait bir [[Prototype]] de─čeri var. Bu hikaye, t├╝m nesnelerde (benzeri .toString ) eri┼čilebilen y├Ântemler sa─člayan prototipik nesneye ula┼čana kadar devam eder .

[[Prototype]] M├╝lkiyet olu┼čturan ┼čeyin par├žas─▒d─▒r [[Prototype]] zinciri. Bu [[Prototype]] nesne zinciri, ├Ârne─čin bir nesnede i┼člemler [[Get]] veya [[Set]] i┼člemler ger├žekle┼čtirildi─činde incelenen ┼čeydir :

 var obj = {}
obj.a         // [[Get]] consults prototype chain
obj.b = 20    // [[Set]] consults prototype chain
 

.prototype ├Âzelli─či:

Bu, yaln─▒zca i┼člevlerde bulunan bir ├Âzelliktir. ├çok basit bir fonksiyon kullanma:

 function Bar(){};
 

.prototype M├╝lkiyet bir nesneyi tutar atanacak b.[[Prototype]] bunu yapt─▒─č─▒nda var b = new Bar . Bunu kolayca inceleyebilirsiniz:

 // Both assign Bar.prototype to b1/b2[[Prototype]]
var b = new Bar;
// Object.getPrototypeOf grabs the objects [[Prototype]]
console.log(Object.getPrototypeOf(b) === Bar.prototype) // true
 

En ├Ânemlilerinden biri .prototype s olmas─▒d─▒r ait Object fonksiyonu . Bu prototip, t├╝m [[Prototype]] zincirlerin i├žerdi─či prototip nesnesini tutar . ├ťzerinde, yeni nesneler i├žin mevcut t├╝m y├Ântemler tan─▒mlanm─▒┼čt─▒r:

 // Get properties that are defined on this object
console.log(Object.getOwnPropertyDescriptors(Object.prototype))
 

┼×imdi, .prototype bir nesne oldu─ču i├žin bir [[Prototype]] ├Âzelli─či var. E─čer herhangi atamalar─▒ yapmazlar zaman Function.prototype , .prototype bireyin [[Prototype]] prototip nesnesine puan ( Object.prototype ). Bu, yeni bir i┼člev olu┼čturdu─čunuzda otomatik olarak ger├žekle┼čtirilir.

Bu ┼čekilde, new Bar; prototip zincirini ne zaman yaparsan─▒z , sizin i├žin ayarlanm─▒┼č, ├╝zerinde Bar.prototype tan─▒mlanm─▒┼č her ┼čeyi ve ├╝zerinde tan─▒mlanm─▒┼č her ┼čeyi al─▒rs─▒n─▒z Object.prototype :

 var b = new Bar;
// Get all Bar.prototype properties
console.log(b.__proto__ === Bar.prototype)
// Get all Object.prototype properties
console.log(b.__proto__.__proto__ === Object.prototype)
 

Yapt─▒─č─▒n─▒z her ┼čey i├žin atama Function.prototype yapt─▒─č─▒n─▒zda, prototip zincirini ba┼čka bir nesneyi i├žerecek ┼čekilde geni┼čletiyorsunuz. Tek ba┼č─▒na ba─čl─▒ bir listedeki bir ekleme gibi.

Bu temelde , fonksiyon taraf─▒ndan olu┼čturulan herhangi bir nesne taraf─▒ndan g├Âr├╝lmek ├╝zere [[Prototype]] atanan nesnede tan─▒mlanan ├Âzelliklere izin veren zinciri de─či┼čtirir Function.prototype .


[1: Bu kimseyi kar─▒┼čt─▒rmaz; arac─▒l─▒─č─▒yla sunulan mal bir├žok uygulamalarda. __proto__
[2]: hari├ž t├╝m├╝ null .


10







JavaScript prototip tabanl─▒ miras─▒n─▒ daha iyi resimlerle a├ž─▒klamak i├žin bir ba┼čka giri┼čim


Basit nesneler miras


9


2015-10-24





A┼ča─č─▒daki keyValueStore nesneyi g├Âz ├Ân├╝nde bulundurun :

 var keyValueStore = (function() {
    var count = 0;
    var kvs = function() {
        count++;
        this.data = {};
        this.get = function(key) { return this.data[key]; };
        this.set = function(key, value) { this.data[key] = value; };
        this.delete = function(key) { delete this.data[key]; };
        this.getLength = function() {
            var l = 0;
            for (p in this.data) l++;
            return l;
        }
    };

    return  { // Singleton public properties
        'create' : function() { return new kvs(); },
        'count' : function() { return count; }
    };
})();
 

Bunu yaparak bu nesnenin yeni bir ├Ârne─čini olu┼čturabilirim:

 kvs = keyValueStore.create();
 

Bu nesnenin her ├Ârne─či a┼ča─č─▒daki genel ├Âzelliklere sahip olacakt─▒r:

  • data
  • get
  • set
  • delete
  • getLength

┼×imdi, bu keyValueStore nesnenin 100 ├Ârne─čini yaratt─▒─č─▒m─▒z─▒ varsayal─▒m . Olsa get , set , delete , getLength Bu 100 ├Ârneklerinin her biri i├žin ayn─▒ ┼čeyi yapaca─č─▒z, her ├Ârnek bu i┼člevin kendi kopyas─▒ vard─▒r.

┼×imdi, sadece tek bir olabilir e─čer hayal get , set , delete ve getLength kopyalama ve her bir ├Ârnek ayn─▒ i┼člevi ba┼čvurmak. Bu performans i├žin daha iyi olur ve daha az haf─▒za gerektirir.

Prototiplerin girdi─či yer. Prototip miras al─▒nan ancak ├Ârnekler taraf─▒ndan kopyalanmayan ├Âzelliklerin ÔÇťplan─▒ÔÇŁ d─▒r. Yani bu, bir nesnenin t├╝m ├Ârnekleri i├žin sadece bir kez bellekte var oldu─ču ve t├╝m bu ├Ârnekler taraf─▒ndan payla┼č─▒ld─▒─č─▒ anlam─▒na gelir.

┼×imdi keyValueStore nesneyi tekrar d├╝┼č├╝n├╝n . B├Âyle yeniden yazabilirim:

 var keyValueStore = (function() {
    var count = 0;
    var kvs = function() {
        count++;
        this.data = {};
    };

    kvs.prototype = {
        'get' : function(key) { return this.data[key]; },
        'set' : function(key, value) { this.data[key] = value; },
        'delete' : function(key) { delete this.data[key]; },
        'getLength' : function() {
            var l = 0;
            for (p in this.data) l++;
            return l;
        }
    };

    return  {
        'create' : function() { return new kvs(); },
        'count' : function() { return count; }
    };
})();
 

Bu, TAMAMEN keyValueStore t├╝m nesnelerin bir prototip i├žine koyulmas─▒ haricinde , nesnenin ├Ânceki s├╝r├╝m├╝yle ayn─▒d─▒r. Bunun anlam─▒, 100 vakan─▒n hepsinin ┼ču anda her birinin kendi kopyas─▒ olan yerine d├Ârt y├Ântemi de payla┼čmas─▒d─▒r.


9







Bu t├╝r ┼čeyleri anlama konusunda daima analojileri severim. Prototipler ├žok daha basit bir paradigma olsa bile, 'prototipik miras' bence s─▒n─▒f bas kal─▒t─▒m─▒na k─▒yasla olduk├ža kafa kar─▒┼čt─▒r─▒c─▒. Asl─▒nda prototiplerde, ger├žekten bir miras yoktur, bu y├╝zden kendi i├žinde yan─▒lt─▒c─▒ olan isim, daha ├žok bir 'delegasyon' t├╝r├╝d├╝r.

Bunu hayal et ....

Lisedesin ve s─▒n─▒ftas─▒n ve bug├╝nk├╝ bir s─▒nav─▒n var ama cevaplar─▒n─▒ doldurmak i├žin kalemin yok. Doh!

Kalemi olan arkada┼č─▒n Finnius'un yan─▒nda oturuyorsun. Siz soruyorsunuz ve masas─▒n─▒n etraf─▒nda ba┼čar─▒s─▒z g├Âz├╝k├╝yor, ancak "Kalemim yok" demek yerine, kalemi varsa di─čer arkada┼č─▒ Derp ile kontrol etti─či ho┼č bir arkada┼č. Ger├žekten de Derp'in yedek bir kalemi var ve s─▒nav─▒ tamamlamak i├žin size teslim eden Finnius'a geri veriyor. Derp, kalemi, kullan─▒m i├žin size atayan Finnius'a emanet etti.

Burada ├Ânemli olan, onunla do─črudan bir ili┼čkiniz olmad─▒─č─▒ i├žin Derp'in size kalemi vermemesidir .

Bu, prototiplerin nas─▒l ├žal─▒┼čt─▒─č─▒, arad─▒─č─▒n─▒z ┼čey i├žin bir veri a─čac─▒n─▒n arand─▒─č─▒ basitle┼čtirilmi┼č bir ├Ârnektir.


7







├ľzet:

  • ─░┼člevler javascript'teki nesnelerdir ve bu nedenle ├Âzelliklere sahip olabilirler.
  • (Yap─▒c─▒) i┼člevleri her zaman bir prototip ├Âzelli─čine sahiptir
  • Bir i┼člev new anahtar kelimeyle bir yap─▒c─▒ olarak kullan─▒ld─▒─č─▒nda , nesne prototip al─▒r. Bu prototip i├žin bir referans __proto__ , yeni olu┼čturulan nesnenin ├Âzelli─činde bulunabilir .
  • Bu __proto__ ├Âzellik prototype , yap─▒c─▒ i┼člevinin ├Âzelli─čini ifade eder .

├ľrnek:

 function Person (name) {
  this.name = name;
}

let me = new Person('willem');

console.log(Person.prototype) // Person has a prototype property

console.log(Person.prototype === me.__proto__) // the __proto__ property of the instance refers to prototype property of the function. 

Bu neden faydal─▒d─▒r:

Javascript 'prototip devralma' denilen Nesneler ├╝zerindeki ├Âzelliklere bakarken bir mekanizmaya sahiptir , i┼čte temelde ne var:

  • ─░lk olarak ├Âzellik Nesnenin kendisinde bulunuyorsa kontrol edilir. E─čer ├Âyleyse bu ├Âzellik iade edilir.
  • E─čer ├Âzellik nesnenin kendisinde bulunmuyorsa 'protochain'e t─▒rmanacak'. Temel olarak proto ├Âzelli─či taraf─▒ndan belirtilen nesneye bakar . ├ľzelli─čin proto taraf─▒ndan belirtilen nesne ├╝zerinde kullan─▒labilir olup olmad─▒─č─▒n─▒ kontrol eder.
  • ├ľzellik proto nesnesinde bulunmuyorsa, nesne zincirine kadar proto zincirine t─▒rmanacakt─▒r .
  • ├ľzelli─či nesne ve prototip zincirinde hi├žbir yerde bulamazsa tan─▒ms─▒z d├Âner.

├ľrne─čin:

 function Person(name) {
  this.name = name;
}

let mySelf = new Person('Willem');

console.log(mySelf.__proto__ === Person.prototype);

console.log(mySelf.__proto__.__proto__ === Object.prototype); 

G├╝ncelle┼čtirme:

__proto__ ├ço─ču modern taray─▒c─▒larda olaca─č─▒n─▒ prototip nesne ba┼čvurusu elde etmek daha iyi bir yol uygulan─▒r ra─čmen m├╝lkiyet, kullan─▒mdan kald─▒r─▒ld─▒:

Object.getPrototypeOf()


5







__proto__ , prototip ve yap─▒c─▒ ili┼čkilerini g├Âsteren ba┼čka bir ┼čema :
g├Âr├╝nt├╝ tan─▒m─▒n─▒ buraya girin


3







Sadece zaten bir nesneyi var Object.new ama yap─▒c─▒ s├Âzdizimini kullan─▒rken hala bir nesneyi yok.


2







Prototip olu┼čturur yeni bir nesne mevcut klonlama yoluyla nesneyi . Bu y├╝zden ger├žekten prototip hakk─▒nda d├╝┼č├╝nd├╝─č├╝m├╝zde , yapmak yerine bir ┼čeyin kopyalanmas─▒n─▒ veya kopyalanmas─▒n─▒ d├╝┼č├╝nebiliriz .


0


2018-12-25





Bir nesnenin prototipi ( Object.getPrototypeOf(obj) kullan─▒mdan kald─▒r─▒lm─▒┼č __proto__ ├Âzellik yoluyla veya bu ├Âzellikten yararlan─▒labilir) ve prototype yap─▒c─▒ i┼člevlerindeki ├Âzellik aras─▒nda bir ayr─▒m oldu─čunu anlamak ├Ânemlidir . ─░lki, her durumda m├╝lkt├╝r ve ikincisi, kurucu ├╝zerindeki m├╝lkt├╝r. Yani, Object.getPrototypeOf(new Foobar()) ayn─▒ nesneyi ifade eder Foobar.prototype .

Referans: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes


0