2013-04-08 38 views
1

我想製作一個小形狀輔助對象來幫助我在html 5畫布上繪製形狀。到目前爲止,我已經;javascript中的形狀類?

var Shape = function (config) { 

    this.initialize(config); 
}; 

var proto = Shape.prototype; 

proto.initialize = function (config) { 

    this.x = config.x || 0; 
    this.y = config.y || 0; 
    this.width = config.width || 0; 
    this.height = config.height || 0; 
    this.color = config.color || false; 
}; 

/* 
    Circle 
*/ 

var Circle = function (config) { 

    this.initialize(config); 
}; 

proto = Circle.prototype; 

proto = new Shape(); 

但它似乎並沒有工作!當我打電話來創建一個像這樣的新圈子;

var s1 = new Circle({x: 10, y: 10, width: 10, height: 10, color: "red"}); 

如何創建一個基類Shape,這將有助於建立其他形狀,並分配形狀應具有一些共同的特性,例如,CircleRect ECT?

我努力學習JavaScript,所以如果代碼是遙遠請解釋原因,我怎麼能更好的IT,

感謝。

回答

3

proto = new Shape();

此分配proto變量來引用新Shape實例。
它不影響Circle.prototype,該變量曾發生過之前的情況。


請注意,您正在運行的Shape()構造函數初始化該圓的原型,這可能不是一個好主意。
相反,你可以寫

Circle.prototype = Object.create(Shape.prototype); 

此代碼將創建一個新的對象,它繼承了Shape.prototype,不運行它的構造。

+0

有什麼用'一個Circle.prototype =新形狀()'可能存在的問題?我經常看到這種代碼,主要是在沒有實現ES5的瀏覽器時。 – 2013-04-08 00:26:01

+0

將原型存儲在變量中不是一個好主意嗎? – user2251919 2013-04-08 00:27:18

+1

@ user2251919對象通過引用傳遞。您正在存儲對'proto'變量中的'Circle.prototype'對象的引用。將一個新對象指定給'proto'不會影響'Circle.prototype',而是隻爲'proto'變量指定一個新的引用。 SLaks在答案的第一部分解釋它。 – 2013-04-08 00:30:02

0

改變這一行:

proto = Circle.prototype; 

proto = new Shape(); 

有:

Circle.prototype = new Shape();