Javascript中對象的各個屬性

Question

假設我有5個按鈕。 當客戶端按下其中一個時，JS this對象發送到一個函數，該函數通過訪問this.state變量來更改按鈕的狀態。 我遇到的問題是，我不知道如何在JS中創建這些單獨的變量，因此每個按鈕都將具有其單獨的變量，而其他按鈕則不會使用該變量。 我可以使用CSS並更改某種CSS屬性來完成這項工作，例如，對頁面中的元素不做任何事情的CSS屬性，但是可以包含不同的屬性，例如從0到2的數字，它們代表狀態。 但這看起來不太好，因為那不是CSS的目的：)我想知道這個網站上是否有人知道創建這些單獨變量的方法？ 我對JS很陌生，我知道我需要閱讀有關它的信息，但是現在我正為這個問題而苦苦掙扎，無法在搜索引擎上找到解決方案。 感謝所有將要提供幫助的人！

Answer 1

頁面上的每個按鈕都是對象類型“ HTMLButtonElement”的實例。 這意味着您可以像對待其他對象一樣對待它。

假設您有一個var me = {};而不是一個按鈕var me = {}; 。 你可以很容易地寫
me.state = true; 它將在對象上創建屬性。

現在假設您有兩個對象， var btn1 = {}, btn2 = {}; 。 設置btn1.state = true; 。 即使它們是相同對象類型的實例（在本例中為通用“ Object”類型）， btn2.state也不受影響。

另外，訪問不存在的屬性會返回特殊值undefined 。 當在松散比較中使用時，此值被認為是false （即，僅if( btn2.state)或
btn2.state == false ）。 這意味着如果您沒有事先明確定義它就沒有關系，因為它的行為就像一個false值。

要考慮的另一件事是，即使兩個變量可能包含相同對象類型的不同實例（例如上面的btn1和btn2 ），它們也不相等，因為它們是不同的實例。 考慮以下：

var btn1 = {}, btn2 = {};
alert(btn1 == btn2); // false
var btn1copy = btn1;
alert(btn1 == btn1copy); // true, both variables point to the same instance

在上面的代碼中，“ btn1copy”實際上不是一個適當的名稱。 它不是實例的副本，而是引用的副本。 這意味着，因為我們已將btn1和btn1copy顯式設置為相等，所以對其中一個的更改將影響另一個。 注意：

var btn1 = {}, btn2 = {}, btn1copy = btn1;
btn1copy.state = true;
alert(btn1.state); // true
alert(btn2.state); // undefined

我希望這可以幫助您更多地了解JavaScript對象。 如果我只是讓您更加困惑，那我很抱歉！ 如果可以再幫助您，請告訴我。

Answer 2

您可以在元素上設置任何屬性，如下所示：

var currentEl = document.getElementById('myButton');
currentEl.state = 0;
currentEl.favouriteColour = "purple";
currentEl.thing = "hello"

var currentEl = document.getElementBytagName('input')[0];
currentEl.state = 0;
currentEl.favouriteColour = "purple";
currentEl.thing = "hello"

編輯：

或者您可以創建一個對象，然后將其作為屬性添加到元素中：

var settings = {
    'id': 'myId',
    'colour': 'red',
    'thing': 'something
};

然后：

var currentEl = document.getElementBytagName('input')[0];
currentEl.settings = settings;

那么您可以像這樣訪問它們：

alert(currentEl.settings.colour);