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

时间:2015-06-09 15:18:07

标签: javascript jquery

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

  

未捕获的TypeError:无法读取属性' theTests'未定义的

$(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,但我没有找到办法。我试图了解它为什么不起作用。

5 个答案:

答案 0 :(得分:2)

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

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

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

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

答案 1 :(得分:0)

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

Example.settings初始化后,

Example将可用。

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

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

此代码的第二行将:

  1. 创建对象
  2. 将对象分配给变量

答案 2 :(得分:0)

在第一个示例中,您尝试在示例完全初始化之前访问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();
});

答案 3 :(得分:0)

尝试:

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();

答案 4 :(得分:-1)

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