TypeError：对象未定义

Question

在下面的代码中：

var FilledObjectArray = function() {
    this.filledObject = {};
};

FilledObjectArray.prototype = {
        fill: function() {
            this.filledObject["one"] = 1;
        }
};

var SomeClass = function() {
    this.something = new FilledObjectArray();
};

SomeClass.prototype = {
    showContents: function() {
        this.something.fill();
        for (key in this.something) {
            $("#some-div").append(this.something[key]);
        }
    }   
};

$(document).ready(function() {

    var s = new SomeClass();

    $(".bla").each(function() {
        $(this).click(function() {
            s.showContents();
        });
    });

});

我在Firebug控制台中收到此错误：

TypeError: this.filledObject is undefined
this.filledObject["one"] = 1;

我在这里做错了什么？ 根据我的理解，对象被正确初始化并且值分配是正确的。 我在Firefox 18.0.2版本和Chrome 25中测试了这个。

Answer 1

我认为这应该可以解决你的问题

this.something.fill.call(this.something);

Answer 2

我在现有代码中发现了这个问题，并创建了一个建议的解决方案，但是我并不完全清楚你的意图所以它可能与你的需求有点不同，请根据需要进行修改。

问题

主要问题源于FilledObjectArray对象。 这个对象的原型，被分配的功能fill ，然后分配属性one int类型与1的值。所以请记住这个对象有两个属性，一个函数int值。

所以当你执行这段代码时......

for (key in this.something) {
    $("#some-div").append(this.something[key]);  //Item 1
}

循环的两次迭代发生，一次用于函数fill ，一次用于属性one 。 问题发生在fill键的迭代上，因为this.something[key]被传递给append() ，它接受函数，导致jQuery触发函数。 发生这种情况时，在fill函数的执行上下文中， this其分配给#some-div ，它没有filledObject属性，从而导致抛出TypeError。 我在下面评论了一些内容：

var FilledObjectArray = function() {
    this.filledObject = {}; //Fill is an object
};

FilledObjectArray.prototype = {
        fill: function() {
            this.filledObject["one"] = 1;
        }
};

var SomeClass = function() {
    this.something = new FilledObjectArray();
};

SomeClass.prototype = {
    showContents: function() {
        this.something.fill();
        for (key in this.something) {
            $("#some-div").append(this.something[key]);  //The fill function is called here
        }
    }   
};

$(document).ready(function() {

    var s = new SomeClass();

    $(".bla").each(function() {
        $(this).click(function() {
            s.showContents();
        });
    });

});

提出的解决方案

var FilledObjectArray = function() {
    this.filledObject = [];
};

FilledObjectArray.prototype.fill = function(){
            console.log(this);
            this.filledObject[0] = 1;
};

var SomeClass = function() {
    this.something = new FilledObjectArray();
};

SomeClass.prototype = {
    showContents: function() {
        this.something.fill();
        for (var x = 0; x < this.something.filledObject.length; x++){
            $("#some-div").append(this.something.filledObject[x]);
        }
    }   
};

$(document).ready(function() {


    var s = new SomeClass();
    $(".bla").each(function() {

        $(this).click(function() {
            s.showContents();
        });
    });
});

Answer 3

我想你在找这个：

for (key in this.something) {
  if(this.something.hasOwnProperty(key)){
    $("#some-div").append(JSON.stringify(this.something[key]));
  }
}

jsbin

您需要使用hasOwnProperty迭代对象的属性而不执行继承属性。

Answer 4

我现在觉得有点蠢，但这是解决方案：

SomeClass.prototype = {
    showContents: function() {
        this.something.fill();
        for (key in this.something.filledObject) {
            if (this.something.filledObject.hasOwnProperty(key)) {
                $("#some-div").append(this.something.filledObject[key]);                
            }
        }
    }   
};

我试图访问对象本身（this.something）而不是对象属性（this.something.filledObject）