JavaScript构造函数与原型链实战指南

1. JavaScript对象创建与构造函数深度解析

在JavaScript开发中，对象创建和构造函数的使用是每个开发者必须掌握的核心技能。记得我刚入行时，曾因为不理解构造函数原型而写出大量重复代码，直到真正理解这套机制才豁然开朗。本文将带你从实际应用角度，彻底掌握这些进阶概念。

1.1 对象创建的三种经典方式

字面量创建是最直观的方式：

javascript复制const user = {
  name: '张三',
  age: 28,
  login() {
    console.log(`${this.name}登录成功`)
  }
}

这种方式适合创建单个对象，但当需要创建多个相似对象时，就会产生大量重复代码。

工厂函数模式解决了重复问题：

javascript复制function createUser(name, age) {
  return {
    name,
    age,
    login() {
      console.log(`${this.name}登录成功`)
    }
  }
}
const user1 = createUser('李四', 25)

但这种方法存在类型识别问题 - 所有对象都是Object类型，无法区分具体"品种"。

构造函数模式才是正解：

javascript复制function User(name, age) {
  this.name = name
  this.age = age
  this.login = function() {
    console.log(`${this.name}登录成功`)
  }
}
const user2 = new User('王五', 30)

关键点：构造函数名通常采用大驼峰命名，通过new操作符调用时会自动完成：1)创建新对象 2)this绑定 3)原型链接 4)返回对象

1.2 构造函数的底层原理

当使用new操作符时，JS引擎会执行以下隐藏操作：

1. 在内存中创建一个新对象
2. 将新对象的[[Prototype]]指向构造函数的prototype属性
3. 将构造函数内的this绑定到新对象
4. 执行构造函数内部代码
5. 如果构造函数没有返回对象，则自动返回新对象

可以通过手动实现new来理解这个机制：

javascript复制function myNew(constructor, ...args) {
  const obj = Object.create(constructor.prototype)
  const result = constructor.apply(obj, args)
  return result instanceof Object ? result : obj
}