Nesne başvurusu ve devralmaya devam ederken prototip javascript'i düzenleyin

Question

JavaScript prototipini ve devralmayı kullanarak büyük bir uygulama geliştirdim. Ancak kodumu düzenlerken zor bir zaman geçiriyorum.

Carousel.prototype.next = function() {...} 
Carousel.prototype.prev = function() {..} 
Carousel.prototype.bindControls = function() {..} 

böyle kodumu düzenlemek isteyen

:

Carousel.prototype.controls = { 
    next: function() { ... } , 
    prev: function() { ... }, 
    bindControls: function() { .. } 
} 

Ama bu "bu" olmanın değerini neden olacaktır Örneğin böyle birçok işlevi olan bir sınıf atlı karıncam kayıp.

: Sınıf başka dosyada örneğin devralınan zaman ana sınıfı

BigCarousel.prototype.next = function() {...} 

geçersiz kılmak için böyle bir şey benim miras böyle yapılır sahip bir küresel örneği kullanarak ona takip edebilirsiniz fakat bu sorunlara neden olur

Function.prototype.inheritsFrom = function (parentClass) { 
    if (parentClass.constructor === Function) { 
     //Normal Inheritance 
     this.prototype    = $.extend(this.prototype , new parentClass); 
     this.prototype.constructor = this; 
     this.prototype.parent  = parentClass.prototype; 
    } 
    else { 
     //Pure Virtual Inheritance 
     this.prototype = $.extend(this.prototype, parentClass); 
     this.prototype.constructor = this; 
     this.prototype.parent = parentClass; 
    } 
    return this; 
}; 

Yani yapabilirsiniz:

BigCarousel.inheritsFrom(Carousel) 

kimse "Bu" değer geçici bir çözüm biliyor mu?

Answer 1

Bunu kendi bir sınıf Controls yapabiliriz: Bu olsa Controls uygulanmasını geçersiz kılmak için izin vermez

var Controls = function (controllable_object) { 
    this.ref = controllable_object; 
}; 
Controls.prototype.next = function() { 
    this.ref.foo(); 
} 
// .. 

var Carousel = function() { 
    this.controls = new Controls(this); 
}; 
// .. 

.

var Controls = function (controllable_object) { 
    this.ref = controllable_object; 
}; 
Controls.prototype.next = function() { 
    this.ref.foo(); 
} 
// .. 

var Carousel = function() { 
     this.controllers = []; 
    }; 
Carousel.prototype.addController = function (controller) { 
     this.controllers.push(controller); 
    }; 
// .. 

var carousel = new Carousel(); 
carousel.addController(new Controls(carousel)); 

Answer 2

Benim miras böyle yapılır:

$.extend(this.prototype , new parentClass); 

Ah fazla bağımlılık enjeksiyon ile böyle bir şey olsun istiyorum. Bu kalıtım (new BigCarousel instanceof Carousel ile) değil, yalnızca kopyalama özellikleridir. Belki bu sizin için yeterlidir, ama sonra mixin olarak adlandırmalısınız. Ayrıca, avoid using new for inheritance'u da kullanmalısınız.

---

Ama bu "bu" kayıp olma değerini neden olacaktır. Bu konuda nasıl çalışabilirim?

O (sürece açıkça bunu her zaman ayarlamak istemiyorum gibi) iç içe özelliklere sahip üst nesnesine this noktası olması imkansızdır.

• Boşver ve (controlNext, controlBind, ...)

• kendi controls nesnesi bantlarının olduğu her verin öneki sayesinde yöntemlerinizi düzenlemek: Sadece iki seçenek var. Kalıtım için, örneğin CarouselControls örneklerini yapın. Bu özellikle eğer bu kontroller atlı karıncadan tamamen bağımsızsa ve her yere bağlı oldukları atlı karıncaya erişmeye ihtiyaç duymuyorsa iyi uyuyor.Ayrıca

  this.controls = new CarouselControls(this); 
  

  farklı karuselleri kontrolleri özelleştirmek için, siz de CarouselControls alt sınıf gerekebilir - yoksa: Eğer böyle değilse, yine örneğin onların yapıcı içine ana atlıkarınca bir başvuru iletebilirsiniz BigCarousel sizi

  Carousel.call(this); // make this a carousel 
  this.controls.activate({big: true, fast: false}); // or something 
  

Answer 3

sen Fonksiyon .bind yöntemi kullanabilirsiniz, böylece genel olarak farklı karuselleri için hizmet etmek için Controls nesneyi hazırlamak.

Javascript işlevlerinde Object'ten devralınır, böylece kendi yöntemleri vardır. Bu yöntemlerden biri .bind edilir: Ayrıca

https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind

yanlış miras yapıyorsun, çiğ Javascript ile doğru yoludur: O zaman sadece yapıcı yapabilirsiniz

ChildClass= function() { 
    ParentClass.apply(this, arguments); //calling parent constructor 
    //constructor 
}; 

ChildClass.prototype= new ParentClass(); 

:

Courossel= function() { 
    ParentClass.apply(this, arguments); //calling parent constructor 
    this.controls.next.bind(this); 
    this.controls.prev.bind(this); 
    this.controls.bindControls.bind(this); 
} 

Ancak Frits önerisinin daha iyi olduğunu, kontrolleri kendi sınıfında yaptıklarını ve bunu geçerek Carousel yapıcısı üzerinde gerçekleştirdiklerini söylemeliyim. Carousel örneğinize (bu anahtar kelime) başvurunuz. Sadece ".ref" demeyin, kafa karıştırıcı.