使用 Javascript 时如何更新保持关闭状态的值？

Posted 2023-03-15

【中文标题】使用 Javascript 时如何更新保持关闭状态的值？

【英文标题】：How do I update the value remains in closure when using Javascript?

【发布时间】：2017-07-28 14:04:20

【问题描述】：

这可能是一个非常基本的问题，但我对 javascript 还很陌生，我什至不知道应该搜索哪个关键字才能找到它。如果这个问题已经被问过，我很抱歉，请让我知道它是哪个问题。

我已经读过 getter 和 setter 不能在原型中声明，所以我尝试测试如果我在原型中声明 getter 和 setter 会发生什么。但我遇到了另一个问题。

这是一个简单的代码，它声明了一个构造函数以使对象成为“矩形”，它包括 getter 和 setter。

但是当我运行这段代码时，运行 getArea() 会得到“35”，尽管我使用 setWidth() 将宽度的值更改为 10；我检查了控制台上的宽度值，但它说您的宽度已更改为 10。

所以我猜这是关于闭包的事情，getArea() 在声明时加载宽度和高度，并且它没有更新为我设置的值。

1) 当我通过 setter 更改高度和宽度的值时，如何更新 getArea() 中的值？ （如何使用更新值的函数计算面积？当然我还是想封装它。所以宽度和高度不会是this.width和this.height）

2) 如果我对关闭的直觉是错误的，为什么 getArea() 总是在我脸上吐出 35？

3）我想先尝试什么，为什么我不能在原型中声明getter和setter？

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

【参考方案1】：

您必须返回 'Width' 而不是 'w'。在这里我已经改变了你的代码检查这个，

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

【参考方案2】：

您的 getter 将返回您传入的 w 和 h，而不是本地闭包的 width 和 height 变量。然后，您在 setter 中设置 width 和 height，但原来的 w 和 h 保持其初始值，并在您的 getter 中按原样返回。

如果您希望它们返回您在 setter 中使用的更新值，请尝试更新您的两个 getter 函数以返回您的 width 和 height：

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

【讨论】：

...！我应该让我的 Javascript 书的作者知道他的书印错了。更改吸气剂后，一切正常。谢谢！

@HyeonWoo 很高兴为您提供帮助。如果这能解决您的问题，请不要忘记标记为已回答！

抱歉，我在哪里可以找到标记为已回答的按钮？我是新来的

@HyeonWoo 欢迎您！每个答案响应的侧面都有赞成/反对箭头按钮，其当前的数字分数介于两者之间。当这是您的问题时，同一区域也会有一个复选标记。这就是您要单击以标记您的问题已回答以及响应的内容。您可以对系统中的任何答案投赞成票或反对票，但只能在您自己的问题上打勾。