JavaScript中this指向完全解析：四种调用模式与绑定规则

一、理解 this 的本质：调用位置决定指向

初学者对 this 产生困惑的核心原因，往往是将其与词法作用域（Lexical Scope）混为一谈。词法作用域是在代码编写时由函数声明的物理位置决定的，无论函数在哪里被调用，它的变量作用域链在编写完成后就已固定；而 this 恰恰相反，除了 ES6 的箭头函数，普通函数的 this 绑定是在函数执行上下文被创建时确定的。

要判断当前函数体内的 this 指向什么，第一步永远是定位调用位置（Call-site）——即该函数在代码中究竟是“以何种语法形式被执行的”。JavaScript 引擎对普通函数的调用划分了四种基本模式，每种模式对应一套明确的绑定规则：

• 独立函数调用：对应默认绑定规则；
• 方法调用：对应隐式绑定规则；
• 间接/强制调用：通过 call、apply 或 bind 触发显式绑定规则；
• 构造器调用：通过 new 运算符触发new 绑定规则。

二、四种调用模式与绑定规则全解析

1. 默认绑定（Default Binding）

当一个函数不带有任何修饰对象，作为独立函数直接调用时，就会应用默认绑定规则。这是最基础、优先级最低的规则。

在非严格模式（Sloppy Mode）下，默认绑定会将 this 指向全局对象：在浏览器环境中是 window，在 Node.js 环境中是 global。然而在严格模式（"use strict"）下，为了避免全局变量污染与意外修改，JavaScript 规定默认绑定下的 this 为 undefined。

function showInfo() {
  console.log(this);
}

// 1. 非严格模式下独立调用
showInfo(); // 浏览器输出: Window 对象

// 2. 严格模式下独立调用
function showStrictInfo() {
  "use strict";
  console.log(this);
}
showStrictInfo(); // 输出: undefined

2. 隐式绑定（Implicit Binding）

当函数调用前存在上下文对象引用（即形如 obj.method()）时，隐式绑定规则生效。此时，函数体内的 this 会被隐式绑定到该上下文对象上。

const user = {
  name: "Alice",
  greet: function() {
    console.log("Hello, I am " + this.name);
  }
};

user.greet(); // 输出: Hello, I am Alice (this 指向 user)

当对象属性存在多层链式调用时（例如 objA.objB.objC.fn()），this 只会绑定到直接调用它的上一级对象（即紧邻圆点左侧的最近对象）：

const company = {
  name: "TechCorp",
  department: {
    name: "Engineering",
    getName: function() {
      return this.name;
    }
  }
};

console.log(company.department.getName()); // 输出: Engineering (this 指向 department，而非 company)

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

// 情况 A：变量赋值导致隐式丢失
const detachedFn = counter.increase;
detachedFn(); // 输出: undefined (独立调用，this 指向 window)

// 情况 B：参数传递作为回调函数
setTimeout(counter.increase, 100); 
// 输出: undefined (定时器内部由全局环境触发执行，this 指向 window 或 Timeout 对象)

3. 显式绑定（Explicit Binding）

为了解决隐式丢失或主动改变函数的执行上下文，JavaScript 提供了 Function.prototype 上的三个核心方法：call、apply 和 bind。它们允许开发者在调用时显式指定 this 的指向。

• call(thisArg, arg1, arg2, ...)：立即调用函数，第一个参数指定 this，后续参数按逗号依次排列；
• apply(thisArg, [argsArray])：立即调用函数，第一个参数指定 this，第二个参数为一个数组或类数组对象；
• bind(thisArg, arg1, arg2, ...)：不会立即执行函数，而是返回一个永久绑定了指定 this 的全新函数（通常被称为硬绑定）。

function printProfile(role, city) {
  console.log(`${this.name} - 职位: ${role}, 城市: ${city}`);
}

const person = { name: "Bob" };

// 1. call: 参数逗号平铺，立即执行
printProfile.call(person, "前端工程师", "北京");

// 2. apply: 参数以数组传入，立即执行
printProfile.apply(person, ["架构师", "上海"]);

// 3. bind: 返回预绑定后的新函数，延迟执行
const boundPrint = printProfile.bind(person, "技术负责人");
boundPrint("深圳"); // 输出: Bob - 职位: 技术负责人, 城市: 深圳

4. new 绑定（New Binding）

在 JavaScript 中，并没有传统面向对象语言中真正意义上的“构造函数类”。所谓的构造函数，只是一个被 new 操作符调用的普通函数。当使用 new 调用函数时，JavaScript 引擎会在后台自动完成以下四个步骤：

1. 创建全新对象：在内存中分配空间，生成一个崭新的纯净空对象 {}；
2. 原型链链接：将该新对象的内部原型属性（__proto__）指向构造函数的原型对象（Constructor.prototype）；
3. 绑定 this 并执行：将构造函数内部的 this 强制绑定到刚才新建的空对象上，并传入实参执行构造函数体中的初始化代码；
4. 裁决返回值：检查构造函数的执行返回值。如果函数体显式返回了一个非空对象，则返回该对象；否则返回步骤 1 中创建的新实例对象。

function Vehicle(type, brand) {
  this.type = type;
  this.brand = brand;
  // 引擎底层隐式指向新建对象: return this;
}

const car = new Vehicle("轿车", "Tesla");
console.log(car.brand); // 输出: Tesla (this 成功绑定到了新建的 car 实例上)

三、规则优先级与 this 判定四步决策法

当一个函数被调用时，可能同时满足多种绑定特征（例如通过 bind 硬绑定的函数又被 new 调用，或者对象方法通过 call 执行）。此时必须依据规则的优先级来进行裁决。

四种绑定规则的严格优先级次序为：

new 绑定 > 显式绑定 (bind / call / apply) > 隐式绑定 (obj.fn) > 默认绑定 (fn)

判定验证：当 new 遇上 bind

许多开发者好奇：如果一个函数已经通过 bind 显式硬绑定到了对象 A，随后又用 new 来实例化它，最终的 this 究竟听谁的？我们通过代码来实际检验：

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

const objA = { mark: "原始对象A" };
// 1. 将 User 硬绑定到 objA
const BoundUser = User.bind(objA);

// 2. 用 new 实例化硬绑定函数
const instance = new BoundUser("Charlie");

console.log(objA.name);       // 输出: undefined (并未修改 objA)
console.log(instance.name);   // 输出: Charlie (this 牢牢指向了 new 创建的 instance 实例)
console.log(instance instanceof User); // 输出: true

实验结果表明：new 操作符的优先级高于 bind 硬绑定。new 内部重新开辟了新对象，并覆盖了 bind 原本指定的 this。bind 的内部实现（Polyfill）中特意保留了判断逻辑：如果当前执行被当作构造器调用，则放弃预设的 thisArg，改为指向新创建的 this。

四、特殊场景：箭头函数与 DOM 事件

在现代前端开发中，除了上述四种调用模式，还有两个必须掌握的特殊场景：

1. ES6 箭头函数（Arrow Functions）

ES6 引入的箭头函数（() => {}）从根本上颠覆了传统的 this 机制：箭头函数本身没有自己的 this，也不遵守上述四种绑定规则。箭头函数内部的 this 纯粹由声明时所处的外层词法作用域决定：

const timer = {
  seconds: 0,
  start: function() {
    // 普通函数内的 this 指向 timer 对象
    setInterval(() => {
      // 箭头函数继承外层 start 方法的 this
      this.seconds++;
      console.log(this.seconds);
    }, 1000);
  }
};

timer.start(); // 正常自增，this 始终稳稳指向 timer

2. DOM 事件处理函数

在浏览器 DOM 事件回调中，如果是用原生的 addEventListener 注册的普通函数，事件触发时 this 默认指向绑定该事件监听器的 DOM 元素（即 event.currentTarget）：

const btn = document.querySelector("#submit-btn");

btn.addEventListener("click", function(e) {
  console.log(this === btn);                 // 输出: true
  console.log(this === e.currentTarget);     // 输出: true
});

如果事件监听器改写为箭头函数，由于外层通常是全局脚本环境，this 就会指向 window，而非按钮元素本身。

五、核心规则对比与避坑总结

为了便于日常编码快速查阅与排查定位，下表整理了四种调用模式的语法特征、指向结果与常见陷阱：

在日常开发中，只要牢记“定位调用位置 -> 识别调用语法 -> 按优先级比对裁决”这套推导思路，就能准确推导出任何复杂嵌套场景下的 this 指向，从源头上杜绝 undefined 报错与上下文错位问题。