JavaScript创建对象与构造函数

目录

创建对象

一、创建对象的 5 种核心方式

1. 对象字面量（直接量）

2. 使用 Object.create()

3. 工厂模式

4. 构造函数模式

5. ES6 class 语法（语法糖）

二、构造函数与 new 关键字

1. 构造函数的作用

2. 构造函数的特征

3. new 关键字的执行机制

三、构造函数 vs 工厂函数对比

四、原型链与构造函数的关系

五、常见问题与解决方案

1. 忘记使用 new 导致问题

2. 方法重复创建（内存浪费）

六、总结

实例成员与静态成员

一、实例成员（Instance Members）

1. 定义与特点

2. 内存模型

二、静态成员（Static Members）

1. 定义与特点

2. ES6 class 中的静态成员

三、实例成员 vs 静态成员

四、关键使用场景

1. 实例成员的典型应用

2. 静态成员的典型应用

五、继承与静态成员

1. ES6 class 的静态继承

2. ES5 手动实现静态继承

六、常见问题与解决方案

1. 静态方法中访问实例成员

2. 实例方法误用 this 访问静态成员

---

创建对象

一、创建对象的 5 种核心方式

1. 对象字面量（直接量）

特点：最简洁的方式，适合创建简单对象。

const person = {
  name: "Alice",
  age: 30,
  greet() {
    console.log(`Hello, I'm ${this.name}`);
  }
};

2. 使用 Object.create()

特点：基于现有对象原型创建新对象，适合原型继承。

const prototypeObj = { type: "Human" };
const person = Object.create(prototypeObj);
person.name = "Bob";

3. 工厂模式

特点：通过函数封装对象创建逻辑，避免重复代码。

function createPerson(name, age) {
  return {
    name,
    age,
    greet() {
      console.log(`Hi, I'm ${this.name}`);
    }
  };
}
const person = createPerson("Charlie", 25);

4. 构造函数模式

特点：结合 new 关键字创建对象，支持实例化。

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function() {
    console.log(`Hello, I'm ${this.name}`);
  };
}
const person = new Person("David", 28);

5. ES6 class 语法（语法糖）

特点：基于原型的面向对象语法糖，更接近传统面向对象语言。

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet() {
    console.log(`Hi, I'm ${this.name}`);
  }
}
const person = new Person("Eve", 32);

---

二、构造函数与 new 关键字

1. 构造函数的作用

定义：用于创建对象的模板函数，通常与 new 关键字配合使用。

• 初始化对象：定义对象属性和方法。

• 标识对象类型：通过 instanceof 可检测对象类型。

• 绑定原型链：通过 prototype 属性实现继承。

示例：

function Person(name, age) {
  this.name = name;  // 实例属性
  this.age = age;
}

使用 new 的实例化过程：

1. 创建空对象，其 __proto__ 指向 Person.prototype。

2. 执行构造函数，将 this 绑定到新对象。

3. 返回新对象（若构造函数无显式返回对象）。

2. 构造函数的特征

• 命名约定：通常首字母大写（如 Person），便于区分普通函数。

• 强制使用 new：若不使用 new，this 会指向全局对象（严格模式下为 undefined），导致意外行为。

  // 错误示例（未使用 new）
  const p = Person("Frank"); 
  console.log(window.name); // "Frank"（污染全局）

3. new 关键字的执行机制

当使用 new 调用构造函数时，发生以下步骤：

function Person(name) {
  this.name = name;
}

// new 的底层模拟（简化版）
function myNew(constructor, ...args) {
  // 1. 创建一个新对象，并链接到构造函数的原型
  const obj = Object.create(constructor.prototype);
  
  // 2. 执行构造函数，将 this 绑定到新对象
  const result = constructor.apply(obj, args);
  
  // 3. 返回对象（如果构造函数返回对象，则优先返回它）
  return typeof result === 'object' ? result : obj;
}

const person = myNew(Person, "Alice");

详细步骤：

1. 创建空对象：创建一个新对象 obj，其隐式原型（__proto__）指向构造函数的 prototype。

2. 绑定 this：将构造函数内的 this 指向新对象 obj，并执行构造函数代码。

3. 处理返回值：若构造函数返回一个对象，则返回该对象；否则返回 obj。

---

三、构造函数 vs 工厂函数对比

特性	构造函数	工厂函数
创建方式	new Person()	createPerson()
原型链	实例的 __proto__ 指向构造函数原型	默认无原型链绑定
类型检测	instanceof 有效	instanceof 无法识别
性能	稍优（引擎优化）	略低
代码复用	通过原型方法共享	每个对象独立方法（内存冗余）

---

四、原型链与构造函数的关系

• 构造函数：通过 prototype 属性定义共享方法。

• 实例对象：通过 __proto__ 访问原型链。

• 继承机制：实例可访问构造函数原型上的属性和方法。

示例：

function Person(name) {
  this.name = name;
}

// 在原型上添加方法（共享）
Person.prototype.greet = function() {
  console.log(`Hi, I'm ${this.name}`);
};

const person = new Person("Grace");
person.greet(); // 调用原型方法

---

五、常见问题与解决方案

1. 忘记使用 new 导致问题

解决方案：在构造函数内部强制 new 调用。

function Person(name) {
  if (!(this instanceof Person)) {
    return new Person(name);
  }
  this.name = name;
}
const p = Person("Henry"); // 自动补 new

2. 方法重复创建（内存浪费）

问题：构造函数内定义方法会导致每个实例独立一份方法。

function Person(name) {
  this.name = name;
  this.greet = function() {}; // 每个实例都有 greet 方法
}

解决：将方法定义在原型上。

Person.prototype.greet = function() {}; // 共享方法

---

六、总结

• 对象创建方式：根据场景选择字面量、构造函数、class 等。

• 构造函数核心：结合 new 实现实例化，通过原型链共享方法。

• new 的机制：创建对象、绑定原型、执行构造函数、返回对象。

• 最佳实践：方法定义在原型上，避免内存浪费；使用 class 提升代码可读性。

---

  

实例成员与静态成员

---

一、实例成员（Instance Members）

1. 定义与特点

• 定义：属于实例对象的属性和方法，每个实例独立拥有。

• 特点：

  • 实例属性：通过构造函数内的 this 定义，每个实例独占内存。

  • 实例方法：定义在构造函数的 prototype 上，所有实例共享。

• 示例：

  function Person(name) {
    this.name = name; // 实例属性（每个实例独立）
  }
  
  // 实例方法（共享）
  Person.prototype.sayHello = function() {
    console.log(`Hello, I'm ${this.name}`);
  };
  
  const alice = new Person("Alice");
  alice.sayHello(); // "Hello, I'm Alice"

2. 内存模型

• 实例属性：每个对象在堆中独立存储。

• 实例方法：存储在原型对象（Person.prototype）中，所有实例通过原型链共享。

---

二、静态成员（Static Members）

1. 定义与特点

• 定义：属于构造函数本身的属性和方法，无需实例化即可访问。

• 特点：

  • 通过构造函数直接调用（如 Array.isArray()）。

  • 无法访问实例成员（无 this 指向实例）。

• 示例：

  function Person() {}
  
  // 静态属性
  Person.species = "Homo sapiens";
  
  // 静态方法
  Person.createAnonymous = function() {
    return new Person("Anonymous");
  };
  
  console.log(Person.species); // "Homo sapiens"
  const anon = Person.createAnonymous();

2. ES6 class 中的静态成员

• 使用 static 关键字定义：

  class Person {
    static species = "Homo sapiens"; // 静态属性
    
    static createAnonymous() {       // 静态方法
      return new Person("Anonymous");
    }
  }

---

三、实例成员 vs 静态成员

特性	实例成员	静态成员
归属	实例对象	构造函数
内存占用	属性独立，方法共享	全局唯一
访问方式	instance.property	Constructor.property
this 指向	实例对象	构造函数
适用场景	对象状态和行为	工具方法、工厂函数、类配置

---

四、关键使用场景

1. 实例成员的典型应用

• 描述对象状态（如 person.name）。

• 定义对象行为（如 person.sayHello()）。

2. 静态成员的典型应用

• 工具函数：无需实例即可调用的功能（如 Math.abs()）。

• 工厂方法：创建特定类型的实例（如 Person.createAnonymous()）。

• 全局配置：类级别的常量或配置（如 Person.DEFAULT_AGE = 30）。

---

五、继承与静态成员

1. ES6 class 的静态继承

• 子类自动继承父类的静态成员：

  class Employee extends Person {
    static role = "Developer";
  }
  console.log(Employee.species); // "Homo sapiens"（继承自 Person）

2. ES5 手动实现静态继承

• 需显式复制静态成员或设置原型链：

  function Person() {}
  Person.species = "Homo sapiens";
  
  function Employee() {}
  // 继承实例方法
  Employee.prototype = Object.create(Person.prototype);
  // 继承静态成员
  Object.setPrototypeOf(Employee, Person);
  
  console.log(Employee.species); // "Homo sapiens"

---

六、常见问题与解决方案

1. 静态方法中访问实例成员

• 问题：静态方法无实例上下文，无法直接访问实例属性。

• 解决：通过参数传递实例：

  Person.compareAge = function(person1, person2) {
    return person1.age - person2.age;
  };

2. 实例方法误用 this 访问静态成员

• 问题：实例方法中 this 指向实例，无法直接访问静态成员。

• 解决：通过构造函数名访问：

  Person.prototype.logSpecies = function() {
    console.log(Person.species); // 正确
  };

---