JavaScript 对象字面量与构造函数：构建高效对象的两种方式

Hi，我是布兰妮甜 ！在JavaScript中，对象是核心的数据结构之一，用于组织和操作数据。创建对象有两种主要的方式：对象字面量（Object Literal）和 构造函数（Constructor Function）。每种方式都有其特点和适用场景。本文将深入探讨这两种创建对象的方法，帮助开发者根据具体需求选择最合适的方案，并详细介绍它们的工作原理、优势和局限性。

文章目录

- 一、对象字面量
- 二、构造函数
- 三、最佳实践
- 四、总结

一、对象字面量

1. 定义与基本用法

对象字面量是一种简单而直观的方式来创建对象。它使用花括号{}包围键值对，其中每个键是一个字符串或标识符，每个值可以是任意类型的表达式。

javascript">const person = {name: 'Alice',age: 25,greet: function() {console.log(`Hello, my name is ${this.name}.`);}
};

优点：

简洁明了：语法简单，易于阅读和编写。
快速创建单个对象：适合创建一次性使用的对象实例。

缺点：

重复代码：如果需要创建多个具有相同属性和方法的对象，则会导致大量重复代码。
原型链不共享：每个对象都有自己的一份属性和方法副本，无法共享原型上的方法，这可能影响性能。

2. 增强对象字面量（ES6+）

随着ECMAScript标准的发展，对象字面量得到了许多增强特性，如计算属性名、简化的函数定义等。

javascript">const key = 'name';
const value = 'Bob';const user = {[key]: value, // 计算属性名sayHi() {     // 简化的方法定义console.log('Hi!');},get fullName() {return `${this.firstName} ${this.lastName}`;},set fullName(name) {[this.firstName, this.lastName] = name.split(' ');}
};

方法定义简化

从ES6开始，对象字面量中的方法定义变得更加简洁，不再需要显式地写function关键字。

javascript">const obj = {method() {console.log('This is a method.');}
};
obj.method(); // 输出: This is a method.

计算属性名

允许使用方括号[]来动态设置属性名，这对于基于变量或其他表达式的属性名非常有用。

javascript">const propName = 'dynamicProperty';
const dynamicObj = {[propName]: 'Value of dynamic property'
};
console.log(dynamicObj.dynamicProperty); // 输出: Value of dynamic property

Getter 和 Setter

可以通过get和set关键字为对象添加getter和setter，以控制属性的读取和赋值行为。

javascript">const person = {firstName: 'John',lastName: 'Doe',get fullName() {return `${this.firstName} ${this.lastName}`;},set fullName(name) {[this.firstName, this.lastName] = name.split(' ');}
};console.log(person.fullName); // 输出: John Doe
person.fullName = 'Jane Smith';
console.log(person.firstName, person.lastName); // 输出: Jane Smith

属性简写

当属性名与其对应的变量名相同时，可以直接使用变量名作为属性值。

javascript">const name = 'Charlie';
const age = 30;
const person = { name, age };
console.log(person); // 输出: { name: 'Charlie', age: 30 }

方法绑定 this

默认情况下，对象字面量中的方法不会自动绑定this到对象本身。要确保this正确指向当前对象，可以使用箭头函数或显式绑定。

javascript">const obj = {value: 42,getValue: () => this.value, // `this` 指向全局对象，不是 objgetValueBound: function() {return this.value; // `this` 正确指向 obj}.bind(obj)
};console.log(obj.getValue()); // 输出: undefined (在严格模式下)
console.log(obj.getValueBound()); // 输出: 42

二、构造函数

1. 定义与基本用法

构造函数是一种特殊类型的函数，用来创建和初始化新对象实例。通过new关键字调用构造函数时，会自动创建一个新的空对象，并将其绑定到this上下文，然后执行构造函数体内的代码。

javascript">function Person(name, age) {this.name = name;this.age = age;this.greet = function() {console.log(`Hello, my name is ${this.name}.`);};
}const alice = new Person('Alice', 25);
alice.greet(); // 输出: Hello, my name is Alice.

优点：

代码复用：可以轻松创建多个具有相同结构的对象。
原型继承：所有实例共享原型上的方法，节省内存空间。

缺点：

冗长：相比对象字面量，语法稍微复杂一些。
忘记使用new：如果不小心忘记了new关键字，可能会导致意外的行为，因为此时this指向全局对象（浏览器环境中为window）。

2. 构造函数与原型链

构造函数的一个重要特性是它们可以通过原型链实现继承。每个构造函数都有一个名为prototype的属性，该属性指向一个对象，这个对象的所有属性和方法都可以被构造函数的实例所共享。

javascript">function Animal(name) {this.name = name;
}Animal.prototype.makeSound = function() {console.log(`${this.name} makes a sound.`);
};function Dog(name, breed) {Animal.call(this, name); // 调用父类构造函数this.breed = breed;
}// 继承自Animal
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;Dog.prototype.bark = function() {console.log(`${this.name} barks!`);
};const myDog = new Dog('Buddy', 'Golden Retriever');
myDog.makeSound(); // 输出: Buddy makes a sound.
myDog.bark();      // 输出: Buddy barks!

继承机制详解

call() 和 apply()：这两个方法允许我们借用其他函数的this上下文。在上面的例子中，Animal.call(this, name)确保了Dog实例也能访问Animal构造函数的属性。
Object.create()：用于创建一个新对象，并指定其原型。这里我们使用它来建立Dog.prototype与Animal.prototype之间的继承关系。
重置构造器指针：由于Object.create()返回的新对象没有自己的constructor属性，所以我们需要手动将其指向正确的构造函数（即Dog），以保持一致性。

3. ES6 类（Class）

从ES6开始，JavaScript引入了类语法糖，使得基于构造函数的面向对象编程更加直观。虽然类本质上仍然是基于原型的，但提供了更简洁的语法来定义构造函数和继承关系。

javascript">class Animal {constructor(name) {this.name = name;}makeSound() {console.log(`${this.name} makes a sound.`);}
}class Dog extends Animal {constructor(name, breed) {super(name); // 调用父类构造函数this.breed = breed;}bark() {console.log(`${this.name} barks!`);}
}const myDog = new Dog('Buddy', 'Golden Retriever');
myDog.makeSound(); // 输出: Buddy makes a sound.
myDog.bark();      // 输出: Buddy barks!

静态方法

除了实例方法外，类还可以定义静态方法，这些方法直接属于类本身而不是实例。

javascript">class MathUtils {static add(a, b) {return a + b;}
}console.log(MathUtils.add(5, 7)); // 输出: 12

Getter 和 Setter

类中也可以定义getter和setter，以提供对属性的受控访问。

javascript">class Rectangle {constructor(width, height) {this.width = width;this.height = height;}get area() {return this.width * this.height;}set area(value) {throw new Error("Can't directly set the area.");}
}const rect = new Rectangle(10, 5);
console.log(rect.area); // 输出: 50
rect.area = 100;        // 抛出错误: Can't directly set the area.

私有字段（Private Fields）

从ES2020（ES11）开始，JavaScript支持私有字段，使用#符号定义，只能在类内部访问。

javascript">class Counter {#value = 0;increment() {this.#value++;}getValue() {return this.#value;}
}const counter = new Counter();
counter.increment();
console.log(counter.getValue()); // 输出: 1
console.log(counter.#value);     // 错误: Cannot access private field or method

4. 构造函数陷阱与最佳实践

忘记new关键字

如果不小心忘记了new关键字，构造函数就会作为普通函数执行，此时this指向全局对象（非严格模式下为window，严格模式下为undefined），可能导致意外的结果。

javascript">function User(name) {this.name = name;
}const user = User('Alice'); // 忘记了 `new`
console.log(user);          // 输出: undefined
console.log(window.name);   // 输出: Alice (非严格模式)

为了避免这种情况，可以在构造函数顶部添加检查：

javascript">function User(name) {if (!(this instanceof User)) {return new User(name);}this.name = name;
}

或者使用工厂函数：

javascript">function createUser(name) {return new User(name);
}

封装与模块化

无论是对象字面量还是构造函数，都应该遵循良好的封装原则，隐藏内部实现细节，只暴露必要的接口给外部使用。此外，结合模块化开发工具（如ES6模块），可以让代码组织得更好。

javascript">// animal.js
export class Animal {constructor(name) {this.name = name;}makeSound() {console.log(`${this.name} makes a sound.`);}
}// dog.js
import { Animal } from './animal.js';export class Dog extends Animal {bark() {console.log(`${this.name} barks!`);}
}// main.js
import { Dog } from './dog.js';const myDog = new Dog('Buddy');
myDog.makeSound();
myDog.bark();