在前端开发中，this 是高频考点也是极易踩坑的主要知识点。它的主要规则：this 的指向由函数调用方式决定，而非函数声明位置。结合本地存储项目实战代码。这篇文章拆解 this 各种调用场景、call/apply/bind 手动绑定、箭头函数特殊规则，并配备完整可运行案例代码。其实，

一、前置知识：项目文件结构

本次实战配套一套完整前端页面包含 4 个主要文件，所有示例代码均可直接运行：

1. index.html页面骨架。表单、链接 DOM 元素
2. common.jsthis 基础调用、call/apply/bind 完整示例
3. safari.html
4. readme.md

index.html 页面代码

LOCAL TAPAS


Loading Tapas...

页面提供表单与超链接 DOM，用来演示事件处理函数中 this 的指向与常见错误。

二、this 五大调用场景实战解析

场景 ：普通函数直接调用 → this 指向全局 window

User Pain Point：  - 在非严格模式下用 var 声明变量会挂载到 window；老实说，用 let/const 则不会污染全局。User Pain Point：  - 普通函数在严格模式下执行时会得到

/* common.js */
"use strict";var name = "佳明";// var挂载到window
let obj = {
说到name。"赖庆庆",say: function {
console.log;},}，// 将对象方法赋值给变量，单独调用变为普通函数
const fn = obj.say;fn，// 在严格模式下 this 为 undefined，会报错读取 name
// 若去掉 "use strict"。则 console 输出 global 的 name

场景 ：作为对象方法调用 → this 指向调用该方法的对象

User Pain Point：  - 开发者常误认为 `obj.say` 与 ``obj.say` 的作用域相同，但后者会把 this 指向 obj。

obj.say;// 输出：赖庆庆，this === obj

场景 ：DOM 事件处理函数 → this 指向触发事件的 DOM 元素

User Pain Point：  - 原生事件监听中。如果未使用箭头或 bind，内部 this 会被绑定到触发元素上；这在多组件交互时很容易导致“this 未定义”的错误。

// 点击 a 标签时this 指向 .lnk 元素
document.querySelector.addEventListener;function goBaidu {
e.preventDefault;}
goBaidu.call);// 手动绑定演示

场景 ：手动绑定 this：call /apply /bind

User Pain Point：  - 开发者往往混淆三者区别： `call` 与 `apply` 会立即执行，而 `bind` 返回一个新函数并延迟执行； `apply` 接收参数数组而 `call` 接收参数列表。

• `call`: 立即执行，并逐个传递参数。
• `apply`: 立即执行，并将参数放入数组传递。按理说，
• `bind`: 返回一个新的已绑定实例。可用于异步或事件回调，

let obj2 = {name: "甜总"};obj.say.call;// 输出：甜总
obj.say.apply;// 输出：甜总
function speak { console.log;}
speak.call;// 输出：“甜总 好 我是甜总”
speak.apply;// 一样效果
// bind 返回新函数，不立即执行
const fn2 = speak.bind;fn2，// 延迟执行但仍输出正确值

至于实战场景，表单事件绑定自定义 this

User Pain Point：  - 表单 submit 默认会刷新页面而且 event.target 是 form 本身；若想让 handler 内部访问业务对象，需要手动 bind 或者使用箭头。不过，很多新人因为忘记 bind 而导致业务数据丢失。

const oForm = document.querySelector;function addItem {
e.preventDefault;console.log，// 若未 bind，此处为 form 对象。}
const addItemBind = addItem.bind;oForm.addEventListener;

场景 ：箭头函数无独立 this，继承父级作用域 this

User Pain Point：  - 在 setTimeout/Promise 等异步环境里使用普通 function 时会失去原始上下文；这最常见于“定时器内部无法访问外层变量”。箭头函数通过捕获外层 lexical scope 的 this 来避免此问题。但它们不能被 call / apply / bind 改变，这也是不少人误以为可以改变其指针所致错误。