JavaScript构造函数中的this指向规则详解

一、核心定律：构造调用下的 this 绑定目标

在 JavaScript 对象的面向对象编程模式中，构造函数通常用来充当创建对象的模板。当一个普通函数通过关键字 new 调用时，它的行为与普通函数调用产生了本质区别。此时，引擎会自动在内存中分配一个全新的空对象，并将该构造函数执行上下文中的 this 明确指向这个新对象。

我们先通过一段直观的代码来看 this 在构造函数中的赋值过程：

function User(username, role) {
    // 此时 this 指向刚刚在内存中被开辟出来的空白实例对象
    this.username = username;
    this.role = role;
    this.createdAt = new Date();
}

// 使用 new 关键字进行构造调用
const userA = new User("李雷", "Admin");
const userB = new User("韩梅梅", "Editor");

console.log(userA.username); // 打印: "李雷"
console.log(userB.username); // 打印: "韩梅梅"
console.log(userA !== userB); // 打印: true (各自持有独立的内存引用与 this 属性)

在这段代码执行时，每一次 new User(...) 都会经历独立的实例化过程。userA 与 userB 分别是由构造函数生成的独立实例，各自拥有私有的 username 与 role 属性。之所以属性能够挂载到对应的实例上，正是因为构造函数执行时，内部的 this 准确绑定了当前正在生成的实例。

二、底层探秘：new 操作符与 this 诞生的四个步骤

为什么加上 new 之后，this 就能神奇地指向新对象？这是由 ECMAScript 规范中对 [[Construct]] 内部方法的定义决定的。任何普通函数被 new 作用时，JavaScript 引擎会在幕后依序执行以下四个标准步骤：

1. 开辟新对象：在内存中创建一个全新的普通空对象（即 {}）。
2. 确立原型链：将这个新对象的内部私有属性 [[Prototype]]（在浏览器中体现为 __proto__）链接到构造函数的 prototype 原型对象上，使新对象具备继承原型方法的能力。
3. 绑定 this 并执行代码：调用构造函数本身，并将刚刚生成的空对象作为上下文显式绑定给 this（类似执行 Constructor.call(newObj, ...args)）。此时函数内部通过 this.xxx = yyy 写入的所有属性都会直接赋到该新对象上。
4. 决定最终返回值：检查构造函数执行后的返回值。如果函数显式返回了一个引用类型（如一个对象、数组或函数），则最终交付该显式返回的对象；否则（无返回值或返回基本数据类型），自动返回步骤 1 中创建并绑定了 this 的新实例对象。

图 1：new 操作符中 this 的创建、继承、绑定及返回的完整生命周期

三、容易混淆的陷阱：普通调用 vs 构造调用

在 JavaScript 中，除了 ES6 的 class 明确禁止直接调用外，传统由 function 声明的构造函数在语法上就是一个普通函数。这意味着开发者可能会因为疏忽而漏写 new 关键字。此时，函数体内的 this 指向将完全改变，并引发严重的隐蔽错误。

1. 非严格模式下漏写 new：全局对象污染

如果在非严格模式下直接调用构造函数，这属于标准的“默认函数调用”。此时 this 会自动回退并指向全局对象（在浏览器环境中是 window，在 Node.js 环境中是 global）：

function Car(brand, price) {
    // 漏写 new 时，这里的 this 指向全局 window 对象！
    this.brand = brand;
    this.price = price;
}

// 错误示范：忘记加 new
const myCar = Car("Tesla", 300000);

console.log(myCar);            // 打印: undefined (普通函数没有显式 return，默认返回 undefined)
console.log(window.brand);     // 打印: "Tesla" (变量被恶意污染到全局命名空间！)
console.log(window.price);     // 打印: 300000

这种错误非常致命：变量 myCar 根本没有拿到预期的对象，而是变成了 undefined，同时无意中污染了全局作用域，极易覆盖现有的全局变量或库函数。

2. 严格模式下的保护机制

如果在脚本开头或函数内部声明了 "use strict";，JavaScript 会禁止 this 默认绑定到全局对象。当以普通函数方式调用时，this 的值将保持为 undefined：

function Car(brand, price) {
    "use strict";
    // 此时 this 是 undefined，尝试向 undefined 添加属性会立即阻断并抛错
    this.brand = brand; // Uncaught TypeError: Cannot set property 'brand' of undefined
    this.price = price;
}

Car("Tesla", 300000); // 运行时立即崩溃报错，防止静默污染全局

图 2：普通调用（严格/非严格）与 new 调用的执行上下文及安全性差异

四、返回值扰动：return 语句如何影响 this 指向

常规的构造函数通常不写 return 语句，执行结束后默认返回构造出来的 this 实例。但是，如果构造函数显式添加了 return，返回内容的类型将直接左右外部接收到的对象是 this 还是被替换掉。

1. 返回基本数据类型：return 被自动忽略

如果显式 return 了一个基本数据类型（如数字、字符串、布尔值、null、undefined、Symbol），JavaScript 引擎会判定该返回值无效，强制忽略它，依然返回构造出来的 this 实例对象：

function PrimitiveDemo(name) {
    this.name = name;
    // 显式返回基本数据类型（字符串、数字、甚至 null）
    return "这是无效返回值"; 
}

const p = new PrimitiveDemo("测试对象");
console.log(p.name); // 依然打印: "测试对象"
console.log(p);      // 打印: PrimitiveDemo { name: '测试对象' }（字符串被忽略）

2. 返回引用对象类型：内部 this 实例被完全覆盖

如果显式 return 了一个引用数据类型（如一个字面量对象 {}、数组 []、函数 function 或其他实例），那么原本在构造函数内部精心初始化并绑定了属性的 this 实例会被立即抛弃，最终外部获取到的是 return 指定的那个对象：

function ObjectOverride(name) {
    this.name = name;
    this.type = "OriginThis";

    // 显式返回一个全新的引用对象
    return {
        externalName: "被篡改的外部对象",
        status: 200
    };
}

const obj = new ObjectOverride("核心数据");
console.log(obj.name);         // 打印: undefined (原本 this 上的 name 不复存在)
console.log(obj.externalName); // 打印: "被篡改的外部对象"
console.log(obj instanceof ObjectOverride); // 打印: false (原型链也被切断！)

这种情况不仅会导致 this 的初始化工作白费，更会由于返回了完全不相关的对象，导致外部对象的原型链无法继承 ObjectOverride.prototype，造成 instanceof 判断失真。

图 3：构造函数中 return 语句对 this 实例最终去向的决策逻辑

五、陷阱与规避：构造函数内部的 this 丢失与防御

在复杂的业务逻辑中，即便正确使用了 new 关键字，如果构造函数内部包含了异步回调函数（如 setTimeout、Promise）或 DOM 事件监听器，依然会出现经典的“this 丢失”现象。

1. 异步回调中的 this 漂移

普通函数在异步触发时是由宿主环境直接调用的，其内部 this 无法自动沿用构造函数的实例上下文：

function TimerComponent(id) {
    this.id = id;
    
    // 错误示范：setTimeout 中的普通函数调用
    setTimeout(function() {
        // 这里的 this 在非严格模式下指向 window，严格模式下为 undefined！
        console.log("定时器触发，ID为：" + this.id); // 打印: "定时器触发，ID为：undefined"
    }, 1000);
}

new TimerComponent(1001);

2. 正确破局：箭头函数闭包与显式绑定

箭头函数没有属于自己的 this，它会静态捕获定义时所在外层上下文的 this。因此，将回调函数改写为箭头函数，能够完美保留构造函数指向的实例对象：

function TimerComponentSafe(id) {
    this.id = id;

    // 正确做法：使用箭头函数继承构造函数的 this 实例
    setTimeout(() => {
        console.log("安全触发，ID为：" + this.id); // 正确打印: "安全触发，ID为：1001"
    }, 1000);
}

new TimerComponentSafe(1001);

六、现代工程方案：防止误调用的防御性模式

为了杜绝调用者遗漏 new 导致的致命缺陷，在现代 JavaScript 项目中有两套最常见且可靠的防御方案。

方案 1：使用 ES6 语法元属性 new.target 实现自动补全

ES6 引入了 new.target 元属性。如果一个函数通过 new 触发，new.target 将指向该函数自身；如果作为普通函数调用，new.target 则为 undefined。我们可以利用这个特性实现安全防御与自适应构造：

function SmartAccount(user) {
    // 检查是否通过 new 调用
    if (!new.target) {
        // 未加 new 时，内部自动以 new 方式重新调用并返回
        return new SmartAccount(user);
    }

    // 安全保证：this 必定是 SmartAccount 实例
    this.user = user;
}

const acc1 = new SmartAccount("张三");
const acc2 = SmartAccount("李四"); // 即使漏写 new，也能安全获得合法实例

console.log(acc1 instanceof SmartAccount); // true
console.log(acc2 instanceof SmartAccount); // true

方案 2：全面拥抱 ES6 class 语法糖

在现代前端工程（如 React, Vue, TypeScript）中，推荐直接使用 class 关键字。根据语言规范，所有通过 class 声明的类内部自带 [[Construct]] 强制约束，一旦作为普通函数调用，引擎会在语法层面直接阻断并抛出清晰的错误提示：

class Product {
    constructor(name, price) {
        this.name = name;
        this.price = price;
    }
}

const p1 = new Product("笔记本", 5999); // 正常实例化
const p2 = Product("手机", 2999);       // 立即抛错：Class constructor Product cannot be invoked without 'new'

图 4：JavaScript 构造函数中 this 指向规律、排查手段及开发推荐规范汇总

七、知识总结对照表

为了方便日常开发查阅，下表整理了在不同调用模式与上下文环境中构造函数的 this 表现：

理解构造函数中 this 的指向规律，本质上是把握 JavaScript 中“函数执行上下文是在调用时确定而非定义时确定”以及“new 运算符内部所执行的四步对象创建流程”。在编写面向对象代码时，养成严谨的防御式编程习惯（如使用 new.target 守卫或直接编写 ES6 class），可以从根本上避开 this 漂移带来的潜在缺陷。