創建一個變種對象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);