Question

假设我有5个按钮。当客户端按下其中一个时，JS会将this对象发送到一个函数，该函数通过访问let {s} this.state变量来更改按钮的状态。我遇到的问题是我不知道如何在JS中创建这些单独的变量，因此每个按钮都会有其他按钮不使用的单个变量。我可以使用CSS并更改某种CSS属性来完成这项工作，例如CSS属性不对页面中的元素执行任何操作，但可以包含不同的属性，例如0到2之间的数字，它们代表状态。但这看起来不太好看，因为那不是CSS的用途:)我想知道这个网站上是否有人知道创建这些个体变量的方法？我是JS的新手，我知道我需要阅读它，但现在我正在努力解决这个问题，无法在搜索引擎上找到解决方案。感谢所有愿意帮助的人！

Answer 1

页面上的每个按钮都是对象类型“HTMLButtonElement”的实例。这意味着您可以像对待任何其他对象一样对待它。

假设您只有var me = {};而不是按钮。你可以很容易地写出 me.state = true;它将在对象上创建属性。

现在假设您有两个对象var btn1 = {}, btn2 = {};。设置btn1.state = true;。即使它们是相同对象类型的实例（在这种情况下，通用的“对象”类型），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);

Javascript中对象的各个属性

2 个答案: