Javascript 当我从另一个对象调用它时，对象是未定义的

我得到了错误

未捕获的TypeError:无法读取未定义的属性“render”

当我调用函数

listView.render（）

谢谢你的帮助

var model =  {
    // the array with cats names
    cats: ['mew', 'meo', 'meaw', 'memaw', 'mesaw', 'metaw'],
    // The array of cats objects
    Cats: []
    }


var oct = {
    // selecting the list on the left of the container
    catsList: function () {
         return document.querySelector('#catsList');
    },
    //selecting the cat display div
    catsDisplay: function () {
         return document.querySelector('#catsDisplay');
    },
     // creating the Cat object and push it to the Cats array
    addCat: (function (arr) {
         for (var i = 0; i < arr.length; i++) {
            model.Cats.push((function (n) {
                return {
                name: n,
                photo: n + '.jpg',
                score: 0
                };
             }(arr[i])));
     listView.render(model.Cats[i]);
         };
    }(model.cats))
}

var listView = {
    render: function (CatObj) {
         oct.CatList.innerHTML = "<div id='"+CatObj.addCat.name+"'>ss</div>"
    }
}

var模型={
//包含猫名的数组
猫：['mew'，'meo'，'meaw'，'memaw'，'mesaw'，'metaw']，
//猫的对象数组
猫：[]
}
var oct={
//选择容器左侧的列表
catsList:函数（）{
return document.querySelector（“#catsList”）；
},
//选择cat显示div
catsDisplay:函数（）{
返回文档。查询选择器（“#catsDisplay”）；
},
//创建Cat对象并将其推送到Cats阵列
addCat：（功能（arr）{
对于（变量i=0；i

正在提升列表视图

，并设置为

未定义

。所以这里

---

listView.render（model.Cats[i]），
列表视图
是
未定义的
在声明之前不能使用列表视图。请尝试以下方法：

var model =  {
    // the array with cats names
    cats: ['mew', 'meo', 'meaw', 'memaw', 'mesaw', 'metaw'],
    // The array of cats objects
    Cats: []
    }


var listView = {
    render: function (CatObj) {
         //oct.CatList.innerHTML = "<div id='"+CatObj.addCat.name+"'>ss</div>"
    }
}


var oct = {
    // selecting the list on the left of the container
    catsList: function () {
         return document.querySelector('#catsList');
    },
    //selecting the cat display div
    catsDisplay: function () {
         return document.querySelector('#catsDisplay');
    },
     // creating the Cat object and push it to the Cats array
    addCat: (function (arr) {
         for (var i = 0; i < arr.length; i++) {
            model.Cats.push((function (n) {
                return {
                name: n,
                photo: n + '.jpg',
                score: 0
                };
             }(arr[i])));
     listView.render(model.Cats[i]);
         };
    }(model.cats))
}

    var listView = {
    render: function (CatObj) {
         oct.CatList.innerHTML = "<div id='"+CatObj.addCat.name+"'>ss</div>"
    }
}

var模型={
//包含猫名的数组
猫：['mew'，'meo'，'meaw'，'memaw'，'mesaw'，'metaw']，
//猫的对象数组
猫：[]
}
变量列表视图={
渲染：函数（CatObj）{
//oct.CatList.innerHTML=“ss”
}
}
var oct={
//选择容器左侧的列表
catsList:函数（）{
return document.querySelector（“#catsList”）；
},
//选择cat显示div
catsDisplay:函数（）{
返回文档。查询选择器（“#catsDisplay”）；
},
//创建Cat对象并将其推送到Cats阵列
addCat：（功能（arr）{
对于（变量i=0；i
当您将函数声明为变量时，它们是在它们的位置创建的，因此在本例中，您在调用listView后声明了它

如果希望listView在任何位置都可用，请将其更改为常规函数，如

function listView() {

}

As功能将在运行期间提升到顶部
 在
oct
对象中似乎没有名为
CatList
的属性。您也没有调用该函数。尝试用调用函数的
oct.catsList
替换
oct.CatList
。还将
Cats
更改为
\u Cats
，将iLife替换为返回可调用的函数


var模型={
//包含猫名的数组
猫：['mew'，'meo'，'meaw'，'memaw'，'mesaw'，'metaw']，
//猫的对象数组
_猫：[]
}
var oct={
//选择容器左侧的列表
catsList:function（）{
return document.querySelector（“#catsList”）；
},
//选择cat显示div
catsDisplay:函数（）{
返回文档。查询选择器（“#catsDisplay”）；
},
//创建Cat对象并将其推送到Cats阵列
addCat：（功能（arr）{
返回函数（）{
对于（变量i=0；i


按照这个概念，
oct
现在不是没有定义吗？
addCat
代码被包装在一个iLife中，因此立即执行。这是一个非常糟糕的设计，非常出乎意料，这也是为什么
listView
在这一点上没有定义的原因。您至少应该有类似于
oct.init（）
的东西来启动。您的整个代码实际上非常糟糕（无意冒犯），到处都是紧密耦合和隐藏的依赖关系。例如，为什么listView不封装它自己的列表DOM元素。。。你不必从那里进入华侨城。没错，但真正的问题是生活。