ES5 Object.create ve object literal sözdizimi ile bir kurucu nasıl taklit edilir?

Question

Bunun gibi bir nesneye sahip olduğumu varsayın:

var Foo = { 
    x: 5, 
    sprite: new Image() 
} 

Sorun: Bu sprite'ı doğru src ile başlatmak istiyorum. Ancak, aşağıdaki oluşturma tekniğini kullandığımda:

var f = Object.create(Foo); 

sprite.src = 'cool.png';

kurulum için bir kurucu yöntem (aka init işlevi) yok Benim sorum:

Nesneyi kullanıyorum literal tekniği ve Object.create(), aslında ne zaman dahili durumumun bir kısmını (new Image() örneğindeki gibi)

başlatır Benim çözümüm:

var Foo = { 
    create: function() { 
    var f = Object.create(Foo); 
    f.sprite.src = 'cool.png'; 
    return f; 
    } 
} 

Ancak, bu harika bir model olup olmadığını bilmiyorum . Bir yolu varsa bunu "JavaScript Yolu" yapmak istiyorum. :)

Teşekkürler!

Answer 1

Uzun lafın kısası: kalkmayın bu link den varsayabiliriz gibi

function Image(src) { 
    this.src = src; 
} 

function Foo() { 
    this.x = 5; 
    this.sprite = new Image('cool.png'); 
} 

Answer 2

Ben sadece bu yapardı:

function ImgInstance(src){ 
    var img=new Image(); 
    img.src=src; 
    return img; 
} 

Object.create(Foo, {sprite: {value: ImgInstance("url")}}); 

Answer 3

Eğer böyle bir şey yapmak gerekir. Object.create'in temel fikri yapıcı işlevlerden kaçınmaktır. Bu iyi eski model kullanarak daha iyi olur:

var Foo = function (url) { 
    //this.sprite.src = url; // This will overwrite the prototype's src 
    this.sprite = new Image(); 
    this.sprite.src = url; 
}; 
Foo.prototype = { 
    x: 5, 
    sprite: new Image() // do you really want this? 
}; 

Sonra new Foo yerine Object.create kullanın.

Answer 4

Ben yukarıda yazdım ne çok benzer bir şey yapmak ama modül desenle birleştirmek: Dışarıdan

var Vehicle = (function(){ 
     var exports = {}; 
     exports.prototype = {}; 
     exports.prototype.init = function() { 
       this.mph = 5; 
     }; 
     exports.prototype.go = function() { 
       console.log("Going " + this.mph.toString() + " mph."); 
     }; 

     exports.create = function() { 
       var ret = Object.create(exports.prototype); 
       ret.init(); 
       return ret; 
     }; 

     return exports; 
})(); 

, bu Vehicle.create() ve Vehicle.prototype ortaya çıkarır. Bir Türetilmiş türü yapmak istiyorsanız Sonra, ben bunu yapabilirsiniz:

var Car = (function() { 
     var exports = {}; 
     exports.prototype = Object.create(Vehicle.prototype); 
     exports.prototype.init = function() { 
       Vehicle.prototype.init.apply(this, arguments); 
       this.wheels = 4; 
     }; 

     exports.create = function() { 
       var ret = Object.create(exports.prototype); 
       ret.init(); 
       return ret; 
     }; 

     return exports; 

})(); 

Bu desen bana kurucular parametreleri alırsak başarısız olduğunu Car.prototype = new Vehicle() hatasını, yapmadan türlerini türetmek sağlar.

Answer 5

Bu makale oldukça güzel özetliyor düşünüyorum:

http://www.bennadel.com/blog/2184-Object-create-Improves-Constructor-Based-Inheritance-In-Javascript-It-Doesn-t-Replace-It.htm