Question

执行以下代码时出现此错误：

未捕获的TypeError：无法读取属性＆＃39; theTests＆＃39;未定义的

$(document).ready(function() {

  var Example = {};

  Example = {
    settings: {
      theTests: $('.test'),
      firstTest: Example.settings.theTests[0]
    }
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>

但如果我这样做：

$(document).ready(function() {
  var Example = {};

  Example = {
    settings: {
      theTests: $('.test'),
      firstTest: $('.test')[0]
    },
    test: function() {
      var theTests = $('.test'),
        firstTest = theTests[0]
    }
  }

  Example.test();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>

在设置或功能中定义它们，它们都以这种方式工作。

所以我的问题是：

为什么根据firstTest内的theTests属性定义settings属性不起作用？

编辑：

像重复建议一样，我检查了这个question，但我没有找到办法。我试图了解它为什么不起作用。

Answer 1

我同意 - 它不完全是重复的，因为你问为什么 - 而不是如何。

错误中提供了您无法执行此操作的原因 - 您指定的对象尚未定义。虽然您已为Example分配了一个空对象，但您会立即尝试将其设置为其他内容。请注意，这将首先从最里面的项目进行评估，即它将执行：

将Example设为以下结果：
- 创建一个包含以下内容的对象：
  - settings属性，其结果为：
    - 创建一个具有两个属性的对象：
      - theTests：设置为$(.test)
      - firstTest：设置为Example.settings.theTests[0]

在最后一行中，请注意我们尚未分配settings对象（我们仍在定义将分配给settings的对象的属性），因此，当该行运行时，它未定义。

Answer 2

您正在尝试访问未在该特定时间内定义的变量属性。

在Example.settings初始化后，

Example将可用。

var Example = {};
var theTests = $('.test');

Example = {
  settings: {
    theTests: theTests,
    firstTest: theTests[0]
  }
}

此代码的第二行将：

创建对象
将对象分配给变量

Answer 3

在第一个示例中，您尝试在示例完全初始化之前访问Example的属性。

你可以沿着这些方向做点什么

$(document).ready(function() {
  var tests = $('.test');
  var Example =  {
    settings: {
      theTests: tests,
      firstTest: tests[0]
    },
    test: function() {
      var theTests = $('.test'),
        firstTest = theTests[0]
    }
  }

  Example.test();
});

Answer 4

尝试：

var Example = new function(){
    this.settings = {theTests:  $('.test')};
    this.settings.firstTest = this.settings.theTests[0];

    this.test = function(){
        console.log(this.settings.theTests);
        console.log(this.settings.firstTest)
    };
};

Example.test();

Answer 5

 var Example = {};

  Example = {
    settings: {
      theTests: $('.test'),
      firstTest: Example.settings.theTests[0] //theTests does not exist
    }
  }




 Example = {
    settings: {
      theTests: $('.test'),
      firstTest: $('.test')[0]
    },
    test: function() {
      var theTests = $('.test'), // theTests has been defined
        firstTest = theTests[0]  // and used here
    }
  }

根据其他属性定义对象属性值

编辑：

5 个答案: