JavaScript中直接调用、方法调用与构造函数调用的区别

一、调用模式概览与判别路径

JavaScript 的函数是一等公民，函数定义本身并不绑定固定的 this（除了箭头函数与经 bind 显式锁定的函数）。this 的指向完全取决于“函数在被调用时的语法形态”。

日常编码中常见的函数调用形态主要分为以下三类：

• 直接调用（Function Invocation）：如 getName()。以独立函数名直接加括号执行，不挂靠在任何对象属性后。
• 方法调用（Method Invocation）：如 user.getName()。通过属性访问符（点号或中括号）依附于特定对象来触发执行。
• 构造函数调用（Constructor Invocation）：如 new Person()。在调用前面附加 new 运算符，旨在实例化一个新对象。

二、直接调用（Function Invocation）的机制与细节

直接调用是指不依赖于任何显式宿主对象、直接以函数名或函数表达式加圆括号执行的方式。这种调用最常见于普通工具函数、立即执行函数（IIFE）以及绝大多数内置异步回调函数。

1. this 指向规则

在直接调用中，this 的指向完全取决于当前执行上下文是否启用了严格模式（'use strict'）：

• 非严格模式（Sloppy Mode）：this 会自动回退（Fallback）并绑定为全局对象。在浏览器环境中是 window，在 Node.js 环境中是 global。
• 严格模式（Strict Mode）：禁止将全局对象作为默认上下文，this 保持为 undefined。

function showInfo() {
  console.log("非严格模式 this:", this);
}

function showInfoStrict() {
  "use strict";
  console.log("严格模式 this:", this);
}

showInfo();       // 浏览器环境下打印: window
showInfoStrict(); // 严格模式下打印: undefined

2. 返回值表现

直接调用的返回值严格遵循函数体内的 return 语句。如果执行流没有遇到显式的 return，或者仅书写了无实参的 return;，则函数的最终评估结果均为 undefined。

const counter = {
  count: 10,
  increase() {
    this.count++;
    console.log(this.count);
  }
};

// 错误调用：回调被直接调用，this 不再是 counter
setTimeout(counter.increase, 100); // 非严格模式下可能变成 window.count++，结果为 NaN

三、方法调用（Method Invocation）的机制与细节

当一个函数被赋值给某个对象的属性，并通过属性访问运算符（. 或 []）进行触发时，这种方式被称为方法调用。

1. this 指向规则

方法调用的核心原则是：this 永远指向紧邻调用圆括号左侧的直接宿主对象。无论该方法是在对象自身直接声明，还是沿原型链继承而来，调用发生时的调用方（Call-site）主体决定了 this。

const user = {
  name: "张三",
  sayHello() {
    return "你好，我是 " + this.name;
  }
};

console.log(user.sayHello()); // "你好，我是 张三"，this 指向 user

在链式对象调用中，this 仅与最末尾点号前面的对象绑定：

const company = {
  name: "云端科技",
  department: {
    name: "研发中心",
    printName() {
      console.log(this.name);
    }
  }
};

company.department.printName(); // 打印 "研发中心"，而不是 "云端科技"

2. 方法抽离后的上下文丢失

方法调用的关键在于调用表达式本身带有属性前缀。如果将对象的方法赋值给一个独立变量，再通过该变量加圆括号调用，语法形态便由“方法调用”退化为了“直接调用”，原有绑定随之瓦解：

const car = {
  brand: "极氪",
  getBrand() {
    return this.brand;
  }
};

console.log(car.getBrand()); // 方法调用: "极氪"

const extractBrand = car.getBrand;
console.log(extractBrand());  // 直接调用: undefined (严格模式下甚至抛出 TypeError)

四、构造函数调用（Constructor Invocation）与 new 机制

在普通函数调用前添加 new 关键字，该调用就转变为构造函数调用。构造函数的主要职责不是单纯执行一段算法，而是依据模板创建并初始化一个全新的对象实例。

1. new 运算符内部发生的 4 个关键步骤

ECMAScript 规范对 new Func(...) 的底层步骤有明确定义：

1. 创建新对象：在内存中分配一个全新的空普通对象 {}。
2. 链接原型：将这个新对象的隐式内部原型 [[Prototype]]（通常通过 __proto__ 暴露）关联到构造函数的 prototype 属性上。
3. 绑定 this 并执行：将构造函数内部的 this 指向该新对象，并传入给定的实参执行构造函数中的代码。
4. 确定最终返回值：检查函数执行后的返回值。若显式返回了一个非原始类型的对象（如 Object、Array、Function 等），则最终返回该自定义对象；否则，忽略原始值返回，将第 1 步创建的新实例作为结果返回。

2. 构造函数中的显式 return 陷阱

与直接调用或方法调用不同，构造函数对 return 返回值的类型极为敏感：

• 如果显式返回基本原始类型（如 number、string、boolean、null、undefined），这些返回值会被静默丢弃，外界依然拿到 new 出来的新实例。
• 如果显式返回引用对象类型（如普通对象 {}、数组 []），外界接收到的将是这个被返回的对象，而非新创建的实例。

function WidgetA() {
  this.name = "Widget A";
  return 123; // 原始类型，会被无视
}

function WidgetB() {
  this.name = "Widget B";
  return { custom: "override" }; // 引用对象，将覆盖 new 生成的实例
}

const a = new WidgetA();
console.log(a.name);   // "Widget A"，实例正常保留

const b = new WidgetB();
console.log(b.name);   // undefined
console.log(b.custom); // "override"，实例被完全劫持替换

五、三种调用方式核心维度综合对比

为了在实际排查问题或面试解析中迅速定位差异，可围绕 this 来源、返回值特征、原型影响和错误调用后果进行横向对照：

六、工程实践中的典型陷阱与防御方案

1. 遗漏 new 关键字的防御（new.target 与 instanceof）

如果开发者将本来设计为构造函数的函数以“直接调用”形式触发，不仅无法获得预期实例（返回 undefined），还会使函数内部的 this.xxx = yyy 挂载到全局变量或报错。现代 JavaScript 提供了可靠的原生检测机制：

function SafeUser(name, age) {
  // 利用 ES6 规范内置的 new.target 元属性
  if (!new.target) {
    // 自动弥补 new 缺失，纠正为构造调用
    return new SafeUser(name, age);
  }

  this.name = name;
  this.age = age;
}

// 即使漏写 new，依然可以正确产出实例
const u1 = SafeUser("王五", 28);
console.log(u1 instanceof SafeUser); // true
console.log(u1.name);               // "王五"

2. 回调函数中 this 丢失的三种修正途径

当对象方法需要作为回调提供给事件监听器或计时器时，务必使用以下三种手段之一维持宿主绑定：

• 箭头函数包装：利用箭头函数不创建自身 this、静态捕获外层作用域上下文的特性：

  setTimeout(() => counter.increase(), 100);

• Function.prototype.bind：硬绑定返回一个永久锁定目标宿主的新函数：

  setTimeout(counter.increase.bind(counter), 100);

• 类中类字段箭头函数（Class Field Syntax）：在构造阶段为每个实例直接绑定：

  class Button {
    handleClick = () => {
      console.log("处理按钮点击:", this);
    };
  }