构造函数与new操作符

构造函数与new操作符的关系

构造函数是JavaScript中用于创建对象的特殊函数。当使用new操作符调用一个函数时，该函数就成为了构造函数，会自动创建一个新对象，并将this绑定到这个新对象上。

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

const person1 = new Person('Alice', 25);
console.log(person1); // 输出: Person { name: 'Alice', age: 25 }

new操作符的执行过程

当使用new操作符调用函数时，JavaScript引擎会执行以下步骤：

1. 创建一个空对象
2. 将这个空对象的原型指向构造函数的prototype属性
3. 将构造函数的this绑定到这个新对象
4. 执行构造函数内部的代码
5. 如果构造函数没有显式返回对象，则返回这个新对象

function Car(make, model) {
  // 1. 创建一个空对象 (由JavaScript引擎完成)
  // 2. 设置原型 (由JavaScript引擎完成)
  // 3. this = 新对象 (由JavaScript引擎完成)
  
  this.make = make;
  this.model = model;
  
  // 4. 执行构造函数代码
  this.displayInfo = function() {
    console.log(`${this.make} ${this.model}`);
  };
  
  // 5. 如果没有return语句，返回this (由JavaScript引擎完成)
}

const myCar = new Car('Toyota', 'Camry');
myCar.displayInfo(); // 输出: Toyota Camry

构造函数的返回值

构造函数通常不需要显式返回值，但如果返回的是对象，则会覆盖new操作符创建的默认对象；如果返回的是原始值，则会被忽略。

function Example1() {
  this.value = 1;
  return { value: 2 }; // 返回对象会覆盖
}

function Example2() {
  this.value = 1;
  return 2; // 返回原始值会被忽略
}

const ex1 = new Example1();
console.log(ex1.value); // 输出: 2

const ex2 = new Example2();
console.log(ex2.value); // 输出: 1

构造函数与普通函数的区别

虽然任何函数都可以作为构造函数使用，但通常构造函数会遵循一些约定：

1. 构造函数名称通常以大写字母开头
2. 构造函数应该使用new操作符调用
3. 构造函数通常用于初始化对象状态

// 作为构造函数使用
function Animal(name) {
  this.name = name;
}

const dog = new Animal('Buddy');

// 作为普通函数使用
const result = Animal('Buddy'); // 此时this指向全局对象(非严格模式)
console.log(window.name); // 输出: Buddy (在浏览器环境中)

检测是否使用了new操作符

可以通过检查this的值来确定函数是否作为构造函数被调用：

function User(name) {
  if (!(this instanceof User)) {
    throw new Error('必须使用new操作符调用User');
  }
  this.name = name;
}

// 正确调用
const user1 = new User('Alice');

// 错误调用
const user2 = User('Bob'); // 抛出错误: 必须使用new操作符调用User

ES6中的class语法糖

ES6引入了class语法，它本质上是构造函数的语法糖：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const person = new Person('Charlie', 30);
person.greet(); // 输出: Hello, my name is Charlie

手动实现new操作符

理解new操作符的工作原理后，我们可以手动实现一个类似的函数：

function myNew(constructor, ...args) {
  // 1. 创建一个新对象，并将其原型指向构造函数的prototype
  const obj = Object.create(constructor.prototype);
  
  // 2. 调用构造函数，将this绑定到新对象
  const result = constructor.apply(obj, args);
  
  // 3. 如果构造函数返回对象，则返回该对象；否则返回新对象
  return result instanceof Object ? result : obj;
}

function Test(a, b) {
  this.a = a;
  this.b = b;
}

const testObj = myNew(Test, 1, 2);
console.log(testObj); // 输出: Test { a: 1, b: 2 }

构造函数与原型链

构造函数创建的实例会继承构造函数的prototype属性上的方法和属性：

function Vehicle(type) {
  this.type = type;
}

Vehicle.prototype.start = function() {
  console.log(`${this.type} starting...`);
};

const car = new Vehicle('Car');
car.start(); // 输出: Car starting...

构造函数继承

在JavaScript中，可以通过原型链实现继承：

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

Parent.prototype.sayHello = function() {
  console.log(`Hello, I'm ${this.name}`);
};

function Child(name, age) {
  Parent.call(this, name); // 调用父类构造函数
  this.age = age;
}

// 设置原型链
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

Child.prototype.sayAge = function() {
  console.log(`I'm ${this.age} years old`);
};

const child = new Child('Emma', 5);
child.sayHello(); // 输出: Hello, I'm Emma
child.sayAge();   // 输出: I'm 5 years old

构造函数与工厂函数对比

除了使用构造函数和new操作符，还可以使用工厂函数创建对象：

// 构造函数方式
function Person(name) {
  this.name = name;
}
const p1 = new Person('Alice');

// 工厂函数方式
function createPerson(name) {
  return {
    name,
    greet() {
      console.log(`Hi, I'm ${this.name}`);
    }
  };
}
const p2 = createPerson('Bob');

构造函数中的this问题

在构造函数中使用箭头函数或回调函数时，需要注意this的指向：

function Timer() {
  this.seconds = 0;
  
  // 错误示例 - setInterval中的this指向全局对象
  setInterval(function() {
    this.seconds++; // 这里的this不是Timer实例
  }, 1000);
  
  // 解决方案1 - 使用箭头函数
  setInterval(() => {
    this.seconds++; // 箭头函数不绑定自己的this
  }, 1000);
  
  // 解决方案2 - 保存this引用
  const self = this;
  setInterval(function() {
    self.seconds++;
  }, 1000);
}

const timer = new Timer();

构造函数的性能考虑

在构造函数中定义方法会导致每个实例都有自己的方法副本，影响性能：

function Inefficient() {
  this.method = function() {
    // 每个实例都会有这个方法的新副本
  };
}

function Efficient() {}
Efficient.prototype.method = function() {
  // 所有实例共享同一个方法
};

构造函数与单例模式

有时我们希望构造函数只创建一个实例：

function Singleton() {
  if (Singleton.instance) {
    return Singleton.instance;
  }
  
  this.value = Math.random();
  Singleton.instance = this;
}

const s1 = new Singleton();
const s2 = new Singleton();
console.log(s1 === s2); // 输出: true
console.log(s1.value === s2.value); // 输出: true

构造函数与私有变量

通过闭包可以在构造函数中实现私有变量：

function Counter() {
  let count = 0; // 私有变量
  
  this.increment = function() {
    count++;
    console.log(count);
  };
  
  this.decrement = function() {
    count--;
    console.log(count);
  };
}

const counter = new Counter();
counter.increment(); // 输出: 1
counter.increment(); // 输出: 2
// 无法直接访问count变量

构造函数与对象池模式

构造函数可以用于实现对象池，提高性能：

function ObjectPool() {
  const pool = [];
  
  this.create = function() {
    if (pool.length > 0) {
      return pool.pop();
    }
    return { id: Date.now() };
  };
  
  this.recycle = function(obj) {
    pool.push(obj);
  };
}

const pool = new ObjectPool();
const obj1 = pool.create();
pool.recycle(obj1);