创建一个变种对象VS多个变种

Question

为了更好的代码结构，我想用一个JavaScript对象持有的所有属性，而不是使用多个瓦尔：

// 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路工程和1 。不会吗？

Answer 1

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

Answer 2

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

Answer 3

第一种方式不起作用，因为您引用的“_inp”不是现有的变量。和裁判对象没有完全建立（这就是为什么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 

，但通常情况下，人们创造与默认值的所有属性的对象，并传递一个参数传递给他们的初始化函数：

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