JavaScript构造函数原理：与函数的区别、new执行流程及内存优化

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

构造函数（Constructor）本质上仍是函数，主要区别体现在命名惯例、内部行为及调用方式上：

• 命名规范：按照ECMAScript惯例，构造函数名称首字母大写，以便与普通小写命名的函数区分。
• 内部逻辑：构造函数通常在体内使用 this 关键字为即将生成的对象实例绑定属性和方法，且不显式返回具体值，默认隐式返回新创建的对象实例。
• 调用方式：必须配合 new 操作符使用。任何函数若直接使用 new 调用，即被视为构造函数；否则为普通函数调用。

// 1.定义构造函数
function Person(name,age){
  this.age = age;
  this.name = name;
  this.sayName = function(){
    console.log(this.name);
  }
}

// 2.生成实例对象（必须使用 new）
var person1 = new Person('小苏',// 3.打印实例对象查看属性
console.log(person1); 

new关键字的四步执行流程

当使用 new 调用构造函数时，JavaScript引擎会在内存中按顺序执行以下四个步骤：

1. 创建空对象：在内存中开辟一个新的地址，创建一个新的空对象实例。
2. 确定上下文：将构造函数内部的 this 关键字指向这个新创建的实例。
3. 填充内容：执行构造函数体内的代码，为新实例添加属性和方法。
4. 返回结果：隐式或显式返回这个新创建的对象，并将其赋值给变量。

以 var person1 = new Person("Bob", 18); 为例，其内部等价于手动模拟的过程：
首先创建新对象实例，使 this 指向它，接着执行 this.name = 'Bob' 等操作，最后将该实例作为返回值赋予 person1 变量。

构造函数存在的问题：内存浪费

在实际开发中，如果在构造函数体内直接定义方法（如 this.sayName = function(){...}），会导致每个实例化对象都独立创建一份方法副本。这意味着 person1 和 person2 中的 sayName 虽然功能相同，却是两个完全不同的函数引用，占据多块内存空间，造成严重的性能浪费。

console.log(person1.sayName === person2.sayName); // false

解决方案1：提取公共函数

可以将通用的方法提取到构造函数外部，成为全局函数，并在构造函数内直接赋值引用。这样所有实例共享同一个函数地址，节省内存。

function sayName() {
  console.log(this.name);
}

function Person(name,age) {
  this.name = name;
  this.age = age;
  this.type = "human";
  this.sayName = sayName; // 引用全局函数
} 

局限：这会污染全局作用域。如果项目中有大量公共方法，外部会堆积大量函数名，增加命名冲突的风险且难以维护。

解决方案2：对象封装

为了解决全局污染问题，可以将多个公共方法封装在一个普通对象中，通过属性访问来复用。

var fns = {
  sayName : function() { console.log(this.name); },
  sayAge : function() { console.log(this.age); }      
}; 

function Person(name,age) {
  // ...其他属性
  this.sayName = fns.sayName; 
}

尽管这解决了命名冲突和全局污染，但如果把所有逻辑都放在全局对象中，依然无法实现真正的“自定义类型”封装。更重要的是，这种方法并未触及JavaScript面向对象的核心理念。

迈向最佳实践：引入原型概念

上述方案仅为权宜之计。要彻底解决构造函数方法重复创建的问题，同时保持代码的结构化与低耦合，需要引入JavaScript的原型链（Prototype）机制。通过将方法定义在构造函数的 prototype 对象上，可以实现所有实例共享同一个方法引用，这是JavaScript中构建高效、可扩展对象模型的真正标准做法。

以上就是JavaScript构造函数及其内存优化的详细内容，更多关于JavaScript面向对象编程的资料请关注本站其它相关文章！