今天学到了什么#

• 表单的默认特性
• 对象属性名的注意点
• 浏览器默认提交行为

表单的默认特性#

这是一个非常好的问题！你能这样写并成功获取数据，是因为利用了 DOM 表单元素（HTMLFormElement）的一个特性。

简单来说：this 指向表单，而表单会自动把带有 name 属性的输入框挂载为自己的属性。

详细解释如下：

1. this 指向谁？ 在 info.addEventListener('submit', function (e) { ... }) 中，你使用了普通函数（而不是箭头函数）作为回调。在这种情况下，函数内部的 this 指向触发事件的元素，也就是你的 <form class="info"> 元素本身。

2. 表单的神奇特性 HTML 标准规定，<form> 元素会自动通过 name 属性来收集它内部的表单控件。 因为你在 HTML 中写了：

   1
   <input type="text" class="uname" name="uname" />
   

   不管是浏览器还是 DOM 都会自动在 form 对象上创建一个名为 uname 的属性，直接指向这个 input 元素。

   所以：

   • this = 你的 <form> 标签
   • this.uname = 你的 <input name="uname"> 标签
   • this.uname.value = 该输入框里的值

总结： 这种写法是完全合法的，而且如果不使用 document.querySelector 单独获取每个 input，这种写法反而更简洁、更方便！前提是你的 input 标签必须有 name 属性。

对象属性名的注意点#

如果你的属性名（键名）不是固定的，而是存储在一个变量里的，那你必须把它用 [] 中括号 包起来。

这叫 “计算属性名” (Computed Property Names)。

1
let subject = 'math'; // 变量里存着 'math'
2
let score = 99;
3

4
let obj = {
5
    subject: score  // ❌ 错误
6
};
7

8
console.log(obj);
9
// 输出: { subject: 99 }
10
// 变成了属性名就在叫 "subject"，而不是我们想要的 "math"

1
let subject = 'math';
2
let score = 99;
3

4
let obj = {
5
    [subject]: score  // ✅ 正确！告诉 JS：去把 subject 变量里的值取出来当名字
6
};
7

8
console.log(obj);
9
// 输出: { math: 99 }
10
// 成功！属性名变成了变量里存的 'math'

1
uname: uname

浏览器默认提交行为#

没关系，我们可以用一个非常直观的对比来理解。

你可以把“表单提交的默认行为”想象成寄信。