当我从另一个对象调用对象时，对象未定义答案

【问题标题】：Object is undefined when I call it from another object当我从另一个对象调用对象时，对象未定义
【发布时间】：2016-06-10 03:50:07
【问题描述】：

我得到了错误

未捕获的类型错误：无法读取未定义的属性“渲染”

当我调用函数listView.render()时它在第29行

感谢您的帮助

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>"
    }
}

【问题讨论】：

addCat 代码包装在 IIFE 中，因此会立即执行。这是一个非常糟糕的设计，非常出乎意料，也是为什么 listView 在那时未定义的原因。你至少应该有像oct.init() 这样的东西来启动事情。您的整个代码实际上是非常糟糕的 IMO（无意冒犯），到处都有紧密的耦合和隐藏的依赖关系。例如，为什么 listView 不封装它自己的列表 DOM 元素......你不必从那里进入 oct。

标签： javascript arrays oop javascript-objects

【解决方案1】：

oct 对象上似乎没有名为 CatList 的属性。您也没有调用该函数。尝试用 oct.catsList 替换 oct.CatList ，调用函数。还将 Cats 更改为 _Cats ，将 IIFE 替换为返回一个可以调用的函数

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) {
    return function() {
      for (var i = 0; i < arr.length; i++) {
        model._Cats.push({
          name: i,
          photo: i + '.jpg',
          score: 0
        });
        listView.render(model._Cats[i]);
      };
    }
  }(model.cats))
}

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

oct.addCat()

<div id="catsList">

</div>

<div id="catsDisplay">

</div>

jsfiddle https://jsfiddle.net/8u60bcsv/1/

【讨论】：

【解决方案2】：

在声明它之前不能使用 listView。试试这个：

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>"
    }
}

【讨论】：

按照这个概念，oct 现在不是未定义了吗？

【解决方案3】：

当你将函数声明为变量时，它们是在它们的位置创建的，所以在这种情况下，你在调用它之后声明了 listView

如果您希望 listView 无论在哪里都可用，请将其更改为常规功能，例如

function listView() {

}

因为函数将在运行时被提升到顶部。

【讨论】：

【解决方案4】：

listView 正在被提升并设置为undefined。所以在这里 listView.render(model.Cats[i]); , listView 是 undefined

【讨论】：

没错，但真正的问题是 IIFE。