JavaScript面向对象：访问对象属性的两种常用方式解析

结果或目标

能够准确使用点号和方括号两种语法读取JavaScript对象的属性值，理解其背后的机制差异，并在实际开发中根据属性名的稳定性做出正确选择。

准备条件

2. 具备基础的HTML页面结构与JavaScript执行环境。
3. 了解JavaScript对象的基本创建方式（如构造函数或字面量）。
4. 掌握基本的DOM写入方法用于验证输出结果。

真实操作顺序

第1步：创建测试对象并赋值

目的：建立包含特定属性的测试实例，为后续访问做准备。

操作：定义一个构造函数 Person，通过 new 关键字创建实例 p1，并为其实例添加一个名为 name 的属性。

function Person(){}
var p1 = new Person();
p1.name = "王美人";

第2步：使用点号操作符（.）访问属性

目的：使用最直观的标准语法读取静态定义的属性。

入口：直接作用于对象实例。

动作：在对象变量后紧跟点号和属性名。这种方式要求属性名必须是有效的标识符，且在编码时已知。

document.writeln(p1.name + "<br />");

完成状态：浏览器控制台或页面输出 “王美人”。该方式代码简洁，读性好，是日常开发中最常用的形式。

第3步：使用方括号操作符（[]）访问属性

目的：展示如何通过字符串形式的键名访问属性，支持动态键名。

入口：在对象变量后跟随方括号，内部填入表示属性名的字符串。

动作：将属性名作为字符串参数传入方括号内。

document.writeln(p1['name']);

完成状态：页面同样输出 “王美人”。方括号语法的关键优势在于其灵活性：它允许属性名由变量计算得出，或包含非标识符字符（如带空格、连字符的键名），尽管本例中两者结果一致，但语义机制不同。

完成判断

当通过上述两种方式调用 document.writeln 后，若页面均能正确渲染预期文本（即“王美人”），则证明属性访问成功。此外，检查控制台无报错信息也是判断依据之一。

原文有依据的排错

注意点号 vs 方括号的限制：
部分初学者容易混淆两者。记住：点号后面必须跟合法的标识符名称；若属性名存储在变量中（例如 var key = 'name';），或者属性名包含特殊字符，则必须使用方括号 p1[key] 而非 p1.key。

简要总结

JavaScript提供了 obj.prop 和 obj["prop"] 两种访问路径。前者简洁固定，适合大多数常规场景；后者灵活动态，适用于运行时确定键名的情况。理解并灵活运用这两种模式，是编写健壮前端JS代码的重要一环。

以上就是JavaScript访问对象属性的两种方式的详细内容，更多关于JavaScript面向对象编程的资料请关注本站其它相关文章！