Question

为了更好的代码结构，我想使用一个包含所有属性的javascript对象，而不是使用多个vars：

// 1. WAY
// This returns an error, as _inp cannot be accessed by input_value
// Uncaught TypeError: Cannot read property 'value' of undefined
var ref = {
_inp: input.target, 
input_value: _inp.value,
....
};

// 2. WAY
// When using this, it works
var ref = {
_inp: input.target, 
input_value: input.target.value,
....
};


// 3. WAY
// This obviously works, too.
var 
    _inp = input.target,
    input_value = _inp.value,

我的问题是，为什么3. Way有效，1.Way不？

Answer 1

在示例1中，_inp将是对象的属性。它不是变量。您只能从对象的引用访问它（并且它不会是对象的属性，直到对象存在，这将在对象文字被评估之后，另请参阅Self-references in object literal declarations）。

Answer 2

因为_inp只会在通过整个input.target语句后填入var ref = { ... };值。这意味着当您尝试使用它时，它还不存在。

Answer 3

第一种方式不起作用，因为你指的是＆＃34; _inp＆＃34;这不是现有的var。并且ref对象没有完全创建（这就是为什么input_value: this._inp.value无法工作的原因）

要创建对象并为其属性赋值，可以使用函数（我保留大部分代码）：

var ref = {
  _inp: input.target, 
  input_value: null,
  init: function()
  {
    this.input_value = this._inp.value;
  }
};
ref.init(); 
console.log(ref.input_value); // will contains the same as input.target.value

但通常，人们使用默认值创建具有所有属性的对象，并将参数传递给其init函数：

var ref = {
  _inp: null, 
  input_value: null,
  init: function(input)
  {
    if (input)
    {
      this._inp        = input.target;
      this.input_value = input.target.value;
    }
  }
};
var input = {target:{value:"foo"}};
ref.init(input);

创建一个var对象与多个var

3 个答案: