【问题标题】:Javascript object property not in scopeJavascript 对象属性不在范围内
【发布时间】:2012-02-22 08:02:14
【问题描述】:

我似乎对对象的属性范围有疑问。我想将每个Message 对象的titlemessage 属性输出到select 元素,但它不工作!我做错了什么

<html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    function Message(title, message) {
        this.title=title;
        this.message=message;
        this.getTitle = function(){
            return this.title;
        };
        this.getMessage = function(){
            return this.message;
        };
    }
    var messages = new Array(
        new Message("First Title", "This is the first message"),
        new Message("Second Title", "This is another message")
    );
    function updateSelect () {
        $("#cannedMessages_button").empty();
        for (c in messages) {
            // First try, with getters and setters
            $("#cannedMessages_button").append($('<option>', { value : c.getMessage() , text : c.getTitle() }));
            // Second try, directly
            $("#cannedMessages_button").append($('<option>', { value : c.message , text : c.title }));
        }
    }
    updateSelect();
});
</script>
</head><body>
<form><select id="cannedMessages_button"></select></form>
</body></html>

我可以验证 foreach 实际上正在运行两次迭代,但我无法从对象中获取值。

【问题讨论】:

  • 您正在使用for...in 对您不应该执行的数组进行迭代,但这不是问题所在。 c 不是数组的元素,而是当前的属性名(索引)。见MDN documentation
  • 你应该看看looping in jQuery

标签: javascript jquery oop encapsulation


【解决方案1】:

不要使用for (c in messages)。

in 用于迭代对象的属性,而不是用于迭代数组中的值。

使用久经考验的真实

for(var i = 0; i < messages.length; i++) {
...
}

此外,您没有将 getTitlegetMessage 方法放在原型上,这有点浪费。

【讨论】:

  • 谢谢!将方法放在原型上有什么好处?语法(在对象块之外)看起来以后会让我感到困惑(来自C家族背景,其中类方法在类代码块内声明)。
  • dotancohen 这个问题在 SO 上很受欢迎。见stackoverflow.com/questions/4650513/…stackoverflow.com/questions/8874115/…
  • 谢谢。我看到比在罗马时,我最好习惯像罗马人那样做(在其中一个链接上解释评论者)。
【解决方案2】:

js中for in循环的语法是:

for(var key in obj)
    {
        var currentElement = obj[key];
    }

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2017-09-30
    • 2015-06-20
    • 2018-12-06
    • 1970-01-01
    • 1970-01-01
    • 2016-10-29
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多