ES5 Object.create 및 객체 리터럴 구문을 사용하여 생성자를 에뮬레이트하는 방법

Question

다음과 같은 객체가 있다고 가정합니다.

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

문제 : 해당 src로 해당 스프라이트를 초기화하고 싶습니다. 그러나, 다음과 같은 생성 기술을 사용할 때 :

var f = Object.create(Foo); 

xtx37 sprite.src = 'cool.png';

내 생성자 메서드 (일명 init 함수)가 없습니다. 내 질문 :

개체를 사용하고있는 경우 리터럴 테크닉, Object.create(), 실제로 내 내부 상태 (예 : new Image()의 예)를 초기화 할 때

내 솔루션 :

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

그러나 위대한 패턴인지는 모르겠다. . 방법이 있다면 나는 이것을 "JavaScript Way"라고하고 싶습니다. :)

고마워!

Answer 1

짧은 긴 이야기를 잘라 : 시도하지 말라 내가이 link에서 가정 수 있듯이

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

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

Answer 2

단순히 이런 짓을 했을까 :

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

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

Answer 3

당신이 그런 짓을해야합니다. Object.create의 기본 개념은 생성자 함수를 피하는 것입니다. 이 좋은 오래된 패턴을 사용하는 것이 더 낫다 :

이

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? 
}; 

그런 new Foo 대신 Object.create 사용합니다.

Answer 4

나는 위에서 작성한 것과 매우 비슷한 할,하지만 난 모듈 패턴과 결합 : 외부에서

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; 
})(); 

,이 Vehicle.create() 및 Vehicle.prototype 제공합니다. 내가 파생 유형을 만들려면 다음, 나는이 작업을 수행 할 수 있습니다

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; 

})(); 

이 패턴은 내 생성자 매개 변수를 사용하는 경우 가 실패입니다 Car.prototype = new Vehicle()의 오류를하지 않고 유형을 도출 할 수 있습니다.

Answer 5

나는이 문서가 아주 멋지게 그것을 요약 한 생각 :

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