non-prototype | var rectangle = function(width, height, bgColor, x, y) {
var width = width;
var height = height;
var bgColor = bgColor;
var x = x;
var y = y;
this.setWidth = function(newWidth) {
width = newWidth;
}
this.getWidth = function() {
return width;
}
this.setHeight = function(newHeight) {
height = newHeight;
}
this.getHeight = function() {
return height;
}
this.setBgColor = function(newBgColor) {
bgColor = bgColor;
}
this.getBgColor = function() {
return bgColor;
}
this.setX = function(newX) {
x = newX;
}
this.getX = function() {
return x;
}
this.setY = function(newY) {
y = newY;
}
this.getY = function() {
return y;
}
this.draw = function(canvas) {
canvas.fillStyle = bgColor;
canvas.fillRect(x, y, width, height);
}
}
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var objectStore = [];
for (y = 0; y < 100; y++) {
for (x = 0; x < 100; x++) {
objectStore[y, x] = new rectangle(1, 1, '#000', x, y);
objectStore[y, x].draw(context);
}
}
| ready |
prototype | var rectangle = (function() {
var width;
var height;
var bgColor;
var x;
var y;
function rectangle(width, height, bgColor, x, y) {
this.__width = width;
this.__height = height;
this.__bgColor = bgColor;
this.__x = x;
this.__y = y;
}
rectangle.prototype.setWidth = function(newWidth) {
this.__width = newWidth;
}
rectangle.prototype.getWidth = function() {
return this.__width;
}
rectangle.prototype.setHeight = function(newHeight) {
this.__height = newWidth;
}
rectangle.prototype.getHeight = function() {
return this.__height;
}
rectangle.prototype.setbgColor = function(newBgColor) {
this.__bgColor = newBgColor;
}
rectangle.prototype.getBgColor = function() {
return this.__bgColor;
}
rectangle.prototype.setX = function(newX) {
this.__x = newX;
}
rectangle.prototype.getX = function() {
return this.__x;
}
rectangle.prototype.setY = function(newY) {
this.__y = newY;
}
rectangle.prototype.getY = function() {
return this.__y;
}
rectangle.prototype.draw = function(canvas) {
canvas.fillStyle = this.getBgColor();
canvas.fillRect(this.getX(), this.getY(), this.getWidth(), this.getHeight());
}
return rectangle;
})();
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var objectStore = [];
for (y = 0; y < 100; y++) {
for (x = 0; x < 100; x++) {
objectStore[y, x] = new rectangle(1, 1, '#000', x, y);
objectStore[y, x].draw(context);
}
}
| ready |