使用Javascript时如何更新保留值的值？

Question

It might be a very basic question, but I'm so new to Javascript, I don't even know which keyword I should search about to find this. If this question has already been asked, I'm so sorry and please let me know which question it is.

I have read that getter and setter can't be declared at prototype, so I tried to test what happens if I declare getter and setter in prototype. But I faced another problem.

This is a simple code that declares a constructor to make object 'Rectangle', it includes getter and setter.

But when I run this code, I get '35' as a result of running getArea(), although I changed the value of width to 10 by using setWidth(); I checked the value of width on console but it says your width is changed to 10.

So I guess this is something about closure, getArea() loads width and height when it is declared and it has not been updated as the value I set.

1) How can I update value in getArea() when I change the value of height and width by setter? (How can I calculate area by using functions with updated value? Of course I still want to encapsulate it. So width and height would not be this.width and this.height)

2) If my gut feeling about closure is wrong, why getArea() keeps spitting 35 on my face?

3) What I wanted to try first, why can't I declare getter and setter in prototype?

function Rectangle(w, h) {
var width = w;
var height = h;

this.getWidth = function() {
    return w;
};
this.getHeight = function() {
    return h;
};
this.setWidth = function(w) {
    if (w < 0) {
        throw 'width cannot be under 0';
    } else {
        console.log('width = w');
        width = w;
        console.log('I put : ' + w);
        console.log('width = ' + width);
    }
};

this.setHeight = function(h) {
    if (h < 0) {
        throw 'height cannot be under 0';
    } else {
        console.log('height = h');
        height = h;
    }
};
}
Rectangle.prototype.getArea = function() {
    return this.getWidth() * this.getHeight();
};

var rectangle = new Rectangle(5, 7);
rectangle.setWidth(10);

alert('AREA : ' + rectangle.getArea());

Answer 1

You have to return 'Width' instead of 'w'. Here I have altered you code check this,

       this.getWidth = function () {
            return width;
        };
        this.getHeight = function () {
            return height;
        };

  function Rectangle(w, h) { var width = w; var height = h; this.getWidth = function () { return width; }; this.getHeight = function () { return height; }; this.setWidth = function (w) { if (w < 0) { throw 'width cannot be under 0'; } else { console.log('width = w'); width = w; console.log('I put : ' + w); console.log('width = ' + width); } }; this.setHeight = function (h) { if (h < 0) { throw 'height cannot be under 0'; } else { console.log('height = h'); height = h; } }; } Rectangle.prototype.getArea = function () { return this.getWidth() * this.getHeight(); }; var rectangle = new Rectangle(5, 7); rectangle.setWidth(10); alert('AREA : ' + rectangle.getArea()); 

Answer 2

Your getters are returning the w and h you've passed in, instead of the local closure's width and height variables. You then set this width and height in your setters, but the original w and h remain their initial values and are returned as such in your getters.

Try updating your two getter functions to return your width and height if you want them to return the updated values you use in your setters:

this.getWidth = function() {
  return width;
};
this.getHeight = function() {
  return height ;
};