JavaScript 创建对象的五种方法及属性访问技巧

为什么需要自定义对象？

虽然 JavaScript 提供了 Date、Array、String 等内置对象，但在处理复杂业务逻辑时，开发者往往需要根据特定需求构建自定义的数据结构。从定义上讲，对象是一组无序属性的集合，每个属性映射到一个值（数据或函数）。简单来说，对象就是键值对（Key-Value）的组合。

常用的五种对象创建方法

第1步：使用对象字面量（推荐）

这是最简单且最常用的创建方式，通过花括号 {} 包裹键值对。适合一次性创建具有独立属性的对象。

// 基本语法
var obj = {
  property_1: value_1,
  "property n": value_n // 包含特殊字符的键需用引号
};

// 示例：创建一个人物对象
var girl = {
  'name': '欣欣',
  'age': 18,
  'height': 175,
  'weight': 45
};

// 也可以先创建空对象，再动态添加属性
girl['height'] = 175;
girl.name = 'Tom';

第2步：使用 new 关键字与构造函数

使用 new Object() 是字面量的等价写法，但代码冗长。通常在实际开发中，我们会结合构造函数使用，以便批量生成相似对象。

// 直接实例化空对象
var obj = new Object(); 

// 结合构造函数模式
function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    console.log(this.name + " : " + this.age);
  };
}

var person1 = new Person('Mary', 5);
person1.sayHello(); // 输出: Mary : 5

第3步：使用 Object.create() 指定原型

Object.create(proto) 允许在创建对象时显式指定其原型链，无需定义构造函数即可实现继承。这常用于创建无原型的纯字典对象（如 Object.create(null)）以避免原型污染。

// 继承自一个普通对象
var parent = { x: 1, y: 2 };
var child = Object.create(parent);
console.log(child.x); // 1

// 创建没有原型的对象（比 {} 更纯净）
var dict = Object.create(null);
dict.key = 'value';

第4步：使用原型扩展构造函数

为了解决构造函数模式中方法重复创建导致内存浪费的问题，可以将方法定义在构造函数的 prototype 上。这样所有实例共享同一个方法引用，提高了效率。

function Person() {
  this.name = "W3cplus"; // 实例属性在每个对象中独立存在
}

// 将方法挂载到原型上，供所有实例共享
Person.prototype.sayHello = function() {
  console.log("hello");
};

Person.prototype.walk = function() {
  console.log("walking...");
};

var p = new Person();
p.sayHello(); // hello

属性访问的技巧与陷阱

访问对象属性主要有两种方式：点语法和中括号语法。两者在功能上等价，但适用场景不同。

var person = { name: 'Alice', 'first-name': 'Bob' };

// 1. 点语法：要求键名必须是合法的标识符
console.log(person.name); // Alice
// person.'first-name'; // SyntaxError! 非法标识符

何时必须使用中括号语法？

1. 动态键名：当属性名存储在变量中时，必须使用方括号。

var key = 'name';
console.log(person[key]); // Alice

2. 非合法标识符：属性名包含连字符、空格或使用保留字时。

console.log(person['first-name']); // Bob

总结

日常开发中，优先使用对象字面量初始化简单数据；需要批量生产对象时，结合构造函数+原型模式以保证性能；需要灵活控制原型链或创建纯哈希表时，使用 Object.create()。属性访问方面，除非涉及动态变量或特殊命名，否则建议统一使用点语法以保持代码整洁。

以上就是 JavaScript 创建对象及属性访问的详细内容，更多关于 JavaScript 对象编程的资料请关注本站其它相关文章！