this 的指向与 bind() 方法详解

在 JavaScript 中，this 的值取决于函数的调用方式 。

很多初学者在函数、方法、构造函数、箭头函数中常常混淆 this 的指向。

这篇笔记带你彻底搞清楚！

一、this 的指向规则

kotlin 复制代码

/* 根据函数调用的方式不同，this 的值也不同 */

1️⃣ 以函数形式调用：this 是 window（或 undefined 严格模式下）

2️⃣ 以方法形式调用：this 是调用该方法的对象

3️⃣ 构造函数中调用：this 是新创建的对象实例

4️⃣ 箭头函数：没有自己的 this，由外层作用域决定

5️⃣ call/apply 调用：第一个参数就是函数的 this

6️⃣ bind 调用：this 永远由 bind 的第一个参数决定（无法再修改）

二、bind() 的作用与特性

bind() 是函数的一个方法，用于创建一个新的函数 ，这个新函数的 this 和部分参数被固定。

kotlin 复制代码

bind() 有两个主要功能：
1️⃣ 绑定 this 指向
2️⃣ 预绑定部分参数（类似柯里化）

示例一：绑定 this 与参数

javascript 复制代码

function fn(a, b) {
  console.log('this ->', this);
  console.log('参数:', a, b);
}

const obj = { name: 'linxi' };

// bind() 绑定 this 和第一个参数
const exam = fn.bind(obj, 4);

exam(19, 20);

输出分析：

this -> { name: 'linxi' }
a = 4（绑定时已传入）
b = 19（调用时传入的第一个参数）
20 多余，无意义

bind 的预绑定参数类似于 "函数模板"，提前固定一部分参数。

三、箭头函数的特殊性

箭头函数与普通函数的最大区别之一：
没有自己的 this，也没有 arguments。

ini 复制代码

const obj2 = () => {
  console.log(this);
};

obj3 = obj2.bind({ name: 'linxi' });

obj2();
obj3();

输出分析：

两次输出相同的 this（取决于外层作用域）
bind() 对箭头函数无效
箭头函数不会创建自己的 this 或 arguments

无法通过 call()、apply()、bind() 改变箭头函数的 this！

四、知识小结

调用方式	this 指向
普通函数调用	window（或 undefined 严格模式）
方法调用	调用该方法的对象
构造函数调用	新建的实例对象
call/apply	由第一个参数决定
bind	永远绑定为 bind 第一个参数
箭头函数	外层作用域的 this

五、快速记忆口诀

"谁调用指向谁，箭头外层定乾坤，

call/apply 说改谁，bind 一锤定终身。"